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

更新日：2015/05/03

@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;
}

; 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を生成する」をクリック。登録したら出来上がり。

AppHtmlメーカー

まとめ

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

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

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

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

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

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

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

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

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

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

ピックアップ記事

1: 機種変更時に最適なiPhoneバックアップ方法！ iTunesの暗号化バックアップから復元すればデータ移行が楽にできます
機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

2: iPhone・iPadのAirDropでデータの受け渡しが便利！写真・動画・PDFなどのコンテンツを送受信する方法と注意点
iPhone・iPadなどApple製品同士で使えるAirDropはデータの受け渡しにとても便利な機能です。写真・動画・PDFなどのコンテンツを送受信する方法と利用する際の注意点も合わせてご紹介します。

3: 最大60WのUSB-C PD充電器「AUKEY 72W ACアダプター PA-Y12」レビュー！追加のUSB-Aポート2つ、合計3ポートのパワフル充電で大活躍
AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD（Power Delivery）対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

4: ポータブルハードディスク「WD Elements」レビュー！外部電源不要、気軽に大容量HDDが持ち運びできる！
パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5: LGウルトラワイドモニター「29UM69G-B」の口コミレビュー。12インチMacbookもMacbook Air 11インチも大画面で超快適な作業環境を実現できた！
快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね！商品の特徴や使ってみた感想をご紹介します。

-WordPressカスタマイズ
-iPhone, ブログ, ブログ運営

: WordPressカスタマイズ
【WordPress】ソースコードの紹介に便利なプラグイン「Crayon Syntax Highlighter」を導入！コードを見やすくハイライト表示してくれる！
@Mori2ndです。このブログでもHTMLやObjective-Cなどのソースコードを紹介していこうと考えているので、 ...

: WordPressカスタマイズ
[WordPress]zenbackの設置にはちょっとしたコツがあった
こんにちは、モリ（@Mori2nd）です。いつもよく見ているブログで、投稿ページの最後にその記事に関連する記事やTwi ...

: Webサービス WordPressカスタマイズ
「Google+ページ」を作成！その方法と関連付けなど最初に行っておきたい3つの設定も紹介します
「Google+ページ」も新たにスタートさせてみることにした。作成方法のほかに、最初にやっておいたほうが良さそうな設定もあったので、合わせてシェアしたいと思う。これから作成しようと思っている方の参考になればうれしい。

: WordPressカスタマイズ
WordPressでカテゴリーを好きな順番に並び替える方法「Category Order and Taxonomy Terms Order」
カテゴリーが増えてくると一覧などに表示される順番を変更したくなってくるんですが、WordPressの標準機能では出来ないんですよね。優先順位が高いカテゴリーを上の方にもっていきたいのです。そんなわけで方法を探していたら、ドラッグ＆ドロップの簡単操作でカテゴリーの並び替えができるプラグインがありました。