イロイロひとりごと。

ブログのこと、普段の生活のことをつぶやいています

スポンサーリンク

アプリ紹介ブログパーツ『アプリーチ』をCSSでカスタマイズ

アプリを紹介するためのブログパーツ『アプリーチ』ってご存知ですか?

これを使うと、iPhone用とAndroid用を合わせて紹介することができてとっても便利!

使い方も簡単なので、ブログでアプリを紹介する際はぜひ利用してみてください(*´ω`*)

 

アプリーチって?

f:id:setuyakuhappylife:20170315135340p:plain

アプリーチはままはっくのまなしばさんの旦那さまが作ったサービスです。

 

アプリーチ

サイトにアクセスして、アプリ名を検索すると、コードが表示されます。

それをブログに貼り付けるだけで、簡単にアプリが紹介できてしまいます。

追加機能ボタンを押せば、iTunesアフィリエイトのコードを入れることもできます。

 

アプリーチのカスタマイズ

 

f:id:setuyakuhappylife:20170316092322p:plain

アプリーチをそのまま貼り付けると、枠も何もないシンプルな状態です。

 

これに枠をつけるカスタマイズをしてみました。

カスタマイズ後がコチラ!

f:id:setuyakuhappylife:20170316092432p:plain

破線で囲って、タイトルを強調。余白の調整を行いました。

コードを作る際、こちらの記事を参考にさせていただきました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;
}

これをCSSにコピペしてください。

はてなブログで表示確認していますが、他のブログでも使えると思います。

 

 *2017.3.23修正 ver.1.1

幅600px以上でデザインが崩れてしまったので、max-width :500px; を追加。

 

はてなブログでの設定

レスポンシブデザインの方は、デザイン>カスタマイズ>デザインCSSに入れれば、自動的にサイズも変更されるはずです。

 

スマホが別表示の場合はデザイン>スマートフォン>ヘッダ>タイトル下にスマートフォン用にHTMLを設定するにチェックしてコード記述欄に下記のコードを入れて、アプリーチのCSSを入れます。

<style type="text/css">

CSSはここに入れてね

</style>

このコードを囲うとCSSとして認識してくれます。

すでに記述されている場合はその中にアプリーチのコードを追加してください。

 

実際のカスタマイズ後のアプリーチ

 

Minecraft: Pocket Edition
Minecraft: Pocket Edition
開発元:Mojang
¥840
posted with アプリーチ

 

シンプルにして、どんなブログにも合いやすいデザインにしました。

コード自体は簡単なので、線や背景など、自分好みにカスタマイズしてみてもいいかもしれませんね(*´ω`*)

 

まとめ

アプリーチは便利だと感じていましたが、デフォルトで枠もありませんでした。

カスタマイズしたので、今後はどんどん使っていきたいと思います!

 

 iTunesアプリのアフィリエイトはPHGで行えますが、売れたかの確認はiReportLiteが便利です。

iReport Lite - iTunesアフィリエイト
iReport Lite - iTunesアフィリエイト
開発元:nstation
無料
posted with アプリーチ

 

何かお気づきの点などありましたら、コメント欄、Twitterからご連絡ください。

 

あ、このデザインに合わせてカエレバ・ヨメレバのデザインも変更しました。

公開しているコードの枠線も変更しましたので、こちらもよろしくお願いします!

 

happylife-tsubuyaki.hatenablog.com

 

©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。