App DownLoad Button
最近Blogのカスタム熱が再燃しています。
以前エントリーした様にモブログ環境も少しずつ充実し、Blogを書く事が楽しい楽しい！
この楽しいという気持ちが長持ちすればいいのですがw
さて、またここらで少しカスタマイズしてみました。
自分のための備忘録的エントリーです。
Appのダウンロードボタンを設置
最近、好んで読んでいるBlogの方々で流行っている、アプリケーション紹介の際に「ダウンロードボタン」を設置してみる事にしました。
流行っているというのが大きな理由ではあるのですが、大きめのボタンを設置した方が、読んで頂ける方にとってもよろしいかなーと、ブロガーなりの優しさを表してみた訳です。
設置方法
といっても、なんら難しい事はありません。
私はこちらのサイトを参考にしました。
アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania
HTMLとCSSは、上記サイトを参考に、自分のBlogスタイルに合う様、記述に少し変更を加えています。
2013.01.21追記
上述のサイトに記載してあるCSSの記述のボタン自体のセンタリングを解除。
マウスを乗せたときの挙動はtransitionでじわっとフィルターかけました。
以下CSSです。
.appDownloadButton{
clear:both;
text-align:left;
margin:0 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;
}
しかし、InternetExplorerではうまく表示出来ず。
この際IEでの表示は「見れればOK」くらいに考えておきます。
今までもそうだったしね。
ボタンの作成
ダウンロードボタンはこんな感じで当Blogに合わせてデザインしました。
ここで肝というかこだわったのは、iOSデバイスやMacBook Proの一部モデルに搭載されてあるRetinaディスプレイで閲覧した際にも、見るに耐え得るボタンをという点。
これもやり方としては非常に簡単で、表示したいサイズの2倍のサイズでボタン画像を作成すればよろし。
例えば当Blogでは横300px , 縦75pxでボタンを表示させたいため、実際の画像は横600px , 縦150pxで作成しています。
これをimgタグにてサイズ指定しておけばOKです。
表示してみる
では実際に表示してみます。
(ここではFacebookのAppを例としています)
こんな感じに表示されます。
なかなかいい感じになったと思うのは私だけですかねぇ？
一応モバイルからのUIにも対応していると思うのですが、はみ出していたりしたら教えてもらえるとありがたいです。
まとめ
当BlogはApple関係のエントリーは少なめですし、Appの紹介も多いとは言えません。
しかしながら、大きめのボタンを設置する事はユーザビリティの向上として、ちょっとはいい事してる様に思います。
しばらくはこれで運用してみますので、皆様もダウンロードボタンを設置してみてはいかがでしょうか？
