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

カエレバカスタマイズ

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

MEMO

カエレバを使うためにはAmazonや楽天、Yahoo!ショッピングなどと提携しておく必要があります。

本家Amazonアソシエイト経由だと報酬が5,000円以上にならないと振込みされないって点と毎回振込手数料が引かれるデメリットがありますし、楽天は報酬が現金ではなくポイントになってしまいますので正直本家Amazonや楽天を使うメリットはありません。

ASP(もしもアフィリエイト)経由で前述した問題は全て解決しますし、振り込み報酬の手数料も「もしも負担」という神対応なので本家Amazonを利用するよりも「もしも経由」がおすすめです

もしもアフィリエイト詳細ページ

カエレバ・ヨメレバ・トマレバのカスタマイズについて

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

今回、カエレバ・ヨメレバ・トマレバのカスタマイズは「Rough-Log様」のカスタマイズを参考にさせて頂き、WordPress用と無料ブログ用に少しだけ変更をしてみました。すごく参考になりました。というかオリジナルほぼそのままです。

カエレバのリンク

ヨメレバショップリンク

トマレバショップリンク

参考:CSSコピペでOK!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!|Rough-Log様

ほぼそのまんまなのですが、オリジナルでは2列表示だったスマホのボタンを個人的にいつも使うボタンが3つなので文言なども追加できるように縦1列表示に。

カエレバリンクスマホ変更

あと、無料ブログ用にPCとスマホのスタイルを分けてCSS書いてみたのですが、「Seesaaブログ」で「もしものリンク」という組み合わせで表示崩れというかボックスができたので対処するために少し変更しました(原因は無料ブログ側の問題かと思われます)。

カエレバスマホで表示崩れ2

MEMO

カエレバ・ヨメレバ、トマレバのカスタマイズを適応させるにはそれぞれのサイトで「amazlet風-2(CSSカスタマイズ用)」を選択して「更新」ボタンクリックしてリンクを作成する事をお忘れなく。

カスタマイズ用CSSを選択

WordPressでのカエレバ・ヨメレバ・トマレバのカスタマイズ

現在ほとんどのWordPressがレスポンシブデザイン。PCやタブレット、スマホ用のCSSを1枚のスタイルシート(CSS)で条件分岐しながら書く事ができますので、コードをまるっとコピーするとPCもタブレットもスマホもカスタマイズ完了します。

なお、スタイルシート(CSS)は下に書いたもの(後に書いたもの)が優先的に反映されますので、コードを追加するのはCSSの一番下でOKです。

WordPressの場合はRough-Log様のコードほぼそのまま使う事ができました。スマホ表示の部分だけ変更でOKでした。

はてなブログやSeesaaブログなどの無料ブログの場合

はてなブログ、Seesaaブログ、ファンブログのような無料ブログの場合はPC用のスタイルシートとスマホ用のスタイルシートが分けられていますので、それぞれのスタイルを分けて記述する必要があります。

それぞれ別々にCSSが用意されている無料ブログが多いですが、スマホ用のCSSが編集できないブログはカスタマイズはできません(アメブロなど)。

ちなみにFC2ブログはPC版スマホ版が別れているものとレスポンシブと両方のテンプレートがあるのでそれによって違いますので注意。

PC版とスマホ版別々にCSSを記述する必要があります。

PC版のスタイルシート(CSS)

スマホ版のスタイルシート(CSS)

以上でカエレバ・ヨメレバ・トマレバのカスタマイズでした。

最終更新日:2018/07/23

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

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

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

  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にしてみましたが、こちらも後で調整してみて下さい。

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