AppHtmlをカスタマイズして「アプリをダウンロードする」ボタンを追加！『 ButtomMaker 』でボタン画像も簡単に作れた！

@Mori2ndです。iPhoneアプリの紹介時に簡単に画像付きリンクを作成できるAppHtml。

AppHtmlメーカー

こちらをカスタマイズして「アプリをダウンロードする」ボタンを追加しているサイトが増えてきたので、このブログでもカスタマイズして取り入れてみました。

AppHtmlをカスタマイズしてこうなりました！

MoveEver - Evernoteを整理する
価格: ￥170 (記事公開時)
カテゴリ: 仕事効率化, ユーティリティ
App Storeで詳細を見る

これでどこからダウンロードできるかわかりやすくなりました！

作成手順もご紹介します！

「アプリをダウンロードする」ボタンを画像で作成

ボタンは画像で作成してみました。@Gaku0318さんのブログを参考にして『 ButtomMaker 』を利用。

ボタン素材自動生成サイト - ButtonMakerアフラット

試してみたら、すごく簡単に作成できるんですんね。これは便利だ。

ちなみに画像サイズはRetina対応を意識して大きくしてみました。

設定内容はこんな感じです。

画像サイズは縦：100px、横：560px
背景色：#003399
テキスト１のフォント：HGRSGU、カラー：#FFFFFF、サイズ：40point、位置：中央
丸い角の位置：すべてチェック、半径：10ピクセル
クリア調：2番

後はデフォルトのまま。

「create」を実行すると画像が出来上がるんで、画像を右クリックでダウンロードするなりして保存。

最後にブログのサーバーにアップロードしたら画像はOK。

AppHtmlをカスタマイズして作成したボタンを追加

@delaymaniaさんのところで紹介されていた内容をコピペして、少しアレンジさせてもらいました。ありがとうございます！

このブログでの設定も一応書いておきます。

ソース

; html-script: false ]
&lt;div class=&quot;appHtmlFrame&quot;&gt;
&lt;span class=&quot;appIcon&quot;&gt;
&lt;a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;img src=&quot;${icon100url}&quot; width=&quot;100&quot; height=&quot;100&quot; class=&quot;appIconImg&quot; style=&quot;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;&quot; alt=&quot;${appname}&quot;&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;span class=&quot;appTitle&quot;&gt;
&lt;a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt; ${appname}&lt;/a&gt;&lt;/span&gt;&lt;br&gt; 
&lt;span class=&quot;appPrice&quot;&gt;価格: ${price} (記事公開時)&lt;/span&gt;&lt;br&gt; 
&lt;span class=&quot;appCat&quot;&gt;カテゴリ: ${category}&lt;/span&gt;&lt;br&gt; 
&lt;span class=&quot;appLink&quot;&gt;&lt;a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;App Storeで詳細を見る&lt;/a&gt;&lt;/span&gt;&lt;br style=&quot;clear: both;&quot;&gt;
&lt;div class=&quot;appDownloadButton&quot;&gt;
&lt;a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;img src=&quot;https://delightmode.com/www3/wp-content/uploads/appDownloadButton.gif&quot; width=&quot;280&quot; height=&quot;50&quot; alt=&quot;アプリをダウンロードする&quot; /&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

; html-script: false ]

</span>

<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 style="clear: both;">

</div>

「アプリをダウンロードする」画像はそのままのサイズだと大きいので、半分で指定してます。

このソースを利用される場合は、改行を削除してください。残ったままだとAppHtmlが動きません。それから、この画像は使ってもらってかまいませんが、直リンクはご遠慮くださいね。

CSS

; html-script: false ]
.appHtmlFrame {
    border: 1px dashed #AAAAAA;
    padding: 18px 0 1px 10px;
    margin-bottom: 10px;
}

.appDownloadButton{
    clear:both;
    text-align:center;
    margin:6px auto;
}

.appDownloadButton a{
        transition: 0.6s ease-out;
-webkit-transition: 0.6s ease-out; /* chrome, safari */
   -moz-transition: 0.6s ease-out; /* firefox */
    -ms-transition: 0.6s ease-out; /* ie */
     -o-transition: 0.6s ease-out; /* opera */
}
.appDownloadButton a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}