AppHTMLのカスタマイズをしてみたので、ちょっとご紹介
2013年12月15日
しゅんぼー(@shun_kashiwa)です。今日はずっとブログのカスタマイズしてますなぁ…
今度は、iTunesStoreのものをシェアするときに使っていたブックマークレット「AppHTML」をカスタマイズしてみました。
こんな感じになりました(^^)
これがiPhone,iPad,Macの場合
これが、iTunesの音楽の場合です。
一応コードを載せてみる
CSSは共通です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.appwrap { background-color:white; -webkit-border-radius:10px; border:yellowgreen 1px dashed; } .appwrap a{ text-decoration:none; } .appinfo { margin-left: auto; margin-right:auto; width:300px; height:100px; } .applink { margin-right:10px; float:left; } .appimg { margin-top:10px; width:80px; height:80px; -webkit-border-radius:19px; } .apptext { max-width:180px; text-align:center; padding-top:10px; } .apptext>span { display:block; width:300px; } .apptext>span>a { margin-top:10px; color:#0BD318; font-size:14pt; } .appdl { margin-top:10px; margin-bottom:10px; clear:both; width:280px; margin-left:auto; margin-right:auto; text-align:center; height:50px; width:260px; background-color:#0BD318; color:white; line-height:50px; font-size:17pt; transition-property: background; transition-duration:0.2s; transition-timing-function:ease-out; transition-delay:0s; } .appdl:hover{ background-color:#FF9500; } |
HTMLは分けていますが、ほとんど一緒です
1 2 3 4 5 6 |
<div class="appwrap"> <div class="appinfo"><a class="applink" href="${url}"><img class="appimg" alt="" src="${icon100url}" /></a> <div class="apptext"><a href="${url}">${name}</a>{category}${price}</div> </div> <div class="appdl">Download this App</div> </div> |
これがアプリの場合
1 2 3 4 5 6 |
<div class="appwrap"> <div class="appinfo"><a class="applink" href="${url}"><img class="appimg" alt="" src="${icon100url}" /></a> <div class="apptext"><a href="${url}">${name}</a>${artist}${price}</div> </div> <div class="appdl">Download this Song</div> </div> |
若干違うんですね。カテゴリーとアーティスト名をそれぞれ表示しています。
これを、
AppHtmlブックマークレット・メーカー
ここに貼り付け、CSSをWordpress内部で適用してあげればOKです。
style属性を使ってCSSを組み込んでもいいのですが、アニメーションを入れている分コードも長くなるため、やめました。
さいごに
自分でカスタマイズすると達成感がありますね。ほぼ素人なので、なかなか大変でした。
もしよければ、参考にしてください。しゅんぼー(@shun_kashiwa)でした