最近はてなブログを駆けずり回って楽しんでいる冒険者Lv.1です。
色んなブログで商品を紹介している記事を見るので、綺麗に商品を紹介できるツール「カエレバ」「ヨメレバ」のカスタマイズを紹介したいと思います。
私はいろんなブログを読んで楽しんだり勉強したりしています。
特にママさんブロガーの方の記事は好きですね(*’ω’*)
子育て真っ最中の私にとっては役に立つ情報ばかりで、教科書にの様に勉強になります！
あ、私のオススメブロガーさんは
みゆママさんです(id:egaono-oto)
egaono-oto.hatenablog.jp
更新頻度が高く、内容が面白い。
特にたまに出てくる変な日本語が好きです！(褒めてます)
朝に更新した記事を読むのが日課になり、いわゆる「サラリーマンが朝のニュース番組でお天気お姉さんをみて、今日も一日頑張ろう」というルーティーンですね☆
※勝手に紹介してすみません。都合が悪ければ消しますのでコメントください。
話は戻りますが、いろんなブログの記事を読んでいてたまに、「オススメ商品などを紹介しているけど、商品紹介のデザインが見にくくてもったいないなぁ」って思う時があります。
「カエレバ」「ヨメレバ」ツールを使ったらデザインも良くなり、読者も見やすくなるので、是非チャレンジしてみましょう。
デザイン
下の画像は「ヨメレバ」ツールを使ったデザインで、スマホ画面で見たときの表示の仕方です。
ヨメレバ-スマホ画面
次に「カエレバ」ツールを使った時のショップボタンデザイン画像です。
カエレバ-ショップボタンデザイン
ショップリンクをボタン化することで、買いたいと思ってくれた読者が購入先に迷わず進むことが出来るので読者にやさしいデザインになります。
もしアフィリエイトもしているのであれば、成約率も上がると思います。
上の画像はいずれもスマホ画面の表示デザインで、ＰＣ画面だとボタンの位置などが多少違います。
しかし、整頓されたまとまったデザインを第一に考えて作られたカスタムなので、ＰＣでも綺麗に表示されます。
ＰＣ表示も確認したいのであれば、ＰＣから私の商品紹介記事を見ていただけるとデザインを確認できます。
商品紹介記事→「金持ち父さん 貧乏父さん」著者：ロバート・キヨサキ で『お金を作り出す』の意味を学び、私の人生は変わっていっている - 人生RPG
参考にした記事
「ヨメレバ」「カエレバ」のデザインはいろんな種類があり、たくさんの方が紹介していますが、私が使わしてもらっているデザインはゆきひーさんのカスタマイズです。
www.yukihy.com
スマホ画面でもコンパクトにまとまったデザインっていうのが気に入ってます。
いつもありがとうございます。
設定方法
本家コードをそのまま貼ってもいいのですが、ボタンの表示される位置がずれるなどの不具合があるみたいなので、こちらの記事ではそれをあらかじめ修正したコードに直して紹介します。
「PC」・「スマホ」・「レスポンシブ」に分けて書いています。
PC版とスマホ版に分けている方はそのまま「PC」と「スマホ」を、レスポンシブ設定の方は「レスポンシブ」のみをやっていただければOKです！
ＰＣ
下のコードをコピペ（コピー＜複製＞＆ペースト＜貼り付け＞）します。
/*-------------------------------------- ヨメレバ・カエレバ（PC） --------------------------------------*/ .booklink-box, .kaerebalink-box{ padding:25px; margin-bottom: 10px; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 15px 0 0; float:left; min-width: 160px; text-align: center; } .booklink-image img, .kaerebalink-image img{ margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ margin:0; line-height:120%; overflow: hidden; } .booklink-name, .kaerebalink-name{ margin-bottom:24px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:8px; margin-top:10px; font-family:verdana; line-height:120%; } .booklink-detail, .kaerebalink-detail{font-size: 12px;} .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;} .booklink-link2, .kaerebalink-link1{margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a{ width:30%; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:inline-block; margin:5px 2px 0 0; padding:10px 1px; text-align:center; float:left; text-decoration:none; font-weight:800; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; color: #fff !important; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active .kaerebalink-link1 a:active{ position:relative; top:1px; } /*ボタンを変えるときはここから*/ .shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;} .shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;} .shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;} .shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;} .shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;} /*ここまでを変更*/ .shoplinkyahoo img{display:none;} .shoplinkamazon img{display:none;} .shoplinkrakuten img{display:none;} .shoplinkkindle img{display:none;} .shoplinkkakakucom img{display:none;} .shoplinkyahoo a{font-size:10px;} .booklink-footer{display: none;}
ダッシュボード（管理画面）
↓
デザイン
↓
カスタマイズ（スパナマーク）
↓
デザインＣＳＳに貼り付けます。
スマホ
下のコードをコピペ（コピー＜複製＞＆ペースト＜貼り付け＞）します。
<style> /*-------------------------------------- ヨメレバ・カエレバ（スマホ） --------------------------------------*/ .booklink-box, .kaerebalink-box{ padding:15px; margin-bottom: 10px; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 15px 0 0; float:left; width: 100px; } .booklink-image img, .kaerebalink-image img{ margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ margin:0; line-height:120%; overflow: hidden; } .booklink-name > a, .kaerebalink-name > a{ font-size: 15px; font-weight: bold; } .booklink-name, .kaerebalink-name{ margin-bottom:12px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:10px; margin-top:5px; font-family:verdana; line-height:120%; } .booklink-detail{ font-size: 12px; } .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;} .booklink-link2, .kaerebalink-link1{margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a{ width:calc(100% - 4px); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:inline-block; margin: 2px 0px; padding:10px 0px; text-align:center; float:left; text-decoration:none; font-weight:800; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; color: #fff !important; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active, .kaerebalink-link1 a:active{ position:relative; top:1px; } /*ボタンを変えるときはここから*/ .shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;} .shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;} .shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;} .shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;} .shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;} /*ここまでを変更*/ .shoplinkyahoo img{display:none;} .shoplinkamazon img{display:none;} .shoplinkrakuten img{display:none;} .shoplinkkindle img{display:none;} .shoplinkkakakucom img{display:none;} .booklink-footer{clear:left;} .shoplinkyahoo a{font-size:10px;} .booklink-footer{display: none;} </style>
ダッシュボード（管理画面）
↓
デザイン
↓
スマートフォン（スマホマーク）
↓
記事
↓
「記事上」の記述枠に貼り付けます。
（記事ページだけでなくトップページにも本のリンクを貼る方は「タイトル下」に貼ってください）
※スマホのカスタマイズは有料（ＰＲＯ）ユーザーでないとできません。
レスポンシブ
レスポンシブ設定にしている方は上の二つは貼り付けなくてかまいません。
下のコードをコピペ（コピー＜複製＞＆ペースト＜貼り付け＞）します。
/*-------------------------------------- ヨメレバ・カエレバ（レスポンシブ） --------------------------------------*/ .booklink-box, .kaerebalink-box{ padding:25px; margin-bottom: 10px; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 15px 0 0; float:left; min-width: 160px; text-align: center; } .booklink-image img, .kaerebalink-image img{ margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ margin:0; line-height:120%; overflow: hidden; } .booklink-name, .kaerebalink-name{ margin-bottom:24px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:8px; margin-top:10px; font-family:verdana; line-height:120%; } .booklink-detail, .kaerebalink-detail{font-size: 12px;} .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;} .booklink-link2, .kaerebalink-link1{margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a{ width:30%; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:inline-block; margin:5px 2px 0 0; padding:10px 1px; text-align:center; float:left; text-decoration:none; font-weight:800; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; color: #fff !important; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active .kaerebalink-link1 a:active{ position:relative; top:1px; } /*ボタンを変えるときはここから*/ .shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;} .shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;} .shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;} .shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;} .shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;} /*ここまでを変更*/ .shoplinkyahoo img{display:none;} .shoplinkamazon img{display:none;} .shoplinkrakuten img{display:none;} .shoplinkkindle img{display:none;} .shoplinkkakakucom img{display:none;} .shoplinkyahoo a{font-size:10px;} .booklink-footer{display: none;} @media screen and (max-width: 680px) { .booklink-box, .kaerebalink-box{padding:15px;} .booklink-image, .kaerebalink-image{ width: 100px !important; min-width: initial; } .booklink-name > a, .kaerebalink-name > a{ font-size: 15px; font-weight: bold; } .booklink-name, .kaerebalink-name{margin-bottom:12px;} .booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;} .booklink-link2 a, .kaerebalink-link1 a{ width:calc(100% - 4px); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin: 2px 0px; padding:10px 0px; } }
ダッシュボード（管理画面）
↓
デザイン
↓
カスタマイズ（スパナマーク）
↓
デザインＣＳＳに貼り付けます。
以上です。
上部の「変更を保存する」をクリックして完了になります。
注意点
今回のカスタマイズを行う際には、ブログパーズ作成の際に「amazonlet風-2」を選択するようにしてください。それ以外ですと表示が崩れる可能性があります。
また、はてなブログ以外でも使用可能です。
by ゆきひー
「ヨメレバ」「カエレバ」のページでは「amazonlet風-2」以外にも色々選択枠があるので、ここでは、ちゃんと「amazonlet風-2」が選択されているか確認をし、違うタイプのになっていたら変更しましょう。
その他の設定や、使い方はこちらの記事がとても分かりやすかったので、参考にしてください。
affiliate150.com
まとめ
カスタマイズ自体は簡単ですよね。
商品画像（リンク）がダサいとデザインが悪くなります。
せっかく自分のオススメのものを紹介するのなら、紹介デザインも良くして見やすい記事にすると質も上がると思います。
「ヨメレバ」「カエレバ」ツールは無料で使えますし、アフィリエイトをしていても・していなくても、誰でも使うことが出来るので、おすすめですよ。（紹介する商品があるのならアフィリエイトして収益化した方がいいと思いますが、それは個人の好みですね）
ショップリンクをボタン化することでなんかショップサイトみたいで一気にクオリティー高くなったって感じますよね。
私はすごいテンションあがります。
