はじめに

ここ最近「アプリをダウンロードする」ボタンを配置されるブロガーさんが多いため、私も遅ればせながら置いてみました。
@fwhx5296ことShigechanです。

素人ながらFireworksで作ってみましたｗ
ボタンはこちらです。

こんなシンプルなものしか作れないｗ

参考にさせてもらったのが、大さん（@delaymania）のこちらのエントリー
アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania
delaymania …

勉強がてら自作「アプリをダウンロードする」アイコンをサーバーにおいて、AppHTMLで取得できるようにしました。

 

ソースはこちらです。

◆ボタンのみの場合◆

<div class="appDownloadButton"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="https://twi-papa.com/wp-content/themes/yoko/images/appDownloadButton.png" width="302" height="52" alt="アプリをダウンロードする" /></a></div>

◆いつものAppHTMLにボタンを付けた場合◆

<div class="appHtmlFrame"><span class="appIcon"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="${icon100url}" width="100" height="100" class="appIconImg" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px; float:left;" alt="${appname}"></a></span><span class="appTitle"><a href="${linkshareurl}" target="_blank" rel="nofollow"> ${appname}</a></span><br> <span class="appPrice">価格: ${price}</span><br> <span class="appCat">カテゴリ: ${category}</span><br> <span class="appLink"><a href="${linkshareurl}" target="_blank" rel="nofollow">App Storeで詳細を見る</a></span><br><div class="appDownloadButton"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="https://twi-papa.com/wp-content/themes/yoko/images/appDownloadButton.png" width="302" height="52" alt="アプリをダウンロードする"></a></div><br style="clear: both;"></div>

ここで、自分が作ったアプリでも配置すればかっこいいんでしょうけど、生憎そのような技術も知識も持ち合わせていませんｗ
ってことで、最近脚光を浴びまくって私も使わさせてもらっている大さん（@delaymania）のアプリである、ThumbEditを貼っておきます。
ありがとうございます。

 

◆ボタンのみです。

 

◆アイコンとボタンのセットです。

 

さいごに

これで以前よりは見やすくなったかなと思います。
ブログを弄るのって楽しいですね。いろんなアレンジが出来ますしね。
ただし時間はかかりますがｗ