イロイロひとりごと。

ブログのこと 日々のことをつぶやいています

『アプリーチ』CSSをコピペでカスタマイズ〈はてなブログ〉

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

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

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

 

 

アプリーチって?

f:id:setuyakuhappylife:20200118104837j:plain


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

 

アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

 

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

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

iTunesアフィリエイトのコードを入れることもできます。

(※現在では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;
}

 *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
Minecraft
開発元:Mojang
¥840
posted withアプリーチ

 

新コード版

Minecraft

Minecraft

Mojang¥900posted withアプリーチ

 

新コードも旧コードと同じデザインにできました!

線や背景など、自分好みにカスタマイズしてみてもいいかもしれませんね(*´ω`*)

 

アプリーチカスタマイズまとめ

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

新コードが公開され、そちらも同じデザインに対応させました。

アプリーチは便利なので、今後もどんどん使っていきたいと思います!

 

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

 

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

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

 

happylife-tsubuyaki.hatenablog.com

 

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