waka8*stakes

〜馬絵+林檎+Wordpress〜

Apphtmlメーカーで生成されるソースを自分好みに改造してみた

appdownloadbutton.html-1

AppHtmlとは

私は、多くのブロガーさんのようにリンクシェアでアフィリエイトやってなかったので
PHGアフィリエイトコードを取得してからのリンクの書き換えは容易でした。

今までからの変更点

  • PHGのアフィリエイトコード(アフリエイトトークン)を入れた
  • 定義タグ<dl><dt></dt><dd></dd></dl>でマークアップ
  • 外部CSS化。表示は自分のブログに合うようにしました
  • 多くのブロガーさんを真似して大きい『ダウンロード』ボタンを付けてみた
  • そのボタンを画像を使わずCSSで表現

参考までにカスタマイズしてる方の記事

私のHTMLソース

わかりやすく改行とインデントを入れてみました。

HTML

 
<dl class="apphtmlbox"> <!-- AppHtml枠 -->
    <dt class="appIcon">
     <img class="appIconImg" height="100" src="${icon100url}"> <!-- アプリアイコン画像--> 
       <span class="appName"><strong><a href="${url}" target="itunes_store">${name}</a></strong></span><!-- アプリ名--></dt>
    <dd class="appDescription">
      <ul class="appDescList">  
         <li class="appArtistSeller">作者/販売元:${artist}&nbsp;/&nbsp;${seller}</li>
         <li class="appCategory">カテゴリ: ${category}</li>
         <li class="appPrice">価格: ${price}<span class="appPriceNote">(掲載時の価格です)</span></li>
       </ul>
   </dd>
   <dd class="go-to-itunes"><a class="appDownload" href="${url}" target="itunes_store">アプリをダウンロード</a><!-- ダウンロードボタン -->
   </dd>
</dl><-- AppHtml ここまで -->

改行が入ってると動かないので改行や空白を取り除いて一行にしてコードをコピペしてAppHtmlメーカーのカスタマイズ欄にペーストします。

上のソースを一行にしました。よかったらどうぞ。

CSS

まず、ローカル環境でタグに直接CSSを付けた状態でCSSを調整しました。うまくいったらCSSをタグから削除しブログに使用中のテーマのCSSに合わせて調整します。その後アップロードして表示確認します。自作テーマではこれでうまくいきました。モバイル版にも同じCSSをあてがってしまいました。

CSS3多用。めんどくさい接頭辞(-moz-… とか-webkit-…)は付けてません。IE6の方ごめんなさい。

dl.apphtmlbox{ background-color:
#f0f8f9; 
border-radius: 20px; /* 角丸の背景 */ 
margin: 0.6em 2em;
padding:15px; 
} 
dt.appIcon{ 
margin-right: 150px; 
padding: 5px;
border-bottom: 1px solid #2F6DD2; /* アプリ名の下にライン */ 
}
img.appIconImg{  
float: left; /* アイコンは左寄せ */
margin: 0 30px 20px 20px; 
border-radius: 22px; 
box-shadow: 1px 1px 2px #999999; 
}
span.appName{ 
font-size: 1.5em; margin: 0 5px; 
} 
dd.appDescription{
margin: 0.5em; 
} 
ul.appDescList{ 
margin: 1em 0 1em 100px;
font-size: 100%; 
} 
li.appCategory, 
li.appPrice, 
li.appArtistSeller{
list-style-type:none !important; 
} 
span.appPriceNote{ 
font-size:
80%; color: #fc4f22; 
} 
dd.go-to-itunes{ 
margin: 2em 1em; 
clear: both; 
padding: 1em 0; 
text-align: right; 
} 
a.appDownload{ /*角丸ドロップシャドウ付きの大きいボタン */ 
font-size: 1.5em; 
padding: 0.7em;
background-color: #55bae8;
color: #ffffff;
border-radius: 20px; 
box-shadow: 2px 2px 4px #28a7e2;
text-decoration: none; 
margin: 0px -20px 30px 135px; 
} 

使用例

Rowline
  • 作者/販売元:Yusuke Tsuji / Yusuke Tsuji
  • カテゴリ: ビジネス
  • 価格: ¥300 (掲載時の価格です)
アプリをダウンロード

有名iPhoneブロガー様多数ご利用のアプリ。プレビューしながら行の入れ替えまでできる優れものです。作者は @rivawan さん。

画像

パソコン(自分の環境:iMac/OSX10.7/Chrome32)で見ると綺麗に見えてるのですがiPhone(スマフォはモバイルテーマを適用するようにプラグインを使ってる)で見たときに悲惨な事になってました。

悲惨な見た目
悲惨な見た目
びろ〜ん、ボタンバラバラ事件などもう残念な事になってます(笑)
iPhoneでパソコン向けテーマを適応
IMG_8677
パソコンで見たのと変わらず綺麗に表示。崩れてません。

マイナスのマージン値(margin: -20pxとか)や100px以上のマージン、パディングを使ったり、無理矢理合わせてみた感があったから当たり前っちゃあ当たり前なんですけど。慌ててローカル環境のWordpressをモバイルテーマに切り替えてブラウザを細くして、AppHtml表示のCSSを作り直しました。ついでにモバイルテーマ自体も以下のように修正しておきました。

 
/*AppHTML Mobile Style*/
dl.apphtmlbox{
background-color: #f0f8f9;
border-radius: 20px;
margin: 5px; padding:3px;
} 
dt.appIcon{
padding: 2px;
border-bottom: 1px solid #2F6DD2; 
height: 110px; 
} 
img.appIconImg{
width: 100px; 
float: left; 
margin: 0; 
border-radius: 22px; 
}
span.appName{ 
font-size: 1em; 
margin: 0 5px; 
padding-left: 2px; 
}
dd.appDescription{ 
margin: 3px; 
clear: both; 
} 
ul.appDescList{
margin: 5px; 
} 
li.appCategory, 
li.appPrice, 
li.appArtistSeller{
list-style-type:none !important; 
font-size: 96%; 
}
span.appPriceNote{ 
font-size: 80%; 
color: #fc4f22; 
}
dd.go-to-itunes{ 
margin: 10px 5px; 
padding:3px; 
text-align: center;
} 
a.appDownload{ 
font-size: 1.2em; 
padding: 0.7em;
background-color: #55bae8; 
color: #ffffff; 
border-radius: 20px;
text-decoration: none; 
margin: 5px; 
} 

ローカル環境でモバイル用テーマを適用してみてみたら逆に横長になりました。

逆にスマフォテーマをPCで見る
逆にスマフォテーマをPCで見る
横にびろ〜んですがまあいいでしょう(笑) パソコンなら普通にパソコンテーマで見てるし。