[試] 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 Evernote
価格: 無料
カテゴリ: 仕事効率化, ユーティリティ
App Storeで詳細を見る 

アプリをApp Storeでチェックする

 

 

まとめ

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

後書き

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