AppHTMLのカスタマイズをしてみたので、ちょっとご紹介

2013年12月15日

しゅんぼー(@shun_kashiwa)です。今日はずっとブログのカスタマイズしてますなぁ…

今度は、iTunesStoreのものをシェアするときに使っていたブックマークレット「AppHTML」をカスタマイズしてみました。

こんな感じになりました(^^)

Cytusゲーム, ミュージック, アーケード, ミュージック￥200

Download this App

これがiPhone,iPad,Macの場合

Cytus-Prologue-Various Artists￥1,500

Download this Song

これが、iTunesの音楽の場合です。

一応コードを載せてみる

CSSは共通です。

.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;
}

.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は分けていますが、ほとんど一緒です

<div class="appwrap">
<div class="appinfo"><a class="applink" href="${url}"><img class="appimg" alt="" src="${icon100url}" /></a>&nbsp;
<div class="apptext"><a href="${url}">${name}</a>{category}${price}</div>
</div>
<div class="appdl">Download this App</div>
</div>

<div class="apptext"><a href="${url}">${name}</a>{category}${price}</div>

</div>

<div class="appdl">Download this App</div>

</div>

これがアプリの場合

<div class="appwrap">
<div class="appinfo"><a class="applink" href="${url}"><img class="appimg" alt="" src="${icon100url}" /></a>&nbsp;
<div class="apptext"><a href="${url}">${name}</a>${artist}${price}</div>
</div>
<div class="appdl">Download this Song</div>
</div>

<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)でした

Please Share !

Twitter Facebook Google+ LINE Hatebu