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

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

AppHtmlメーカー

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

スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

後はデフォルトのまま。

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

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

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

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

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

ソース

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

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

CSS

CSSで配置やマウスオーバー時の動きを指定してます。あと枠線を追加したりしてますよ。

最後にソース部分をAppHTMLメーカーに貼付けて、「Bookmarkletを生成する」をクリック。登録したら出来上がり。

AppHtmlメーカー

まとめ

どこからダウンロードできるのか?案外見落としがちだけど、こういうわかりやすさって大事だと思います。

ここでご紹介したように、ちょっとした手間をかけるだけで出来る事ならどんどん取り入れていきたいですね。

最後に参考にさせていただきた記事をまとめておきます。

▼ボタン画像の作り方がわかりやすくのってます。

【 ブログ 】「 アプリをダウンロードする 」ボタンを ButtomMaker で作成、AppHTMLをカスタマイズしました! | Halfway

▼Retina対応はこちらで知りました。

[Å] AppHtmlのアプリダウンロードをRetina対応用に作り直した! | あかめ女子のwebメモ

▼AppHTMLのカスタマイズ方法全般とても参考になりました。

アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania

アプリを紹介するブックマークレット「AppHTML」をカスタマイズしました | delaymania

スポンサードリンク