ブログで本を紹介するヨメレバ設定とカスタマイズ

便利なブログパーツ:ヨメレバ

ブログで本を紹介したいときに便利なブログパーツがあります。

 

ヨメレバ

 

というブログパーツです。

 

これは、かん吉さんが作成したブログパーツです。

ヨメレバ

書籍紹介ブログパーツ ヨメレバ

 

ヨメレバを使って本を紹介するとこんなふうにできます。

ヨメレバ設定方法

① ブックマークを作る

ヨメレバブックマークレットをドラッグしてブックマークの欄に移動させる。

 

下の画像のようにブックマークとして常時表示されます。

② ユーザーデータ入力をする

サイト名、Amazonと楽天のアフィリエイトidを入力します。

アフィリエイトidの調べ方は、「調べ方」をクリックしてください。

7桁の数字になるはずです。

 クリックで拡大

③ もしもアフィリエイトに登録する(未登録の場合)

僕の場合は、Amazonと楽天は、もしもアフィリエイトというASP経由で提携しています。

「かんたんリンク」を使って、Amazonと楽天のアフィリエイトリンクを同時に作ることができます。

Amazonに直接アフィリエイト提携を申し込むと審査に落ちてしまったのですが、もしも経由だとなぜか合格しました。

もしもアフィリエイトは気前が良く、「W報酬制度」といって、報酬の支払い時に10%ボーナスをプラスしてくれます。

Amazonは適用外ですが(ケチですね)、楽天は適用されます。

もしもアフィリエイトの登録は無料です。

下記リンクから登録できます。

もしもアフィリエイト

クリックすると下記画面になるので、会員登録する(無料)から登録してください。

④ 「書籍キーワード」を入力し、「ブログパーツを作る」をクリック。

たくさん同じ本が検索結果に出ることがありますが、気にせずに一番上のをクリックします。

 クリックで拡大

⑤ ソースコードが出てくるので、コピーする。

デザインは、あとでカスタマイズするため、

amazlet風-2(CSSカスタマイズ用)を選んでください。

 クリックで拡大

⑥ WordPressの「テキスト」画面で貼り付ける。

⑦ 「ビジュアル」に戻す。

ヨメレバをカスタマイズする方法

ヨメレバ標準だとちょっと味気なかったので、僕はカスタマイズしています。
カスタマイズの仕方は、ゆきひーさんの記事を参考にさせていただいています。

① ゆきひーさん作成のCSSコードをひたすらコピーする。

「レスポンシブ」のCSSコードをコピーすると、PCとスマホを同時設定できます。

※ちなみに、スマホだと、こういうふうに表示されます。

② Simplicity2子テーマの「外観」→「テーマの編集」をクリック。

③ 「Simplicity子テーマ用のスタイルを書く」の下の行から、コピーしたCSSコードを貼り付ける。

④ 投稿画面でヨメレバ書籍紹介がきちんと表示されているか確認。

↓こうなる場合があります。段違いの表示。

⑤ 表示がズレる場合は、アズさん作成のCSSコードを追加する。

アズさんがこの現象を修正するCSSコードを作成してくれています。

https://www.a-s-blog.com/entry/2017/03/03/200000

.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}

この3つのCSSコードを丸ごとコピー(最初の「・」も忘れずコピー)。

⑥「外観」→「カスタマイズ」をクリック。

⑦ 一番下の「CSS追加」をクリック。

⑧ アズさんのCSSコードをどこでもいいので貼り付ける。

以上で、設定は完了です。

まとめ

ヨメレバを設定する。

もしもアフィリエイト経由でAmazonと楽天のアフィリエイト提携をする。

ヨメレバで書籍検索し、ソースコードを作成する。

ブログにショートコードを貼り付ける。

CSSコードを修正してカスタマイズ。

 

これで、効果的にあなたの紹介する商品がたくさん売れると良いですね♪

 

もしもアフィリエイト