アプリを紹介するためのブログパーツ『アプリーチ』ってご存知ですか?
これを使うと、iPhone用とAndroid用を合わせて紹介することができてとっても便利!
使い方も簡単なので、ブログでアプリを紹介する際はぜひ利用してみてください(*´ω`*)
アプリーチって?
アプリーチはままはっくのまなしばさんの旦那さまが作ったサービスです。
⇒アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。
サイトにアクセスして、アプリ名を検索すると、コードが表示されます。
それをブログに貼り付けるだけで、簡単にアプリが紹介できてしまいます。
iTunesアフィリエイトのコードを入れることもできます。
(※現在ではiTunesアフィリエイトでアプリは対象外になっているようです)
アプリーチのカスタマイズ
アプリーチをそのまま貼り付けると、枠も何もないシンプルな状態です。
これに枠をつけるカスタマイズをしてみました。
カスタマイズ後がコチラ!
破線で囲って、タイトルを強調。余白の調整を行いました。
コードを作る際、こちらの記事を参考にさせていただきましたm(_ _)m
⇒スマホアプリ紹介ツール「アプリーチ」の使い方とCSSデザイン
旧コード版
コードはコチラ↓
/* アプリーチ(ver.1.1) */
#appreach-box {
border: 1px dashed #BDBDBD;
max-width: 500px;
}
#appreach-appname {
font-weight: bold;
}
.appreach-links{
margin-top: 10px;
}
.appreach-footer{
margin-bottom: 0;
line-height: 0;
}
*2017.3.23修正 ver.1.1
幅600px以上でデザインが崩れてしまったので、max-width :500px; を追加。
新コード版
/* アプリーチ(ver.2.0) */ .appreach { text-align: left; padding: 10px; border: 1px dashed #BDBDBD; max-width: 640px; overflow: hidden; } .appreach:after { content: ""; display: block; clear: both; } .appreach p { margin: 0; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important; } .appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%; } .appreach__detail:after { content: ""; display: block; clear: both; } .appreach__name { font-size: 16px; line-height: 1.5em !important; max-height: 3em; overflow: hidden; } .appreach__info { font-size: 12px !important; } .appreach__developper, .appreach__price { margin-right: 0.5em; } .appreach__posted a { margin-left: 0.5em; } .appreach__links { float: left; height: 40px; margin-top: 8px; white-space: nowrap; } .appreach__aslink img { margin-right: 10px; height: 40px; width: 135px; } .appreach__gplink img { height: 40px; width: 134.5px; } .appreach__star { position: relative; font-size: 14px !important; height: 1.5em; width: 5em; } .appreach__star__base { position: absolute; color: #737373; } .appreach__star__evaluate { position: absolute; color: #ffc107; overflow: hidden; white-space: nowrap; }
これをCSSにコピペしてください。
はてなブログで表示確認していますが、他のブログでも使えると思います。
はてなブログでの設定
レスポンシブデザインの方は、デザイン>カスタマイズ>デザインCSSに入れれば、自動的にサイズも変更されるはずです。
スマホが別表示の場合はデザイン>スマートフォン>ヘッダ>タイトル下にスマートフォン用にHTMLを設定するにチェックしてコード記述欄に下記のコードを入れて、アプリーチのCSSを入れます。
<style type="text/css">
CSSはここに入れてね
</style>
このコードを囲うとCSSとして認識してくれます。
すでに記述されている場合はその中にアプリーチのコードを追加してください。
新コード版はレスポンシブデザインでご利用ください。
実際のカスタマイズ後のアプリーチ
旧コード版
新コード版
Minecraft
Mojang¥900posted withアプリーチ
新コードも旧コードと同じデザインにできました!
線や背景など、自分好みにカスタマイズしてみてもいいかもしれませんね(*´ω`*)
アプリーチカスタマイズまとめ
アプリーチは便利だと感じていましたが、旧コードはデフォルトで枠もありませんでした。
新コードが公開され、そちらも同じデザインに対応させました。
アプリーチは便利なので、今後もどんどん使っていきたいと思います!
何かお気づきの点などありましたら、コメント欄、Twitterからご連絡ください。
あ、このデザインに合わせてカエレバ・ヨメレバのデザインも変更しました。
公開しているコードの枠線も変更しましたので、こちらもよろしくお願いします!
happylife-tsubuyaki.hatenablog.com