簡単!カエレバ・ヨメレバ・トマレバの設置方法とカスタマイズ方法

switch

前々から当サイトに設置したいと思っていたブログパーツ「カエレバ」。

今回、設置方法を調べていたら、カスタマイズしてカッコ良く表示させるやり方まで発見。

初心者ながら、導入からカスタマイズまでやってみました。

(こんな感じになりました)

ブログ初心者のわたしでも、簡単に設置・カスタマイズすることが出来たので、これから導入を考えている方は是非参考にしてみてください。

記事が増えてきてしまうと大変だと思うので、今のうちにやり方を覚えておくことをオススメします。

スポンサーリンク
トップページ 広告W336×280

追記:「ヨメレバ」「トマレバ」も導入しました!!

ブログへの設置方法は「カエレバ」と至って同じです。

ここでは、「カエレバ」の導入・設置方法を例に挙げます。

このやり方をしっかり覚えたら、この2つの導入・設置も簡単です(*^o^*)

カエレバとは

「わかったブログ」管理人のかん吉さんが開発したブログパーツで、使用することにより「記事を載せる側」にも「見る側」にもメリットを生み出してくれるパーツです。

スクリーンショット 2016-02-26 6.01.04

記事を書く側からすると、今までひとつひとつ記事に貼り付けていたASPプログラムのリンクを一本化することにより、リンクをひとつだけ貼れば良くなります。

これにより、記事に掛ける時間が短縮出来ます。

見る側からしても、商品を扱っている複数のサイトを同時に見ることが出来るので、価格を比較しながら選べるので便利です。

カエレバ・ヨメレバ・トマレバの導入・設置方法

各ASPプログラムへ登録する

設置するには、まず各ASPプログラムに登録しておく必要があります。

リンクを一本化するにあたって、それぞれの情報が必要となるからです。

まだ登録をしていない方は、先に登録することをオススメします。

*自分が必要だと思うものだけでOKです。

が、ASPによっては登録しておくことでお得なこともあるので、念のため主なASPに登録しておくことをオススメします♫

ちなみに「もしも」では、獲得した報酬金額に対して、プラス10%程度のボーナスがもらえる「W報酬」制度があるので、個人的にはオススメです。

ここだけ頑張れば、あとはサイトに載せるとき楽なので、頑張りましょう\(^o^)/

もうすでに登録している方は、「カエレバ」公式サイトを開き、サイトを下にスクロールして「ユーザーデーター登録」というところを見付けてください。

idの入力

そちらに、それぞれのidを入力していきます。

このとき注意しなければいけないのは、ここで言うidとは各プログラムに登録した際に自分で定めたIDではありませんのでご注意を!

(わたしは最初、自分で定めたIDを入力してしまいました。笑)

ここで入力するidは、アフィリエイトIDのことです。

例えば、amazonは簡単で、登録後にログインしたページのすぐ左上に出ているトラッキングIDを入力すればOKです。

スクリーンショット_2016-02-26_14_13_04

  • 楽天の「メインリンク用」も簡単で、登録後、「カエレバ」公式サイトのid入力欄、「調べ方」をクリックすればすぐにわかります。

それをそのままコピペすればOKです。

このような感じで、各idは「調べ方」をクリックしていくと方法が載っているので、それを見ながらひとつずつ登録していきましょう。

*自分が必要だと思うものだけでOKです。

<わたしなりの登録のコツ>

簡単そうなのから先に入力していく。

  • A8net」開いて →「7net 」と提携すればOK。

*ヤフオクは見つからず提携出来ませんでした。

  • リンクシェア」開いて →「ベルメゾン」「セシール」「7net」と提携すればOK。

登録が完了したら、「保存」をクリックします。 開発者かん吉さんより

ユーザーデーターの保存はCookieを利用しているため、Cookie機能をONしてください。

とのことなので、Cookie機能をオンにしましょう。

Cookieオンにする方法(Mac)

Windowsはやり方がわからないのですが、「Cookie機能」「オン」「Windows」などで探すと出てくると思いますので、そちらを参考にしてください。

すみません(><)

でも、ほとんどの場合はすでに「オン」になっているはずですが、こわい方は念のためコピペしてどこかにメモしておくことをオススメします。

実際にブログパーツを作成してみる

では、実際にアイコンを作成してみましょう。

サイトの右上にある検索欄に、自分がサイトで紹介したい商品名を入力し、検索してみましょう。

スクリーンショット_2016-02-26_15_37_14

この時、検索ボタンの左側は選択可能ですが、開発者のかん吉さん曰く

検索先はアマゾン、楽天、もしも、Yahoo!から選べます。メインの商品画像とリンクは検索先のものになります。メイン画像&リンクは、リンク切れの少ないアマゾンの利用をお奨めします。

と推奨されているので、ここは「amazon」のままにしておいたのが良さそうです!

商品一覧が出てきたら、「ブログパーツを作る」をクリックします。

ここで表示する設定を選ぶことが出来ます。

スクリーンショット_2016-02-26_18_03_18

  • デザイン → カスタマイズするので、amazlet風-2(cssカスタマイズ用)」を選択しましょう。

カスタマイズする予定のない方でも、後々したくなったときに便利なので、「amazlet風-2(cssカスタマイズ用)」を選択することをオススメします。

  • 「なし」のところはなしのままでOKです。

  • ご自分のサイト名商品名が合っていることを確認します。

  • 「rel」についてはこちら、開発者のかん吉さんはこのように述べています。

rel=”nofollow”は、ユーザーからの希望で付けられるようにしました。自己責任でご利用下さい(各ASPの利用規約に抵触することがあります)

「nofollow」についてはこちらをご覧ください。

特定のリンクに対して rel=”nofollow” を使用する-Google

「カエレバ」開発者かん吉さんの「わかったブログ」

わたしは、Google推奨ということもあり、「nofollow」にしてリンクを作成しています。

これは自己判断となりますが、付けていないとサイトの評価が下がる危険性もあるので、各ASPの規約をよく読んで選択することをオススメします。

  • 最後に、表示したいサイト名を選択します。

コードをコピーして、自分のサイトに貼り付けます。

このような状態で表示されていると思います。

スクリーンショット 2016-02-26 18.19.40

カスタマイズ方法

このままでも十分見やすいですが、各ASP名をボタン表示にすることで見やすくなります。

これは、カスタマイズとカッコ良く言っちゃってますが、正直ただコピペしただけです。

参考にさせていただいたサイトはこちら。

4miraiさんのサイト

とてもわかりやすく書かれていて、参考になりました!!

どうもありがとうございます。

書かれているコードをコピペしますが、ここでSimplicityを使用している方は要注意です!!

必ず、「子テーマ」のstyle.cssに貼り付けてください!!

「親テーマ」に貼り付けてしまうと、アップデートされた際に消えてしまう可能性があります。

「Simplicity」開発者、わいひらさまより

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。 それを防ぐために、テーマファイルを編集する場合は必ず子テーマをカスタマイズし、インストールすることをおすすめします。 子テーマをカスタマイズすることであ、その後のメンテナンスにかかる労力が大きく削減されます。

なので、まずは「子テーマ」をインストールしてから行うことをオススメします。

「子テーマ」インストールはこちらから「Simplicity」公式サイト

インストール出来たら、「Simplicity2 child」の「style.css」にこちらのコードを貼り付け保存しましょう。

サイトへ戻り、更新して表示させてみましょう。

すると、こんな感じになっていると思います。

ボタンが3つ並んでて、とってもスッキリ・見やすくなってますね(*^o^*)

次に、スマホでの表示の仕方を設定します。

同じように、こちらのコードをコピペして、「Simplicity2 child」の「mobile.css」に貼り付けて保存しましょう。

スマホで表示させるとこのように変化!

(ここは画像ですみません。笑)

スクリーンショット 2016-02-26 18.11.34

これは、なんともカッコイイ\(*^o^*)/

ということで、初心者でも簡単にカスタマイズすることが出来ました。

まとめ

初心者だと、どうしても敬遠しがちなカスタマイズ。

でも、ゆっくりやれば簡単に出来ちゃうこともたくさんあるので、まずはトライしてみましょう(*^o^*)

頑張ったら頑張った分だけ新しいことを覚えられますし、サイトが豊かになっていきます。

見た目がカッコ良くなるのが嬉しいですよね♫

今回設置した「カエレバ」のおかげで、自分のオススメしたい商品が少しでも誰かの目に留まりやすくなっていることを祈ります!

便利なブログパーツを開発してくださったかん吉さん、どうもありがとうございます。

また、コードで参考にさせていただいたブロガーの皆様にも感謝です。

あとは、サイトに訪れてくれた方々が欲しくなるような記事を書けばいいだけですね\(^o^)/

わたしも頑張るので、皆さんも一緒に頑張りましょう!!

この記事を読んでいただき、どうもありがとうございました!!

またお会いしましょう。

簡単!カエレバ・ヨメレバ・トマレバの設置方法とカスタマイズ方法
この記事をお届けした
ポントピの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
トップページ 広告W336×280
トップページ 広告W336×280

役に立ったらからシェア♪

気になるからフォロー♪

トップへ戻る