デザイン・プログラミングなど

【2019年版】これでOK。カエレバヨメレバの使い方。jinデザインWordPressサイトで設定する方法を解説。【便利なブログパーツ】

ワードプレステーマJINでカエレバヨメレバデザインを設置してみよう
こがねさん
こがねさん
ポチ、ポチ。
・・・これも読んでみたいな。
AIソルトくん
AIソルトくん
何してるの?
こがねさん
こがねさん
ブログで紹介されてた本を読んでみたくて沢山買っちゃった。
そういえば、ブログでよくある紹介されている商品の画像とボタンがセットになってるパーツって、皆んなわざわざ作ってるのかな?大変じゃない?
AIソルトくん
AIソルトくん
あーそれは、「カエレバヨメレバ」っていうブログパーツを使ってるんだよ。
こがねさん
こがねさん
そうなんだ!?知らなんだ。
ワレワレも使ってみたいゾ!

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

子供の羊

ブロガー必須のブログパーツ「カエレバヨメレバ」。

僕はワードプレステーマ「JIN」を使用しこのブログを作成しています。

「JIN」はひつじさんという方がデザインされているワードプレステーマです。

有料ですが、オシャレで完成度の高いブログサイトを手間をかけずにつくることができ、その価値を存分に感じる事のできるとてもオススメのWordPressテーマです。

「JIN」は使用方法のマニュアルも充実していて、初心者、PHPが扱えない僕はとても助かっています。

しかしながら、マニュアルのカエレバヨメレバCSSの設定方法の項目を見たときに、

「???」

となってしまい、少し設置に苦戦しました。(※2018年10月9日現在のマニュアルを見ました。)

なぜなら、恥ずかしながらそもそも『カエレバヨメレバ』というブログパーツについて全く知識がなかったからです。

ということで、本記事では備忘録として

『カエレバヨメレバ』ってそもそも何なのか?

『カエレバヨメレバ』基本的な設定方法はどうしたらいいのか?

そんな疑問にお答えしています。

 

カエレバヨメレバとは?

試しに「カエレバ」デザインを設置してみました。

「カエレバ」とは、こんな感じで、ブログで紹介したい商品のAmazon、楽天、Yahooショッピング等のリンクを、一つのまとまったデザインとして表示することのできるブログパーツのことです。

もうひとつの『ヨメレバ』はカエレバと同様のブログパーツで、書籍紹介様につくられています。

 

『カエレバヨメレバ』の設定手順

首を傾げたネコ

ブログテーマ「JIN」では、WordPressの管理画面から

『カスタマイズ』→『その他設定』

と進み、

『カエレバヨメレバをJINオリジナルデザインにする』

にチェックを入れておくと『カエレバヨメレバ』のデフォルトデザインに、自動にスタイリッシュな『JIN』オリジナルデザインになるCSS(文字の大きさ、カラー等を制御するウェブ言語)が適用されてキレイに表示してくれます。

ただ、「カエレバヨメレバ」を設置するには、そもそも「カエレバ」のサイトで基本設定を済ませ、自動生成されたコードを取得する必要があります

 

1. 『カエレバ』もしくは『ヨメレバ』のサイトでユーザーデータを設定する

2.自動生成されたコードを取得する。

3.ブログにコードを設置する。

4.ワードプレステーマ『jin』の設定
『カスタマイズ』→『その他設定』→『カエレバヨメレバをJINオリジナルデザインにする』にチェックを入れる

5.ワードプレステーマ『jin』に合わせたCSSデザインが適用された『カエレバヨメレバ』パーツの設置完了です。

全体的には設置までこんな流れになります。



『カエレバ』の設定方法

こがねさん
こがねさん
おおすじは何となくわかったけど、自分で設定できるかな。。
AIソルトくん
AIソルトくん
大丈夫。これから出来るだけ具体的に設定方法を説明していくよ!

カエレバヨメレバをブログパーツとして使える様にする為には、まずカエレバヨメレバのサイトで基本情報を設定する必要があります。

具体的な設定方法を解説していきます。

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

まず、カエレバデザインのサイトにアクセスします。

 

項目に必要事項を入力

「ユーザーデーター入力」の項目に、必要事項を入力していきます。

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法4

 

AmazonアソシエイトIDの設定

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法5

アマゾン・アソシエイトにログインすると、画面の右上にIDが表示されています。

表示されているIDをAmazonアソシエイトの項目にコピペします。

Amazonアソシエイトに登録がまだの場合は、登録&審査通過をする必要があります。

アマゾンアソシエイト承認のコツ
ページビューほぼ自分だけ&5記事作成でアマゾンアソシエイトの審査通過しました。ページビュー、閲覧ユーザー数はほぼ「ゼロ」。5記事だけ投稿のブログサイトでAmazonアソシエイトの申請通過!申請時の状況やコツをまとめてみました。...

 

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

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法6

楽天のアフィリエイトはアマゾンの様な審査は特にありません。

普段使用している楽天市場のIDがあればそれを利用する事ができます。

「ユーザーデーター入力」の項目に記載のある

楽天アフィリエイト
例:aaaaaaaa.bbbbbbbb.cccccccc.dddddddd
(楽天ウェブサービス用のIDを利用します 調べ方)

の”調べ方”のリンクをクリックし、リンク先の楽天ページでログインします。

ログインすると、上記画像のページが表示されIDが確認できます。

表示されたIDをカエレバの楽天の項目にコピペします。

 

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

バリュコマとは、

バリューコマース株式会社が運営しているASP(アフィリエイトサービスプロバイダ)の事です。

ASPは、ウェブサイトでの広告掲載の依頼をしたい方と、広告を掲載したい人をつなげるアフィリエイト広告の仲介のサービスをしてくれています。

バリューコマースは『ヤフー株式会社』が主要株主で、ヤフー株式会社に属している会社です。

ですので、バリューコマースはヤフーと関連しているサービスの紹介に強いASPです

そんな事情もあり、

「Yahoo!ショッピング内の商品を紹介したいなぁ」という場合は、バリューコマースに登録しておく必要があります。

登録がまだの方はまず、バリューコマースにて登録を済ませます。

合わせてバリューコマース内で「ヤフーショッピング」と連携を済ませておく事で「カエレバヨメレバ」のYahoo!ショッピングの自動生成リンクを使える様になります。

 

Yahoo!ショッピングの「カエレバヨメレバ」設定用のコードは下記の手順で取得します。

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法7

「広告検索/作成」→「提携済」→「ヤフーショッピング」→「広告作成」→「MyLink」

と進んで行きます。

上記画像ページが表示されたら「コピーしたURLを貼り付ける」の項目に『https://shopping.yahoo.co.jp/』などの適当なアドレスを入力します。

「広告となるテキストを入力する」には、『サンプル』など適当な文字列を入力しておきます。

その後に「MyLinkコードを取得」ボタンをクリックします。

 

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法8

すると、コードが表示されるので、そこから

sid = 0123456

pid = 012345678

の数字の部分を抜き取り、カエレバのヤフーショッピングの枠内にコピペします。

これで、Yahoo!ショッピングのリンクの設定ができます。

 

設定の保存方法と注意点

「Amazon」「楽天」「Yahoo!」ショッピングへのリンク作成コードの設定を済ませたら、最後に「ユーザーデーター入力」表の一番下にあるの「保存」ボタンをクリックして設定を保存します

これでカエレバの基本設定は終了です。

ちなみにデーターの保存には、「カエレバヨメレバ」サイトの説明にもある通り、『Cookie』を利用しています。

ChormeやSafariなどのブラウザの『Cookie』機能をONにしていないと保存できず、その都度入力しなければいけなくなるのでご注意ください

 

『もしもアフィリエイト』『バリューコマース』のアカウントがあれば、もっとシンプル設定する方法もあります。

ここまで、「アマゾン」「楽天」「ヤフー」の各サイトから直接個別に情報をとってきて設定する方法を解説いたしました。

もう1つの方法として、『もしもアフィリエイト』または『バリューコマース』のアカウントを使用して、もっとシンプルな手順で設定する方法もあります。

たとえば、もしもアフィリエイトのみの登録で設定を済ませる場合は、

『もしもアフィリエイト』に登録する。

もしもアフィリエイトのサイト内で「Amazon」「楽天」「ヤフーショッピング」との提携を済ませておく。

もしものアフィリエイトのサイトの中から該当コードを取得し「もしも」の枠内にコピペしていく。

という流れで設定を行います。

ただ、カエレバを設定していく際には、既に各ショッピングサイトとアカウントの連携を済ませておく必要があります。

Amazonとの連携の審査は既にアマゾンアソシエイトの審査を通過していても、もしもアフィリエイトから提携を申請し、承認されるまでは案外時間がかかったりしますのでご注意ください。

そのことを踏まえた上で、『もしもアフィリエイト』『バリューコマース』にアカウントをもっており、アマゾン、楽天、Yahoo!ショッピングと既に提携を済ませる事ができているなら、この方法もオススメです。

 

カエレバのコードを作成&ブログに貼り付ける方法

カエレバデザインのコードを作成&ブログに貼り付けする方法1

ブログにカエレバのブログパーツを設定するには、上記基本設定を済ませた後に、一旦ページ上部に戻ります。

ページ上部に戻ると『商品キーワード』の検索窓があるので、掲載したい商品の検索をします。

『Amazonで商品を検索』→『商品の正式名称を確認』→『正式名称でカエレバの検索窓で検索』という手順で検索すると、該当の商品の検索精度をあげる事ができます。

 

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

検索窓右側にある選択カラムより、『楽天価格ナビ』『楽天市場』『ヤフーショッピング』どのサイトをメインで検索をかけるか選び『検索』をクリックします。

 

カエレバデザインのコードを作成&ブログに貼り付ける方法3

検索をかけるとずらっと商品のリストが表示されます。

『商品詳細ページ』でメインのリンク先を確認し問題が無ければ『ブログパーツを作る』をクリックします。

 

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

『ブログパーツを作る』をクリックすると1つ前のページに移動します。

下の方にスクロールしてみると『画像+リンクリスト ブログパーツ生成』の項目に、先ほど選んだ商品ページのブログ設置用パーツがおおかた出来上がっています。

表示されている商品画像に間違いがなければ、①の部分を調整し詳細を設定していきます。

まず 、『デザイン』の項目は『amazlet風-2(cssカスタマイズ用)』を選択します。

次に下にある、『Amazon』『楽天市場』『Yahoo!ショッピング』にチェックを入れます。

ちなみに、後ほどjinのオリジナルデザインを適用していくので、画像の大きさなどの設定はそのままで大丈夫です。

 

①の設定が終えると、設定に応じたコードが②の部分に自動生成されています。

コードをコピーしてしてブログの表示したい部分に貼り付けます。

 

『amazlet風-2(cssカスタマイズ用)』以外を選択するとどうなるの?

『amazlet風-2(cssカスタマイズ用)』以外を選択するとどうなるの?

『amazlet風-2(cssカスタマイズ用)』以外のテンプレートデザインを選択し、jinのテーマを使用したWordPressブログに貼り付けると、PC版ではぱっと見には違いはありませんでした。

しかし、スマホページで表示してみると上記画像の様な違いが出てきます。

画像左の表示は「amazlet風-2(cssカスタマイズ用)」以外のデザインを選択しています。

画像右の表示は「amazlet風-2(cssカスタマイズ用)」を使用した時の表示となります。

「amazlet風-2(cssカスタマイズ用)」を選択しておかなければ、カエレバヨメレバの自動生成コードの中にCSS(デザインを制御するWeb言語)が同時に生成される為、jinのCSSがうまく適用されず、レイアウトに少し不具合が出てしまいます。

jinの方でレスポンシブ表示に最適化する為のCSSの設定がある様ですので、特に必要がない限りは「amazlet風-2(cssカスタマイズ用)」を使用した方が無難に設置する事ができます。

 

ワードプレステーマ「JIN」での「カエレバヨメレバ」のデザイン設定方法

ワードプレステーマJINにカエレバヨメレバデザインを設定する方法1

まずは『外観』→『カスタマイズ』をクリック。

 

ワードプレステーマ「JIN」でのカエレバヨメレバ設定方法2

次に、『その他設定』をクリック。

 

ワードプレステーマ「JIN」でのカエレバヨメレバ設定方法3

その他設定上部に表示されている『カエレバヨメレバデザインをJINオリジナルデザインにする』にチェックを入れます。

これでWordPressテーマjinでの設定は完了です。

 

まとめ

のびをするネコ

お疲れ様でした。

以上で、カエレバデザインをブログに設置完了です。

簡単な設定で便利なブログパーツができるので、使ったことの無い方は、是非試してみて下さい。

このブログが同じ様なところでつまずいている方の参考になれば幸いです。

 

jinをお使いの方へ。ヨメレバのデザインをカスタマイズする方法【wordpress(ワードプレス)】
jinをお使いの方へ。ヨメレバのデザインをカスタマイズする方法【wordpress(ワードプレス)】 本記事ではそんな疑問にお答えする方法を解説しています。 基本的には本サイトでも使用しているワードプレステーマ「jin」での...
その発想はなかった!バズるブログタイトル
その発想はなかった!3秒でできるバズるタイトルをつける方法。その発想はなかった!3秒でできるバズる斬新なブログタイトルのつけ方のコツをご紹介します。...
うわっ…私のサイト、遅すぎ…?wordpressサイトの表示速度の改善を試してみた。
うわっ…私のサイト、遅すぎ…?wordpressサイトの表示速度の改善を試してみた。【速度スコアの変化を検証】WordPressサイトの表示速度、遅くないですか?ワードプレスの人気テンプレート「JIN」を使用しているのですが、スマホサイトの表示速度がなかなか遅い事が判明。スピードアップする為に試行錯誤し、どの方法が実際に効果的だったのか?改善前と改善後のスピードの変化を検証してみました。サイトをスピードアップして無駄な離脱や、収益化の為の機会損失を防ぎたいと考えている方は、是非参考に記事をご覧ください。...
プログラミングなんて自分にできるの?そんな方はスクールの無料体験がオススメ。
こがねさん
こがねさん

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ…。」

AIソルトくん
AIソルトくん
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事がれば、あとは独学でも様々な言語に手を広げていく事ができます

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「短期間でプログラミングスキルを身に付けたい。」
「しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そんな方は最初に短期間スクールで学んでみる事もオススメです。

もちろん今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しています。

「余計な回り道を省いて、手っ取り早くしっかりとしたスキルを身に着けたい。」

そういった方は、実績のあるオンラインスクールを一度体験してみるという方法もあります。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でもTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースも用意されています。

独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料コースを体験してみると、プログラミング学習の行きづまりを解消すると共に、楽しさや将来への道が大きく開ける可能性があります。

無料コースを試してみてやめるもよし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみてください。
そうする事で様々なプログラミング言語の習得の難易度も一気に下がります。

奪われないし裏切らないスキルは、きっとあなたの人生の助けになります。

関連記事