[試] AppHTMLのカスタマイズ | オリジナルダウンロードボタンの作成

こんにちは、色々と試行錯誤中のmarubon（@marubon_jp）です。

Twitterを見ているとブロガーの間でAppHTMLのカスタマイズとダウンロードボタンの追加が流行っていたので、私も挑戦してみました。カスタマイズ結果について紹介したいと思います。

AppHTMLカスタマイズの火付け役

話の発端は、delaymania（@delaymania）さんの以下のブログです。カスタマイズ方法は、ご本人がブログで紹介してくれているので、参考にするのがよいと思います。かなり詳しく解説してくれています。

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

AppHTMLのカスタマイズ（試行錯誤ライフハック版）

ここからが本題です。カスタマイズした結果について紹介します。

カスタマイズ内容

delaymania（@delaymania）さんが提供してくれているAppHTMLのコードをベースにカスタマイズしました。ベースのコードからの変更点は以下の通りです。

• 画像を中から小サイズに変更（アイコンURLを${icon100url}から${icon75url}に変更、widthとheightの修正）
• ダウンロードボタン（App Storeへのリンク）を自作版に変更
• 「App Storeで詳細を見る」（文字列）とダウンロードボタン間の改行（
  ）の調整

自作したダウンロードボタン

以下が自作したダウンロードボタンです。サイトの独自性を出すためにブログのロゴをベースに作成しました。サイトのベースカラーがグレーなので、あえて白黒系にしてあります。尚、iphoneを縦でみた場合の横幅が320pxなので、横幅は若干余裕を見て300pxに調整しています。

このボタンは、Power Point 2010とGIMPを使用して作成しています。対象が異なりますが、適用方法は同じなので、作成方法に興味がある方は以下エントリを参照して下さい。

試行錯誤ライフハック: [試] アイコンを変更してみた（一部自作） | dak Charatore, GIMP, Microsoft Power Pointの連携

AppHTML（カスタマイズ版）を使用したリンク

カスタマイズしたAppHTMLを使用して出力したリンクです。CSSを使用した見た目の修正は行っておらず素の状態です。

Evernote
価格: 無料
カテゴリ: 仕事効率化, ユーティリティ
App Storeで詳細を見る 

 

まとめ

AppHTMLのカスタマイズ結果と自作したダウンロードボタンを紹介しました。

後書き

AppHTMLなしではますますブログが書けなくなりそうなmarubon（@marubon_jp）でした。