デザイン

ブロガー必須のブログパーツ「カエレバヨメレバ」とは?ワードプレステーマ「JIN」での設定方法。

ワードプレステーマJINでカエレバヨメレバデザインを設置してみよう

 
ブロガー必須のブログパーツ「カエレバ」。
ボクはワードプレステーマ「JIN」を使用しています。
「JIN」はひつじさんという方がデザインされているワードプレステーマで、
有料ですが、とてもオススメのWordPressテーマです。
「JIN」は使用方法のマニュアルも充実していて、
初心者、PHPが扱えないボクはとても助かっています。
が、、
カエレバヨメレバCSSの設定方法
の項目が意外とあっさりしていて、(※2018年10月9日現在)
少し苦戦しました。
マニュアルの方も多分そのうち更新されると思いますが、
設定方法の備忘録として記しておきます。
 

カエレバヨメレバとは?

試しに「カエレバ」デザインを設置してみました。
こんな感じで、ブログで紹介したい商品の
Amazon、楽天、Yahooショッピング等のリンクを
一つのパーツ、デザインとしてまとめて表示する機能のことです。
 
ちなみに、ブログテーマ「JIN」では
WordPressの管理画面から
「カスタマイズ」>「記事のデザイン設定」と進み、
「カエレバヨメレバをJINオリジナルデザインにする」にチェックを入れておくと、
勝手にスタイリッシュなデザインになるCSS(文字の大きさ、カラー等を制御するウェブ言語)が適用されてキレイに表示してくれます。
 

ワードプレステーマ「JIN」での設定の確認方法

まずは外観>カスタマイズをクリック。
ワードプレステーマJINにカエレバヨメレバデザインを設定する方法1
 
次に、記事のデザイン設定をクリック。
ワードプレステーマJINにカエレバヨメレバデザインを設定する方法2
 
最後に一番下までスクロールして、「カエレバデザインをJINオリジナルデザインにする」にチェックを入れましょう。
ワードプレステーマJINにカエレバヨメレバデザインを設定する方法3
 

カエレバデザインの設定方法

カエレバデザインのサイトにアクセス

 
カエレバデザインのサイトにアクセスします。
【カエレバデザインサイト】
https://kaereba.com/
 

項目に必要事項を入力

 
「ユーザーデーター入力」の項目に
必要事項を入力していきます。
ワードプレステーマJINにカエレバヨメレバデザインを設定する方法4
 

AmazonアソシエイトIDの設定

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法5
アマゾン・アソシエイトにログインすると、
画面の右上にIDが表示されています。
表示されているIDをAmazonアソシエイトの項目にコピペします。
Amazonアソシエイトに登録がまだの場合は、
登録が必要です。
 
→Amazonアソシエイト登録についての記事はコチラ
 

 

楽天アフィリエイトIDの入力

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法6
「ユーザーデーター入力」の項目に記載のある
楽天アフィリエイト
例:aaaaaaaa.bbbbbbbb.cccccccc.dddddddd
(楽天ウェブサービス用のIDを利用します 調べ方)
の”調べ方”のリンクをクリックし、リンク先の楽天ページでログインすると、
上記画像のページに行きIDが表示されます。
コピペで貼り付けましょう。

 

Yahoo!ショッピング、バリュコマの情報の入力

バリュコマとは、
バリューコマースの事で、アフィリエイト広告を提供している
ASP(アフィリエイトサービスプロバイダ)の事です。
登録がまだの方は登録が必要です。
 
バリューコマース株式会社
https://www.valuecommerce.ne.jp/info/register.html
バリューコマースに登録を済ませ、
「ヤフーショッピング」と提携を済ませます。
 
ワードプレステーマJINにカエレバヨメレバデザインを設定する方法7
「広告検索/作成」→「提携済」→「ヤフーショッピング」→「広告作成」→「MyLink」
と進んで行き、
上記画像の「コピーしたURLを貼り付ける」に
https://shopping.yahoo.co.jp/などの適当なアドレスを入力。
「広告となるテキストを入力する」に
“サンプル”など適当な文字列を入力し、
「MyLinkコードを取得」
ボタンをクリックします。
 
ワードプレステーマJINにカエレバヨメレバデザインを設定する方法8
すると、コードが表示されるので、そこから

  • sid=0123456
  • pid=012345678

の数字の部分を抜き取り、コピペします。
これで、主要なリンクの設定が完了です!
「ユーザーデーター入力」の「保存」ボタンをクリックして
保存しください!
 

 

最後にカエレバデザインのコードを作成&貼り付け

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法9
あとは、カエレバヨメレバページ上部の
「画像+リンクリスト ブログパーツ生成」に行き、
①の部分の設定をしていきます。
記事上部に貼り付けてあるサンプルは、デフォルトの設定から
「画像小→画像中」「Amazon、楽天市場、Yahoo!ショッピングにチェックを入れる」
くらいしか触っていません。
 
①の設定が終え、②の部分に自動生成された
コードをコピーしてしてブログに貼り付けます。
 
お疲れ様でした!
以上で、カエレバデザインをブログに設置完了です。
 
簡単な設定で便利なブログパーツができるので、
使ったことの無い方は、是非使ってみる事をオススメします。