• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/12/26

アプリ紹介の記事に、ダウンロードするための「App Storeへ行く」ボタンをCSS3で作ってみた

Skitched 20121226 195252
delaymania@delaymania さんが実装して以来、いろんな方がブログに設置しだした「アプリをダウンロードする」ためのボタン。
普段ブログでiPhone、Macアプリを紹介する際には整形したリンクを貼って分かりやすくしていたつもりだったのですが、もっと分かりやすくするために私も同じようなボタンを設置してみることにしました。

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


アプリをダウンロードするボタンを設置することにした理由
先日友人が僕の目の前で僕のブログを見ながらアプリを購入するということがありました。
そのときに「どこを押せばいいの?」って言われたのが衝撃だったんですよね。分かりやすいように作ったつもりだったんですが分かる人にしか分からない形になっていたとは。

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

なんか↑の文章を読んだ時に感じさせられたんですよねビクンビクン。1人でも「わからない」っていう人がいるということは1000人2000人分からない人がいる可能性もあるわけです。

実装してみた

私はアプリ紹介のリンクをヒトリブログさんの作成されたAppStoreHelperにて行っているので、そちらの設定を変更。

価格: 無料 (記事公開時)
カテゴリ: 仕事効率化



こんなタグが吐き出される形にしてみました。
ボタンはWebフォント「Google web fonts」を利用して、CSS3で装飾してあります。IE7、8を使用している人はiPhoneなんか使ってないという独断と偏見によるものです。

ま、と言うのは冗談で少しでも軽量化したかったのと、Retinaディスプレイでもキレイに見えるようにと言う配慮です。惜しむらくはRSSリーダーで読んだ時におそらく形が崩れるということ…多分。

CSS

CSSはこんな感じ。

.app_download a{
    display: block;
    width: 300px;
    margin: 20px auto;
    font-size: 18px;
    padding: 5px;
    font-family: 'Coda', cursive;
    color: #FFF !important;
    text-decoration: none !important;
    text-align: center;
    background-color: #2EC0FE;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:inset 0px 0px 5px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0px 0px 5px rgba(0,0,0,1);
    box-shadow:inset 0px 0px 5px rgba(0,0,0,1);
    background-image: -o-linear-gradient(90deg , rgb(40,75,167) 0%, rgb(55,135,254) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(40,75,167) 0%, rgb(55,135,254) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(40,75,167) 0%, rgb(55,135,254) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(40,75,167) 0%, rgb(55,135,254) 100%);
    background-image: linear-gradient(90deg , rgb(40,75,167) 0%, rgb(55,135,254) 100%);
}

一応、App Storeを意識した色合いになっております。おんなじ様にボタンをCSSで作ってみたい!と言う方は超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめをご参考までにどうぞ。

そんなわけでブログの体質改善のためのtipsでした。

関連:[Mac][app]CSS3スタイルを作ろう!ジェネレータアプリ「CSS3 Toolkit」が直感的で使いやすい!

価格: ¥250 (記事公開時)
カテゴリ: グラフィック&デザイン

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×