カエレバのカスタマイズ方法まとめ。ショップリンクもボタン化

カエレバカスタマイズ

前回はAmazonや楽天等物販のアフィリエイトに非常に便利なツール「カエレバ」の基本的な使い方を紹介したので今回は「カエレバ」のカスタマイズ方法を解説していきます。

カエレバのデザインは色々

カエレバのカスタマイズについては探せば色々なサイトで紹介されていてコピペでカスタマイズ完了なんてサイトがあって非常に便利です。

今私が使っているデザインも色々な方のデザインから少しずつ変更して使ってます。CSSは以下です。

カエレバ使い方-17

こちらからも色々なデザインが探せますので色々なデザインを見てみると良いかもしれません。

ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ

以上でカスタマイズは完了。

ただ、コピペするよりも仕組みを知って少しでも知識を身につけたいというタイプの方もいると思いますので、簡単にCSS作成の手順だけ紹介してみます。

カエレバを部分的にカスタマイズしていきたい場合

今回はカエレバの背景色やリンクの色、文字の色、ショップリンクをボタン化というようなカスタマイズをしていきます。ある程度自分でデザインできるようにコメントを入れながら1つ1つ解説していきますね。

基本的なCSSを追加しておく

カエレバのリンク作成画面「デザイン」の部分で「amazlet風-2(CSSカスタマイズ用)」というのを選んでリンクを作成していく訳なんですが、この「amazlet風-2(CSSカスタマイズ用)」を選択すると他のデザインと違ってほとんどCSSの記述がないリンクコードができます。

ほとんどCSS記述のない状態からCSSを書いて行くのは結構面倒だし大変。という訳でCSSがある程度付属しているデザインのCSS部分だけを抜き出して変更したい部分だけを変更したらよくない?という結論になりました。

という訳なのでとりあえずある程度CSSが付属しているデザイン「amazlet風(改)-1」というデザインのCSSを抜き出してみる事にしました。

カエレバカスタマイズ-1

↑このデザインのCSSをまずは抜き出しますので、ブログのスタイルシート(CSS)の一番下にでも追加しておいて下さい。

こんな感じ。このCSSを追加しておいて必要な部分だけを変更していけば良い訳です。

さて、CSSの記述に関しては下に書いた物(後から書いた物)が優先されます。つまり同じ記述が2つあっても後から書いた物が優先されるので、上記コードをCSSに貼り付けてその下(後)に変更したい部分のCSSをどんどん追加して行く方が慣れていない人にはやりやすいと思います。

そのためまずは基本となるCSSを記述しておき、変更する部分を追加していきましょう。

カエレバ全体の背景色の変更と枠線

カエレバのリンク全体の背景色は自分のサイトのカラーに合わせて変更する事もできます。分かりやすいようにグレーにしてみました。グレーになっているこの部分です。

カエレバカスタマイズ-4

この部分の背景色を変更するには次のコードをCSSに追加してカラーを変更しておきましょう。

また、このカエレバのリンクの外側に枠線を付けたい場合には次の記述もできます。

  • border:枠線
  • 1px:これが枠線の太さ
  • #000:ここが枠線の色

となりますので、好きな数値やカラーに変更して下さい。

テキスト部分をカスタマイズ

商品画像の部分で変更する部分ってほとんどないので、リンクの「テキスト部分」をカスタマイズしてみましょう。このカエレバのテキスト部分は3つの部分に分解できます。それぞれにクラス名が付けてあります。

カエレバカスタマイズ-3

  • 商品名(posted with カエレバも含む)「.kaerebalink-name」
  • posted with カエレバ「.kaerebalink-powered-date」
  • 商品詳細「.kaerebalink-detail」

それぞれに名前がついているのでこのようにカスタマイズが可能です。

最後の「 } 」までスクロールしてコピペ下さい。この商品名の部分は「posted with カエレバ」の部分も含む領域ですが「posted with カエレバ」部分は個別にカスタマイズする必要があります。商品名と同じような文字の大きさや色にするのであればこのように追加。

これも最後の「 } 」までスクロールしてコピペ。テキスト部分の3番目「商品の詳細部分」も文字の大きさや色を合わせておきましょう。この部分はリンクではないので簡単に。お好みで調整して下さいね。

以上でテキスト部分は終了。続いてショップリンクの部分をボタン化してみましょうか。

ショップリンクをボタン化

ショップ部分には「Amazon」「楽天」以外にも「Yahoo!ショッピング」とか他にも色々ありますが、やり方は同じなので「Amazon」と「楽天」を基準に解説してみます。

ショップ部分をボタン化するとこんな感じになります。

カエレバカスタマイズ-5

こんな感じにボタン化するには「外枠の線」を付けて「背景色」を付けて「ボタンの幅」を決めるという感じでやっていくとボタンになります。それから位置調整の記述もしていくことになります。

ちなみに各ショップのリンク部分はこのようにクラス名が付けられています。

  • Amazon「.shoplinkamazon」
  • 楽天「.shoplinkrakuten」
  • Yahoo!ショッピング「.shoplinkyahoo」
  • ヤフオク「.shoplinkyahooAuc」
  • 7net「.shoplinkseven」
  • ベルメゾン「.shoplinkbellemaison」
  • セシール「.shoplinkcecile」
  • 価格コム「.shoplinkkakakucom」

とりあえず「Amazon」と「楽天」の2つを利用すると仮定してCSSを書いてみましょう。他のショップも同じように書けます。

それからショップのリンク(Amazonとか楽天とかの文字)部分ね。アンダーライン消したり文字色を変えたり。

これAmazon「.shoplinkamazon」と楽天「.shoplinkrakuten」一緒に書いていますが、もちろん別々に書くこともできますので、それぞれフォントの色や背景色を変更したい場合には別々にしてCSSを書いてもOK。

それと他のショップリンクも全部同じデザインのボタンでいいなら上記全てのクラス名(Yahoo!ショッピングとか7ネットとか)も「 , 」で区切って全てのクラス名を追加してもOKです。

ここのボタンで設定する「width」でボタンの横幅が決まります。ここの数値を大きくしすぎるとボタンが入らなくて下に「カラム落ち(下に落ちちゃう)」するので注意。それとボタンを横に3つ並べたい場合等にはこの「width」を30%くらいで良いと思います。

こんな風に3つ並びます。

カエレバカスタマイズ-6

この横幅に関しては確認しながら調整しておく事をおすすめします。

あ、それからボタンにカーソルが乗った時に色を変えたりもできるのでついでに追加しておきましょう。

という感じで一応PCページの表示はこれで大体できてきましたが、これで終わりではないのです。今度はスマートフォン用のCSS調整が必要です。

ちなみにWordPressなどのレスポンシブデザイン以外のブログ、例えば無料ブログなどはPCとスマートフォンのCSSが別になっているので、スマートフォン版のCSSにも同じ記述が必要なので注意。

スマートフォンページ用のCSSを追加

スマートフォンは画面の横幅が狭いのでPCページでのカエレバのように画像を左に寄せてしまうとちょっと厳しいです。こんな感じになってしまいます。

カエレバカスタマイズ-7

という訳なのでスマートフォン表示では「画像の左寄せ」を解除してボタンも1列に1つずつに調整してこんな感じにしてみました。

カエレバカスタマイズ-8

それではスマートフォン用のCSSを追加していきましょう。まず必要になるのは次の記述(WordPressの場合)。

これは簡単に説明すると「ブラウザのサイズが599px以下の場合には」という条件分岐ですね。この条件分岐の中にスマートフォン用のCSSを書いていけばいいという訳です。代表的な7インチのタブレットのブラウザサイズが600pxなのでそれより小さい599px以下という条件分岐にしておきました。

無料ブログなどの場合はスマートフォン版のCSSが別になっている場合が多いので、条件分岐の部分の中身だけスマートフォン版のCSSに追加。WordPressの場合はそのまま普通のCSSに追加でOK。

これも最後の「 } 」までスクロールしてコピペ。最後に「 } 」が2つあるので忘れずに。

という訳で一応スマートフォンのCSSも完成。後はお好みで微調整をしながらPCとスマートフォン両方の表示を確認をしておきましょう。

それから念のため再度確認しておきますが、このカスタマイズを適応させるにはカエレバのデザインで「amazlet風-2(CSSカスタマイズ用)」を選択して「更新」ボタンクリックしてリンクを作成する事をお忘れなく。

カエレバカスタマイズ-9

以上でカエレバのカスタマイズは終了です。

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

カエレバのカスタマイズ方法まとめ。ショップリンクもボタン化”に22件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. シズ

    しげぞう様

    さっそくの返信ありがとうございます!
    ご指摘頂いた通りに修正したらすぐに直りました!!

    CSSの知識がほとんどなく、ご指摘いただいた箇所は完全に見落としていました。
    本当に助かりました。

    カスタマイズの件では何度も助けていただき、本当に感謝しております。ご親切にいつも対応頂き、ありがとうございます!!

  2. しげぞう 投稿作成者

    シズ様

    コメントありがとうございます。シズ様のCSSですが、以下のような記述があります。

    この記述の中に「width:100px !important;」というのがあって、これが原因ではないかと思います。

    試しに上記の「width:100px !important;」という部分を削除して代わりに「max-width: 100%;」としてみてもらえますか?

  3. シズ

    いつも参考にさせていただいています、シズと申します。
    以前も何度か質問をさせていただいたのですが、どれも解決していただき大変感謝しております。

    お忙しいところ恐れ入りますが、再度お力をお借りできないでしょうか?

    こちらの記事を参考にカエレバヨメレバのカスタマイズをしたのですが、どうしてもスマホ表示したときに画像がセンターにならず、左寄りのままになってしまいます。

    左寄せ解除のCSSとして、

    .booklink-image, .kaerebalink-image {
    float:none !important; /* 画像の左寄せを解除 */

    上記を入力しているのですが、それでもまったく反映されません。
    何か解決策などありましたらお手すきの際で結構ですのでご教示いただけますでしょうか?

    念のためにカエレバを貼っている記事のURLを記載しておきます。

  4. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。ホントですね!治ってますね。そんな方法があるとは知りませんでした!勉強になりました。

    えっと、Seesaaブログでのスマホページの位置調整という事なので、「スマホページ用のスタイルシート」に次のコードを入れて試してみて下さい。

    中身が2つに分かれていて、スマホでのボタンの左に余白を20px入れて真ん中くらい?に調整できるか確認をお願いします。数値は後で調整して下さい。

    後半の部分はボタンの太さをpaddingで変えれるかな?と思いましたので、とりあえず10pxにしてみましたが、こちらも後で調整してみて下さい。

    以上一度試してみて上手く行かない場合には再度コメント下さい。またちょっと調整してみます。