10分でわかる!はてなブログへの「ヨメレバ」導入手順と使い方を画像解説!
こんばんは、いちあきです。今回はブログ運営に関係する記事です。
あなたは「カエレバ」「ヨメレバ」といったサービスはご存知でしょうか?
ブログを運営されている方で書評やレビューをすることは多いと思います。
僕も使用していたのですが、はてなブログの場合はAmazonへのリンクを簡単に貼ることができます。
こんな感じ!
でもこれじゃ読者はどこに飛ばされるかわからないですよね。
何より"Amazon"という文字がどこにも無いのがすごく気になります。
今回、導入説明する「ヨメレバ」というサービスを使うとこんな感じに紹介できます。
めっちゃわかりやすい!
さあ、導入していないあなたも「カエレバ」「ヨメレバ」を導入したくなってきたんじゃないですか?僕は他の人のブログを見てはいつも指をくわえていました…
導入される方は急いで公式サイトへGO!と言いたいところなんですが、公式の導入説明や使い方ははっきり言ってわかりずらかったです。自分で調べてどうぞという感じ。
なので、今回は「ヨメレバ」実装したての僕が10分で導入できるようになるまでの手順を解説します。細かい説明は抜きで、手順通り実施すればとりあえず実装できるはず!
- 「ヨメレバ」導入手順(CSSデザイン込)
- 今回の「ヨメレバ」実装目標
- 手順1:ブログにCSSを導入する
- 手順2:ヨメレバに登録する
- 手順3:「ヨメレバ」で商品を探し、htmlコードを取得する
- 手順4:htmlをブログに貼り付ける
- プレビューで結果を確認!
- さいごに
「ヨメレバ」導入手順(CSSデザイン込)
ざっくりした手順は以下のとおりです。
-
ブログにCSSを導入する(はてなブログver)
-
ヨメレバに登録する
-
ヨメレバで商品を探し、htmlコードを取得する
-
htmlをブログに貼り付ける
「え?CSSを先に導入するの?」と思われるかもしれませんが、作業の手戻りを考えると、先にCSSデザインをしておいたほうが楽です。
どうせそのまま使う人なんてほとんどいないでしょ。
また、先程言いましたが細かい説明は抜きにしています。
CSSってなに?ヨメレバってなに?というのが知りたい方は別のページで調べていただいた方がいいと思います。
1と2については、1度実施すれば次回以降は作業不要になります。
サクッと終わらせましょう!
今回の「ヨメレバ」実装目標
今回の目標は書籍のリンクを以下の通り実装することです。
手順1:ブログにCSSを導入する
まずは以下のコードをコピーしてください。
/*ヨメレバ・カエレバ(レスポンシブ)*/
.booklink-box, .kaerebalink-box {
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
padding: 22px 25px 22px 25px;
width: 94%;
margin: 0 auto 15px;
border: 3px solid #dfdfdf;
box-sizing: border-box;
text-align: center;
}
.booklink-image, .kaerebalink-image {
width: 100%;
margin: 0 0 5px 0;
}
.booklink-image img, .kaerebalink-image img {}
.booklink-info, .kaerebalink-info {
line-height: 125%;
width: 100%;
}
.booklink-name, .kaerebalink-name {
margin: 0 0 4px 0;
}
.booklink-name a, .kaerebalink-name a {
color: #0066cc;
text-decoration: underline;
}
.booklink-name > a, .kaerebalink-name > a {
font-size: 16px;
}
.booklink-name a:hover, .kaerebalink-name a:hover {
color: #FF9900;
}
.booklink-powered-date, .kaerebalink-powered-date {
font-size: 8px;
}
.booklink-detail, .kaerebalink-detail {
color: #333333;
font-size: 12px;
margin: 0 0 10px 0;
}
.booklink-link2, .kaerebalink-link1 {}
.booklink-link2 a, .kaerebalink-link1 a {
width: 90%;
display: block;
margin: 0px auto -12px;
padding: 10px 1px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
box-shadow: 2px 2px 1px #dcdcdc;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover {
opacity: 0.6;
}@media screen and (min-width: 800px) {
.booklink-box, .kaerebalink-box {
text-align: left;
display: table;
}
.booklink-image, .kaerebalink-image {
vertical-align: top;
box-sizing: border-box;
display: table-cell;
width: 111px;
text-align: center;
margin: 0;
}
.booklink-image img, .kaerebalink-image img {
max-width: 100%
}
.booklink-info, .kaerebalink-info {
line-height: 125%;
vertical-align: top;
box-sizing: border-box;
display: table-cell;
padding-left: 25px;
width: auto;
}
.booklink-name, .kaerebalink-name {
margin: 0 0 24px 0;
}
.booklink-name > a, .kaerebalink-name > a {
font-size: 16px;
}
.booklink-powered-date, .kaerebalink-powered-date {
margin: 6px 0 0 0;
}
.booklink-detail, .kaerebalink-detail {
margin: 0 0 14px 0;
}
.booklink-link2 a, .kaerebalink-link1 a {
width: auto;
text-align: center;
margin: none;
}
.booklink-link2 > div, .kaerebalink-link1 > div {
width: 33.33%;
padding: 0 5px 5px 0;
box-sizing: border-box;
float: left;
}
}.shoplinkamazon a {
color: #ffffff;
background: #ff9901;
border: 2px solid #ff9901;
}
.shoplinkrakuten a {
color: #ffffff;
background: #bf0000;
border: 2px solid #bf0000;
}
.shoplinkkindle a {
color: #ffffff;
background: #0074c1;
border: 2px solid #0074c1;
}
なお上記のコードは以下のサイトからお借りしています。
次にはてなブログにCSSを記述します。
まずはダッシュボード左の一覧から「デザイン」を選択。
次に上部にある「カスタマイズ」を選択
最後に「デザインCSS」を選択し、コピペしたら完了。
注意点としては、すでにCSSデザインを使用している場合はバックアップ(メモ帳にコピー)しておきましょう。問題があった際に戻せないと大変ですからね。
以上でCSSの導入は完了です。
手順2:ヨメレバに登録する
まずは「ヨメレバ」のサイトに移動しましょう。
次に、自分のブログを登録します。サイト中部で登録できます。
「サイト名」と「アマゾン」の項目を入力しましょう。
AmazonアソシエイトのIDはトップページから確認できます。
アソシエイトIDをコピーして貼り付けましょう。
(このとき楽天等のアフィリエイトIDがわかるのであれば、登録しておきましょう)
最後に画面下にある「保存」を押して完了です。
手順3:「ヨメレバ」で商品を探し、htmlコードを取得する
ここから商品の取得になります。
最初にページ上部の「書籍キーワード」に目的の書籍に関連する言葉を入力して検索しましょう。
次に検索結果から目的の書籍を見つけ出し、「ブログパーツを作る」を押します。
「ブログパーツ生成」画面では赤枠の通り
- 「amazlet風-2(CSSカスタマイズ用)」に設定
- 「AmazonとKindle」にチェックを入れる
この2つは忘れずに実施しましょう。
最後に3つ目の赤枠のコードをコピーしてこの手順は完了です。
手順4:htmlをブログに貼り付ける
最後に紹介を貼り付けたいブログ記事で「HTML編集」を行います。
これを…
こうじゃ!
これで貼り付けが完了です!
プレビューで結果を確認!
最後にプレビューで結果を確認してみましょう。
どうでしょうか?いい感じにデザインされていますね。
さいごに
うまくいかない場合は以下を確認してみてください。
- CSSのコピーに失敗していないか
- ヨメレバの書籍が正しく取得されているか
- HTMLコードのコピーに失敗していないか
今回は「ヨメレバ」限定でブログへの貼付けまでの手順を解説しましたが「カエレバ」「トマレバ」においても導入手順は大きく変わりません。
こういったひと手間が読者に対してのストレスを軽減させることになります。
なるべくストレスフリーなブログを目指してより良くしていきましょう!