@Mori2ndです。iPhoneアプリの紹介時に簡単に画像付きリンクを作成できるAppHtml。
こちらをカスタマイズして「アプリをダウンロードする」ボタンを追加しているサイトが増えてきたので、このブログでもカスタマイズして取り入れてみました。
AppHtmlをカスタマイズしてこうなりました！
これでどこからダウンロードできるかわかりやすくなりました！
作成手順もご紹介します！
「アプリをダウンロードする」ボタンを画像で作成
ボタンは画像で作成してみました。@Gaku0318さんのブログを参考にして『 ButtomMaker 』を利用。
ボタン素材 自動生成サイト - ButtonMakerアフラット
試してみたら、すごく簡単に作成できるんですんね。これは便利だ。
ちなみに画像サイズはRetina対応を意識して大きくしてみました。
設定内容はこんな感じです。
- 画像サイズは縦：100px、横：560px
- 背景色：#003399
- テキスト１のフォント：HGRSGU、カラー：#FFFFFF、サイズ：40point、位置：中央
- 丸い角の位置：すべてチェック、半径：10ピクセル
- クリア調：2番
後はデフォルトのまま。
「create」を実行すると画像が出来上がるんで、画像を右クリックでダウンロードするなりして保存。
最後にブログのサーバーにアップロードしたら画像はOK。
AppHtmlをカスタマイズして作成したボタンを追加
@delaymaniaさんのところで紹介されていた内容をコピペして、少しアレンジさせてもらいました。ありがとうございます！
このブログでの設定も一応書いておきます。
ソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ; html-script: false ] <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 style="clear: both;"> <div class="appDownloadButton"> <a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="https://delightmode.com/www3/wp-content/uploads/appDownloadButton.gif" width="280" height="50" alt="アプリをダウンロードする" /></a> </div> </div> |
「アプリをダウンロードする」画像はそのままのサイズだと大きいので、半分で指定してます。
このソースを利用される場合は、改行を削除してください。残ったままだとAppHtmlが動きません。それから、この画像は使ってもらってかまいませんが、直リンクはご遠慮くださいね。
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 | ; 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; } |
CSSで配置やマウスオーバー時の動きを指定してます。あと枠線を追加したりしてますよ。
最後にソース部分をAppHTMLメーカーに貼付けて、「Bookmarkletを生成する」をクリック。登録したら出来上がり。
まとめ
どこからダウンロードできるのか？案外見落としがちだけど、こういうわかりやすさって大事だと思います。
ここでご紹介したように、ちょっとした手間をかけるだけで出来る事ならどんどん取り入れていきたいですね。
最後に参考にさせていただきた記事をまとめておきます。
▼ボタン画像の作り方がわかりやすくのってます。
【 ブログ 】「 アプリをダウンロードする 」ボタンを ButtomMaker で作成、AppHTMLをカスタマイズしました！ | Halfway
▼Retina対応はこちらで知りました。
[Å] AppHtmlのアプリダウンロードをRetina対応用に作り直した！ | あかめ女子のwebメモ
▼AppHTMLのカスタマイズ方法全般とても参考になりました。
