Web

機能性抜群なカエレバの導入からオシャレなデザインに変更するまでのやり方

Amazonや楽天などのアフィリエイトリンクを貼る際に、オシャレでクールなデザインで貼りたいですよね。

そんなオシャレさんなあなたにはカエレバをオススメします!

ただ、初期デザインではシンプル過ぎてあまりオシャレとは言えません。

けど大丈夫!!
多くのブロガーさんがオシャレなデザインのCSSを公開されており、誰でもオシャレなデザインなブログパーツを作ることが出来ます!

WordPressでのカエレバの導入方法からデザインの変更手順(CSSの貼り方など)を分かりやすくご紹介します!

 

カエレバとは?

かん吉さんという方が開発された、複数のショップリンクを同時に掲載出来るアフィリエイトブログパーツです。

http://kaereba.com/#ds

(※ゆきひーさんのCSSをお借りしています。)

このような感じで、Amazonや楽天など複数のリンクを掲載出来る為、ユーザーの取りこぼしを減らすことが出来ます。

他にも、Yahoo!ショッピングや7netやベルメゾン、セシール、もしもなどのリンクを掲載出来ます。

 

Simple Custom CSSの導入

今回、デザイン変更を行う為、CSSを触ることになります。

触ると言っても好きなデザインを見つけてCSSをコピーしてペーストするだけです。

ただ、ブログテーマに直接書き込むのは少し怖いですよね。

そんな時は、このプラグインを使いCSSを入力するとトラブルも少なく後の編集も非常に楽です。

インストールして有効にするだけでOKです。

インストール後、管理画面のサイドバーの外観内に「カスタムCSS」という項目が追加されていると思います。

これが表示されていれば準備OKです。

 

カエレバの導入

○準備

カエレバにアクセスし、利用上の注意・禁止事項に目を通してください。

そのすぐ下にある「ユーザーデーター入力」にサイト名と各アフィリエイトIDを入力してください。

それぞれの調べ方も記載されていますので、参考にしながら入力してください。

入力が終わったら、すぐ下にある保存ボタンをクリックして保存してください。

 

○好きなデザインを探す

「カエレバ デザイン」「カエレバ カスタマイズ」などで検索すれば公開されているデザインがたくさん出てきますので、お好きなデザインをお選びください。

デザインが決まったら、公開されているCSSをコピーしてきて、Simple Custom CSS導入により追加された項目「カスタムCSS」に貼るだけです。

ちなみに、当ブログで利用しているデザインは、ゆきひーさんという方が作成されたデザインをお借りしています。

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!

 

○ブログパーツを作成する

カエレバの上部にある商品キーワードから掲載したい商品を検索します。

検索結果から掲載したい商品を選び、「ブログパーツを作る」をクリック。

これでブログパーツが作成されますので、あとは細かい部分を設定します。

デザインの選択ですが、配布されているCSSにより異なりますので、指定されているデザインを選択してください。

記載が無かったり分からなければ「amazlet風(改)-1」で試してみてください。

あとは、商品キーワード横の選択項目で、リンクボタンの文面をカスタム出来ます。

「なし」が選択されていれば、上の画像のように表示されます。

「で購入」を選択すれば、[Amazonで購入] [楽天市場で購入]のように表示されます。

他の項目はあまり弄らなくても良いと思います。

ただ、Amazonや楽天などのチェック忘れがないように注意してください。

変更があった場合は更新ボタンで更新をかけて、すぐ下のhtmlをコピーします。

 

○ブログパーツを貼る

WordPressを使っている場合、多くの方は、ビジュアルモードで記事を書いていると思います。

この場合、htmlはそのまま文字列として表示されてしまいます。

そのため、記事編集画面右上にあるテキストタブをクリックし、テキストモードに切り替えます。

そしたら、先ほどコピーしてきたブログパーツのhtmlを貼ります。

ビジュアルモードに戻せば反映されていると思いますので、すぐに確認出来ます。

 

書籍などの商品リンクはヨメレバで!

当記事では、「カエレバ」をご紹介しましたが、書籍や雑誌などの商品リンクを作成する場合は、「ヨメレバ」の利用を推奨しています。

カエレバにはない、書籍関連に特化した機能が搭載されていますよ!