アプリーチの使い方の説明とコピペで使えるCSSデザインを用意しました

STEP1: アプリの検索

まずは上の画像のように、入力ボックスに検索したいアプリ名を入力して検索ボタンをクリックする。
すると最も適合したアプリのデータが表示される。ここでは「白猫」と入力したら白猫プロジェクトが表示されている。

STEP2: データのカスタマイズ

このSTEP2はアフィリエイトリンクに差し替えたり、データのカスタマイズをしなくても良いという場合は飛ばしても良い。

カスタマイズをしたい場合は、まずは「追加機能」というボタンをクリックしよう。

すると上の画像のように様々なメニューが表示される。
それぞれどのようなものかは以下の通り。

• 開発元あり / なし…ボックスに開発元を表示するかどうか。ただしなしにするとデザインが崩れる
• 価格あり / なし…有料アプリの場合のみ価格と表示するかどうか。
• タイトル…アプリのタイトルに何に準拠するかどうか。基本的にデフォルトで良い。
• 画像…App StoreかGoogle Playどちらの画像に準拠するかどうか。

STEP3: HTMLをコピーしてブログに貼る

生成されているHTMLタグをコピーして、それをブログやウェブサイトに貼れば終了だ。

はてなブログだとなぜ崩れるのか

はてなブログの「はてな記法」で書いていて、HTMLタグをそのまま挿入すると勝手に「brタグ」(=改行)が仕込まれてしまって、デザインがおかしくなってしまう。

そのため次に紹介するCSSではアプリーチ内のbrタグのみ無効にしている。

ベーシックパターン

ボーダーや軽いシャドーで枠を作って、アプリ名を強調、その他の属性を控えめに表示。
全体的に余白も大きめにとっているので、ほとんどのブログで違和感なく表示できるように調整した。

CSSは以下の通り。

#appreach-box {
max-width: 500px;
border: 1px solid #ddd;
background: #fff;
padding: 4px 6px;
border-radius: 4px;
line-height: 1.4;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06);
}
#appreach-box br {
display: none;
}
#appreach-image {
margin-right: 15px !important;
margin-bottom: 0 !important;
}
#appreach-appname {
color: #3a3a3a;
font-size: 1.35em;
font-weight: bold;
}
#appreach-developer, #appreach-price, .appreach-powered {
color: #888;
font-size: 11px !important;
}
#appreach-box .appreach-links {
margin-top: 10px;
}
#appreach-itunes-link {
margin-right: 10px;
}
#appreach-box .appreach-links img:hover {
opacity: 0.8;
}

ブラックスタイル

黒い。黒こそが正義。
そんな中二病精神をくすぐるデザインになっている。

CSSは以下の通り。

#appreach-box {
max-width: 500px;
color: #fff;
background: #4a4a4a;
padding: 4px 6px;
line-height: 1.4;
border-radius: 4px;
}
#appreach-box a {
color: #fff;
}
#appreach-box br {
display: none;
}
#appreach-image {
margin-right: 15px !important;
margin-bottom: 0 !important;
}
#appreach-appname {
font-size: 1.35em;
font-weight: bold;
}
#appreach-developer, #appreach-price, .appreach-powered {
color: #bbb;
font-size: 11px !important;
}
#appreach-box .appreach-links {
margin-top: 10px;
}
#appreach-itunes-link {
margin-right: 10px;
}
#appreach-box .appreach-links img:hover {
opacity: 0.8;
}

サンプルはこちら

実際にブラウザでどんな感じになっているか確かめたい人のためにサンプルを用意している。

• アプリーチデザインのサンプル