・・・これも読んでみたいな。
そういえば、ブログでよくある紹介されている商品の画像とボタンがセットになってるパーツって、皆んなわざわざ作ってるのかな？大変じゃない？
ワレワレも使ってみたいゾ！
目次
ブロガー必須のブログパーツ「カエレバヨメレバ」とは？ワードプレステーマ「JIN」での設定方法。
ブロガー必須のブログパーツ「カエレバヨメレバ」。
僕はワードプレステーマ「JIN」を使用しこのブログを作成しています。
「JIN」はひつじさんという方がデザインされているワードプレステーマです。
有料ですが、オシャレで完成度の高いブログサイトを手間をかけずにつくることができ、その価値を存分に感じる事のできるとてもオススメのWordPressテーマです。
「JIN」は使用方法のマニュアルも充実していて、初心者、PHPが扱えない僕はとても助かっています。
しかしながら、マニュアルのカエレバヨメレバCSSの設定方法の項目を見たときに、
「？？？」
となってしまい、少し設置に苦戦しました。（※2018年10月9日現在のマニュアルを見ました。）
なぜなら、恥ずかしながらそもそも『カエレバヨメレバ』というブログパーツについて全く知識がなかったからです。
ということで、本記事では備忘録として
『カエレバヨメレバ』ってそもそも何なのか？
『カエレバヨメレバ』基本的な設定方法はどうしたらいいのか？
そんな疑問にお答えしています。
カエレバヨメレバとは？
試しに「カエレバ」デザインを設置してみました。
「カエレバ」とは、こんな感じで、ブログで紹介したい商品のAmazon、楽天、Yahooショッピング等のリンクを、一つのまとまったデザインとして表示することのできるブログパーツのことです。
もうひとつの『ヨメレバ』はカエレバと同様のブログパーツで、書籍紹介様につくられています。
『カエレバヨメレバ』の設定手順
ブログテーマ「JIN」では、WordPressの管理画面から
『カスタマイズ』→『その他設定』
と進み、
『カエレバヨメレバをJINオリジナルデザインにする』
にチェックを入れておくと『カエレバヨメレバ』のデフォルトデザインに、自動にスタイリッシュな『JIN』オリジナルデザインになるCSS（文字の大きさ、カラー等を制御するウェブ言語）が適用されてキレイに表示してくれます。
ただ、「カエレバヨメレバ」を設置するには、そもそも「カエレバ」のサイトで基本設定を済ませ、自動生成されたコードを取得する必要があります。
１. 『カエレバ』もしくは『ヨメレバ』のサイトでユーザーデータを設定する。
↓
２．自動生成されたコードを取得する。
↓
3．ブログにコードを設置する。
↓
４．ワードプレステーマ『jin』の設定
『カスタマイズ』→『その他設定』→『カエレバヨメレバをJINオリジナルデザインにする』にチェックを入れる。
↓
５．ワードプレステーマ『jin』に合わせたCSSデザインが適用された『カエレバヨメレバ』パーツの設置完了です。
全体的には設置までこんな流れになります。
『カエレバ』の設定方法
カエレバヨメレバをブログパーツとして使える様にする為には、まずカエレバヨメレバのサイトで基本情報を設定する必要があります。
具体的な設定方法を解説していきます。
カエレバデザインのサイトにアクセス
まず、カエレバデザインのサイトにアクセスします。
項目に必要事項を入力
「ユーザーデーター入力」の項目に、必要事項を入力していきます。
AmazonアソシエイトIDの設定
アマゾン・アソシエイトにログインすると、画面の右上にIDが表示されています。
表示されているIDをAmazonアソシエイトの項目にコピペします。
Amazonアソシエイトに登録がまだの場合は、登録&審査通過をする必要があります。
楽天アフィリエイトIDの入力
楽天のアフィリエイトはアマゾンの様な審査は特にありません。
普段使用している楽天市場のIDがあればそれを利用する事ができます。
「ユーザーデーター入力」の項目に記載のある
楽天アフィリエイト
例:aaaaaaaa.bbbbbbbb.cccccccc.dddddddd
(楽天ウェブサービス用のIDを利用します 調べ方)
の”調べ方”のリンクをクリックし、リンク先の楽天ページでログインします。
ログインすると、上記画像のページが表示されIDが確認できます。
表示されたIDをカエレバの楽天の項目にコピペします。
Yahoo!ショッピング、バリュコマの情報の入力
バリュコマとは、
バリューコマース株式会社が運営しているASP（アフィリエイトサービスプロバイダ）の事です。
ASPは、ウェブサイトでの広告掲載の依頼をしたい方と、広告を掲載したい人をつなげるアフィリエイト広告の仲介のサービスをしてくれています。
バリューコマースは『ヤフー株式会社』が主要株主で、ヤフー株式会社に属している会社です。
ですので、バリューコマースはヤフーと関連しているサービスの紹介に強いASPです。
そんな事情もあり、
「Yahoo!ショッピング内の商品を紹介したいなぁ」という場合は、バリューコマースに登録しておく必要があります。
登録がまだの方はまず、バリューコマースにて登録を済ませます。
合わせてバリューコマース内で「ヤフーショッピング」と連携を済ませておく事で「カエレバヨメレバ」のYahoo!ショッピングの自動生成リンクを使える様になります。
Yahoo!ショッピングの「カエレバヨメレバ」設定用のコードは下記の手順で取得します。
「広告検索/作成」→「提携済」→「ヤフーショッピング」→「広告作成」→「MyLink」
と進んで行きます。
上記画像ページが表示されたら「コピーしたURLを貼り付ける」の項目に『https://shopping.yahoo.co.jp/』などの適当なアドレスを入力します。
「広告となるテキストを入力する」には、『サンプル』など適当な文字列を入力しておきます。
その後に「MyLinkコードを取得」ボタンをクリックします。
すると、コードが表示されるので、そこから
sid = 0123456
pid = 012345678
の数字の部分を抜き取り、カエレバのヤフーショッピングの枠内にコピペします。
これで、Yahoo!ショッピングのリンクの設定ができます。
設定の保存方法と注意点
「Amazon」「楽天」「Yahoo!」ショッピングへのリンク作成コードの設定を済ませたら、最後に「ユーザーデーター入力」表の一番下にあるの「保存」ボタンをクリックして設定を保存します。
これでカエレバの基本設定は終了です。
ちなみにデーターの保存には、「カエレバヨメレバ」サイトの説明にもある通り、『Cookie』を利用しています。
ChormeやSafariなどのブラウザの『Cookie』機能をONにしていないと保存できず、その都度入力しなければいけなくなるのでご注意ください。
『もしもアフィリエイト』『バリューコマース』のアカウントがあれば、もっとシンプル設定する方法もあります。
ここまで、「アマゾン」「楽天」「ヤフー」の各サイトから直接個別に情報をとってきて設定する方法を解説いたしました。
もう１つの方法として、『もしもアフィリエイト』または『バリューコマース』のアカウントを使用して、もっとシンプルな手順で設定する方法もあります。
たとえば、もしもアフィリエイトのみの登録で設定を済ませる場合は、
『もしもアフィリエイト』に登録する。
↓
もしもアフィリエイトのサイト内で「Amazon」「楽天」「ヤフーショッピング」との提携を済ませておく。
↓
もしものアフィリエイトのサイトの中から該当コードを取得し「もしも」の枠内にコピペしていく。
という流れで設定を行います。
ただ、カエレバを設定していく際には、既に各ショッピングサイトとアカウントの連携を済ませておく必要があります。
Amazonとの連携の審査は既にアマゾンアソシエイトの審査を通過していても、もしもアフィリエイトから提携を申請し、承認されるまでは案外時間がかかったりしますのでご注意ください。
そのことを踏まえた上で、『もしもアフィリエイト』『バリューコマース』にアカウントをもっており、アマゾン、楽天、Yahoo!ショッピングと既に提携を済ませる事ができているなら、この方法もオススメです。
カエレバのコードを作成＆ブログに貼り付ける方法
ブログにカエレバのブログパーツを設定するには、上記基本設定を済ませた後に、一旦ページ上部に戻ります。
ページ上部に戻ると『商品キーワード』の検索窓があるので、掲載したい商品の検索をします。
『Amazonで商品を検索』→『商品の正式名称を確認』→『正式名称でカエレバの検索窓で検索』という手順で検索すると、該当の商品の検索精度をあげる事ができます。
検索窓右側にある選択カラムより、『楽天価格ナビ』『楽天市場』『ヤフーショッピング』どのサイトをメインで検索をかけるか選び『検索』をクリックします。
検索をかけるとずらっと商品のリストが表示されます。
『商品詳細ページ』でメインのリンク先を確認し問題が無ければ『ブログパーツを作る』をクリックします。
『ブログパーツを作る』をクリックすると１つ前のページに移動します。
下の方にスクロールしてみると『画像+リンクリスト ブログパーツ生成』の項目に、先ほど選んだ商品ページのブログ設置用パーツがおおかた出来上がっています。
表示されている商品画像に間違いがなければ、①の部分を調整し詳細を設定していきます。
まず 、『デザイン』の項目は『amazlet風-2（cssカスタマイズ用）』を選択します。
次に下にある、『Amazon』『楽天市場』『Yahoo!ショッピング』にチェックを入れます。
ちなみに、後ほどjinのオリジナルデザインを適用していくので、画像の大きさなどの設定はそのままで大丈夫です。
①の設定が終えると、設定に応じたコードが②の部分に自動生成されています。
コードをコピーしてしてブログの表示したい部分に貼り付けます。
『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オリジナルデザインにする』にチェックを入れます。
これでWordPressテーマjinでの設定は完了です。
まとめ
お疲れ様でした。
以上で、カエレバデザインをブログに設置完了です。
簡単な設定で便利なブログパーツができるので、使ったことの無い方は、是非試してみて下さい。
このブログが同じ様なところでつまずいている方の参考になれば幸いです。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
