ブログで本紹介する表示方法のおすすめ【ヨメレバ使用】

f:id:media-gatch:20180925150538j:plain

どうもー・ω・ガッチ(@MediaGatch)です。

おすすめの本を紹介したいけれど、、、どうしたら良いんだろう?

うまく表示させたいんだけれど、、、htmlとかcssってよくわからないし。

そんな人でも、簡単にコピペで設定できる方法を紹介します。

ぜひおためしあれ

この流れで試して下さい。

ブログに本の紹介をきれいに表示させる方法

  • ヨメレバのサイトを表示
  • ヨメレバに必要な情報を登録
  • もしもアフィリエイトに登録していない方は登録
  • オススメしたい本を検索
  • ヨメレバ用のカスタマイズCSS

ヨメレバのサイトを表示

ヨメレバは、無料で使用できるブログパーツ製作サービスです。

amazonで販売されている本を指定することで、紹介用のhtmlを自動で制作してくれます。

kindle楽天ブックスなどにも対応。

使用すると、こんな表示が可能です。

cssは独自カスタマイズのため、下のコードをコピペしてください。

【ヨメレバ】

https://yomereba.com/

ヨメレバに必要な情報を登録

必要となる情報は、以下のいずれかです。

IDの探し方は、ヨメレバのサイト下で説明してくれてます。

それでもわからない場合は、ガッチ(@MediaGatch)まで連絡いただいても大丈夫です。

バリューコマースに登録していない方は

バリューコマースは、アフリィエイトサービスの登録サイトです。

そのあたりは、他で詳しく説明してくれているので割愛します。

簡単に言うと、バリューコマースに登録し、本が購入されると購入額の○○%が広告費として手に入ります。

バリューコマースは本以外にもさまざまなものがあるので登録しておいて損はないかと思います。

もしもアフィリエイトに登録していない方は

もしもアフィリエイトも、アフリィエイトサービスの登録サイトです。

自分は本の紹介用にしか使用してないですが、他にもさまざまなアフィリエイトが登録されています。

amazonの紹介が多いぞ!って方はおすすめ。

amazonアソシエイト・プログラムの場合、一定金額にならないと現金に換金できないけれど、

もしもアフィリエイトではそれがありません。

オススメしたい本を検索

まずはamazonで販売しているのか?を検索します。

検索して自分がオススメしたい本が見つかったら、本の題名をコピーします。

本の題名をヨメレバの書籍キーワードに入力し検索います。

表示された一覧から、「ブログパーツを作る」をクリックしてhtmlを作成します。

htmlはそのままブログに貼り付けてくだい。

ヨメレバ用のカスタマイズCSS

こちらをブログのcssコピペして作成してください。

.booklink-box,.kaerebalink-box{border:solid 1px #ddd;padding:20px 10px 0px 20px;margin-bottom:20px;margin-left:20px;margin-right:20px}.booklink-box .booklink-info,.booklink-box .kaerebalink-info,.kaerebalink-box .booklink-info,.kaerebalink-box .kaerebalink-info{text-align:left}.booklink-image,.kaerebalink-image{float:left;margin-right:40px}.booklink-image a img,.kaerebalink-image a img{width:120px}.kaerebalink-name,.booklink-name{font-size:17px;font-weight:600}.booklink-powered-date,.kaerebalink-powered-date{display:none}.booklink-detail,.kaerebalink-detail{margin-top:30px}.kaerebalink-link1,.booklink-link2{margin-top:30px}.shoplinkamazon{display:inline;margin-right:5px;padding:0px 0px 0px 0px;white-space:nowrap;background:#E47911;float:left}.shoplinkamazon a{color:#FFFFFF;text-decoration:none;display:inline-block;padding:0.9em 1.5em}.shoplinkkindle{margin-right:5px;padding:0px 0px 0px 0px;white-space:nowrap;background:#565a5c;display:inline;float:left}.shoplinkkindle a{color:#FFFFFF;text-decoration:none;display:inline-block;padding:0.9em 2em}.shoplinkrakuten{display:inline;margin-right:5px;padding:0px 0px 0px 0px;white-space:nowrap;background:#e00007;float:left}.shoplinkrakuten a{color:#FFFFFF;text-decoration:none;display:inline-block;padding:0.9em 1.5em}.shoplinkyahoo{display:inline;margin-right:5px;padding:0px 0px 0px 0px;white-space:nowrap;background:#FF0034;float:left;margin-top:10px}.shoplinkyahoo a{color:#FFFFFF;text-decoration:none;display:inline-block;padding:0.9em 1em}.booklink-footer{clear:both;padding-top:30px}
@media only screen and (max-width: 479px){.booklink-box,.kaerebalink-box{margin-left:20px;margin-right:20px;padding:20px 0 0 20px}.booklink-image{margin-right:10px}.booklink-image a img{width:120px}.booklink-name{font-size:17px}.booklink-detail,.kaerebalink-detail{display:none}.kaerebalink-link1,.booklink-link2{clear:both}.shoplinkamazon,.shoplinkkindle,.shoplinkrakuten{margin-top:10px}.shoplinkamazon a{padding:0.9em 1em}.shoplinkkindle a{padding:0.9em 1.5em}.shoplinkrakuten a{padding:0.9em 0.5em}img.alignnone.size-full.sp-width-80{width:80%}}