Tutorial on How to Add Versatile Button Shortcodes on Your WordPress Theme / webtreats
どうも、リブラブです。
最近、ブロガーさんの記事でよく見かける、iPhoneアプリの大きなダウンロードボタン。
こういうやつです。
ボタンがデカくて、分かりやすくて良いデスね(^^)。
実際、私もつい最近、iPhone初心者の方から、
ダウンロードはどこを押すんですか??
と聞かれることもあったので、ボタンを大きくする事は、良いことです。
と、いう事で良い物は積極的に取り入れたいので、私も作ってみる事に…。
作り方は@delaymaniaさんの記事を参考にさせていただきました。
本当、ありがたいです!
アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania
記事内で、コードを公表してくれているので、コピペで使う事が出来ます。
私は、こちらの記事に書かれているコードを、ほぼそのまま使わさせてもらっているのですが、ボタンぐらいは自作したいですよね。
といっても、デザイン出来るわけでもないので、何処かのサイトに頼っちゃうことにしますw。
ボタンを自作出来るサイトは、@tato3104さんが記事にされていましたので、参考にさせてもらいました。
[iPhone]アプリのダウンロードボタンをつけてみた! | Macと過ごす日々ver.WP
そんなこんなで、色々なブロガーさんの記事に助けられながら、完成したボタンがこちら⬇
この後、画像を少し再調整したり、コントラスト等の色調整を行い、冒頭の『するぷろ』アプリのリンクボタンを作りました。
ボタンを作っている時、私だけかも知れないですけどボタン画像が荒くて、何度も作り直しました。
画像の荒さが確認出来るのは、iPhone表示の時だけ…..。
Retinaディスプレイは解像度が高い為に、解像度が低いと画素が荒いものは分かってしまうんでしょうかね?
どうなんだろう….。
どうしても綺麗に表示させたかったので、私は、解像度を2倍(150×600)にして作り、記事にする際に、AppHTML経由で解像度を75×300にして貼付けています。
この方法で作ると、他のデバイスでは違いがわからないのですが、iPhoneの時だけシャープに見えます。
ちょっと違うかもしれないですが、DTPの世界では、印刷物にする画像の解像度は、出力に合わせて通常2倍にするのですが、同じようにすれば良いような。
どうして2倍にする必要があるのかというと、データを印刷する場合、そのままの解像度だと、ジャギー(画像のがたつき)が見えることがあるんです。
よくわかりませんが、ボタンが荒く見えてしまうのは、それと理由は一緒かなぁ〜と。
iPhoneでご覧の方は、上の完成ボタンを拡大表示して文字を見ると、その違いが分かると思います。
ということで、
iPhoneで観たときに、ボタンがシャープに表示されないと感じる方は、
画像の解像度を上げて作ってみる事をオススメします。
もしかしたら、良くなるかもですw。
ちょっと時間がかかってしまいましたが、まぁ、結果的に綺麗に出来たので、暫く、これでアプリ紹介したいと思います。
では、また。
Posted from するぷろ for iPhone.
リブラブ
最新記事 by リブラブ (全て見る)
- ダイソーのiPhone用全面保護ガラスフィルム買ってみた - 2019年2月16日
- iPhone7に久々の機種変更 - 2019年2月5日
- YouTube始めてみました! - 2018年4月29日
LEAVE A REPLY