WordPressカスタマイズ

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

スポンサードリンク

ピックアップ記事

1

iPhoneで格安SIMを使って月額料金を節約したい!でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

2

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

3

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

4

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

5

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

-WordPressカスタマイズ
-, ,

Copyright© ディライトモード , 2019 All Rights Reserved.