こんにちは、色々と試行錯誤中のmarubon（@photopota）です。
Twitterを見ているとブロガーの間でAppHTMLのカスタマイズとダウンロードボタンの追加が流行っていたので、私も挑戦してみました。カスタマイズ結果について紹介したいと思います。
AppHTMLカスタマイズの火付け役
話の発端は、delaymania（@delaymania）さんの以下のブログです。カスタマイズ方法は、ご本人がブログで紹介してくれているので、参考にするのがよいと思います。かなり詳しく解説してくれています。
アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania |
AppHTMLのカスタマイズ（試行錯誤ライフハック版）
ここからが本題です。カスタマイズした結果について紹介します。
カスタマイズ内容
delaymania（@delaymania）さんが提供してくれているAppHTMLのコードをベースにカスタマイズしました。ベースのコードからの変更点は以下の通りです。
- 画像を中から小サイズに変更（アイコンURLを${icon100url}から${icon75url}に変更、widthとheightの修正）
- ダウンロードボタン（App Storeへのリンク）を自作版に変更
- 「App Storeで詳細を見る」（文字列）とダウンロードボタン間の改行（<br>）の調整
自作したダウンロードボタン
以下が自作したダウンロードボタンです。サイトの独自性を出すためにブログのロゴをベースに作成しました。サイトのベースカラーがグレーなので、あえて白黒系にしてあります。尚、iphoneを縦でみた場合の横幅が320pxなので、横幅は若干余裕を見て300pxに調整しています。
このボタンは、Power Point 2010とGIMPを使用して作成しています。対象が異なりますが、適用方法は同じなので、作成方法に興味がある方は以下エントリを参照して下さい。
 | 試行錯誤ライフハック: [試] アイコンを変更してみた（一部自作） | dak Charatore, GIMP, Microsoft Power Pointの連携 |
AppHTML（カスタマイズ版）を使用したリンク
カスタマイズしたAppHTMLを使用して出力したリンクです。CSSを使用した見た目の修正は行っておらず素の状態です。
まとめ
AppHTMLのカスタマイズ結果と自作したダウンロードボタンを紹介しました。
後書き
AppHTMLなしではますますブログが書けなくなりそうなmarubon（@photopota）でした。
RSS購読
最後まで読んで頂き、ありがとうございます。
もし気に入って頂けたら、購読をお願いいたします！
0 件のコメント:
コメントを投稿