ここでは、カエレバとヨメレバのカスタマイズ方法（カエテンWPとSTINGER８）について紹介する。
 |
アフィリエイトブログの始め方・作り方
（トップページ） |
|---|---|
 |
1 アフィリエイト記事とは |
 |
2 売れる文章（ランディングページ）の書き方 |
|
3 ランディングページの書き方のコツ |
 |
4 集客方法 |
＊「カエレバ」「ヨメレバ」の活用
 |
カエレバの使い方（amazonと楽天のアフィリエイトリンクの作成方法） |
|---|---|
|
カエレバにYahoo!ショッピングボタンを追加する方法 |
|
ヨメレバの使い方（Amazonやkindle、楽天ブックスを利用する方法） |
 |
カエレバとヨメレバのカスタマイズ方法（カエテンWPとSTINGER８） |
カエレバとヨメレバのカスタマイズ
「カエレバとヨメレバ」は、複数のショップの紹介リンクを貼りたい時に重宝する「かん吉氏」が提供するブログパーツである。
これらは、利用するだけで「コンバージョン率アップ」が期待できる優れものである。
だがしかし、カエレバとヨメレバは「デザイン」をカスタマイズすることが可能で、このカスタマイズをすることでさらなる「コンバージョン率アップ」が期待できるのだ。
デザイン（取得コード）
では、さっそくデザイン（ボタン）のカスタマイズを行う。
とその前に、
「カエレバとヨメレバ」のカスタマイズしたデザインを、サイトやブログに反映させるには、予めブログパーツ生成画面にて、取得コードを「amazlet風-2」に指定しておくことが条件である。
これをしておかないと、カスタマイズしたデザインにはならないので注意しよう。
カスタマイズ後の表示
あと、このサイトで行うカスタマイズは下記のように表示されるので、このデザインが気に食わない場合には、他の人のサイトを参考にしよう。
◆カエレバ
◆ヨメレバ
このように「カエレバとヨメレバ」のデザイン（ボタン）が、カスタマイズされるぞ。
カエテンWP
まずは、「カエテンWP」のテーマでカエレバとヨメレバのデザインをカスタマイズしてみる。
参考➡WordPressに「カエテンWP」と「STINGER」のテーマ（テンプレート）をインストールする方法
カエテンWPの場合には、Wordpressの管理画面（ダッシュボード）から「外観」、「その他オプション」に移動して行う。
移動が完了したら、「カスタマイズ用CSS」の欄に下記のサイトのコード（レスポンシブ版）を貼り付ける。
参考：コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目
レスポンシブ版
終わったら、「変更を保存」ボタンをクリックしよう。
これで、「カエテンWP」のテーマでの「カエレバとヨメレバ」のデザイン（ボタン）カスタマイズは完了である。
STINGER８
STINGER８のカスタマイズの場合には、少々複雑になる。
なぜなら、「PC版」のコードと「スマホ版」のコードの２つを貼り付けなければならないからである。
では、Wordpressの管理画面（ダッシュボード）に移動しよう。
移動したら、「外観」、「テーマの編集」へと移動しよう。
そうしたら、トップページが
になっていると思うので、ここにコードを貼り付けることになる。
PC版
でPC版のコードを貼り付ける場所は、
|
1 2 3 |
/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ ---------------------------------------------------------------------------------------------------*/ @media print, screen and (min-width: 960px) { |
という場所になる。
ちなみに、CSSをいじるときには、しっかりとコピーをとっておくことが大事である。
じゃないと取り返しのつかないことになるので注意である。
「フリーのテキストエディター」などが、おすすめである（私は、TeraPadを使用している）。
私は、下記のコード（PC版）を
参考：コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目
PC版
|
1 2 |
/*-- ここまで --*/ } |
のすぐ上の部分に貼り付けた（余白も上下に一行ずつとった）。
実際にコード（PC版）を貼り付けてみると、上記のようになる（真ん中部分は、一部中略）。
これで、PC版のカスタマイズコードの設置は完了である。
スマホ版
次は、スマホ版のコードを貼り付ける。
貼り付ける場所としては、
|
1 2 3 |
/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット ---------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 959px) { |
の場所になる。
私は、下記のコードを
参考：コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目
スマホ版
|
1 2 |
/*-- ここまで --*/ } |
のすぐ上の部分に貼り付けた（余白も上下に一行ずつとった）。
実際にコード（スマホ版）を貼り付けてみると、上記のようになる（真ん中部分は、一部中略）。
これで、スマホ版のカスタマイズコードの設置は完了で、STINGER８のテーマでの「カエレバとヨメレバ」のデザイン（ボタン）のカスタマイズも完了である。
以上で、カエレバとヨメレバのカスタマイズ方法（カエテンWPとSTINGER８）についての解説は終了する。
■アフィリエイト記事（ランディングページ）の書き方と作り方ページに戻る
関連記事
■カエレバの使い方（amazonと楽天のアフィリエイトリンクの作成方法）
■ヨメレバの使い方（Amazonやkindle、楽天ブックスを利用する方法）
■WPアソシエイトポストR2の設定方法と使い方（Amazon、楽天、Yahoo!ショッピングの商品リンクが簡単に作成できるプラグイン）