正月はまとめてやりたかったことをやってます。あかめ（@mk_mizuho）です。時間がなくて後回しにしてたアプリダウンロードボタンの修正。iPhoneで見たらRetina対応させてなくてボケてるし、適当に作ったからサイズ微妙だったので直しました。どうかなぁ。

ボタン設置のきっかけ

きっかけは大ちゃん（@delaymania）のこの記事。

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

どうやら大ちゃんのお友達がブログの記事内のアプリのリンク表示を見てもアプリをどこから落とすかわからなかったらしい。画像やテキストにリンクが付いているので誰でもダウンロードできると思い込んでいた。

「どこを押せばいいの？」

この一言は衝撃だ。

ボタンを設置

わかりやすいようにボタンを設置した。

最初に作ったボタンがこちら。

サイズも小さく、何よりも画像ではわかりづらいかもしれないですが画質が悪い。Retina対応で作るのを忘れた。

Retina対応で作り直した。

これを友達に見せたらデカっ！と人蹴りされた。

気持ち小さめのボタンを再び作った。

ボタンのサイズは好みがあるとは思うけど、暫くはこのサイズでいくことにした。

出来たボタンはこんな感じ。

CSS3で最初はボタン作ってた

実は最初は画像ではなく、スタイルシートで作ってた。でも、大ちゃんとの話の中でRSSだとスタイルシートで作ったボタンが表示されなくなるという話に。

せっかく作ったボタンを諦めた。

マウスをのせるとボタンの色が変わり、ボタンが拡大する仕様。（スマホでは動きはなし）

ソース

<div class="btnAppDownload">こんなボタンを作った</div>

スタイルシート

.btnAppDownload {
	background: #4d9dee;
	border: 2px solid #eee;
	height: 24px;
	width: 160px;
	padding:10px ;
	margin:0 0 20px;
	display: block;
	text-align:center;
	clear:both;
	color:#fff;
	text-decoration:none;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;	
	transition: All 0.5s ease-out,background-color 1s linear;
	-webkit-transition: All 0.5s ease-out,background-color 1s linear;
	-moz-transition: All 0.5s ease-out,background-color 1s linear;
	-o-transition: All 0.5s ease-out,background-color 1s linear;
	-ms-transition: All 0.5s ease-out,background-color 1s linear;	
	background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

.btnAppDownload:hover {
	padding: 10px 20px;
	background-color: #4fcef2;
	cursor:pointer;
}

もう少し綺麗に書けるかもなぁ。汚いソースでごめんなさい。

Retina対応用のボタン

Retina対応用のボタンを設置したい時は実際に使用したい画像のサイズの2倍の画像を使用する。

例えば実際は横260px 縦50pxで表示させたい時。Retina対応をさせたい時は520px 100pxで画像を作る。imgタグでサイズを指定。

AppHtmlで使用するボタンのソース

以下は横260px 縦50pxで画像を表示させたい時の例。

<div class="hoge">
    <a href="${linkshareurl}" target="_blank" rel="nofollow">
        <img src="画像パス"  height="260" width="50">
    </a>
</div>

*実際にAppHtmlで使用する方は改行やインデントなどを削除してご利用ください。スクリプトが動きません。

まとめ

どこを押したらいいの？←1人思う人がいるならば同じ考えの人は他にもたくさんいる。そんな気がする。設置して困ることでもないと思うので、設置した。これでまたブログが使いやすくなったら嬉しいな。気になった方はぜひお試しください。ではではーあかめ（@mk_mizuho）をよろしくお願いします。

Posted from するぷろ for iPhone.

＼ この情報を周りの人にも教える ／