シンプリティにカエレバをカスタマイズして設置してみた

こんにちは、飲んべいです。

飲んだくれていた休みが終わりました。

仕事が始まり、ようやく休みボケから解放されそうです。

今年も一年頑張ろう。

さて、今回はカエレバについて説明します。

私のサイトは、「WordPress」で使っているテーマは「Simplicity2」で運営しています。

「Simplicity2」は完全レスポンシブ対応になっていますが、カエレバをカスタマイズして使うに表示が崩れたりしました。

そこで、「Simplicity2」でカエレバを使うにあたり、注意と参考にさせてもらったサイトを紹介したいと思います。

カエレバ

カエレバって何?

カエレバは、サイトなどで商品を紹介するに優れています。

なぜなら、紹介したい商品のリンクを一つにまとめることができます。

リンクをまとめるとはどのようなことでしょう?

例えば、楽天・Amazon・ヤフーショッピングがあるとします。

同じ商品を紹介したい場合、楽天・Amazon・ヤフーショッピングの商品を各リンクごとに、サイトに載せなくてはなりません。

その場合、見た目も作業効率も悪くなります。

しかし、カエレバを使うだけで同じ商品のリンクを一つにまとめることができますので、作業効率や見た目もよくなります。

かん吉さんという方が考えた優れたツールです。

カエレバはどのようにして使えるの?

カエレバには、申請などはなく「商品リンクサイト・カエレバ」に入り自分の提携しているASPサイトのIDを入力するだけで使うことができます。

カエレバの使い方などはこちらを参考にして下さい。

参考→カエレバで商品リンクをまとめよう カエレバ登録 使い方

※カエレバの他にはヨメレバ・トマレバ・ポチレバがありますが使い方は同じです。

カエレバのカスタマイズ方法

カエレバをカスタマイズなしで、使うとこのように表示されます。

私の場合は、カエレバをカスタマイズしていますので、ショップリンクのボタンは通常とは変更しています。

現在、私がカエレバを使うとこのように表示されます。

カスタマイズをすれば、ショップリンクを一つにまとめて、ボタンの配置や色や形はこのようになります。

※カエレバをカスタマイズするには、Simplicity2「子テーマ」をダウンロードして、子テーマの「style.css」にコピーしてください。

参考→WordPress(ワードプレス) 初心者が見出しタグを変更するには? Simplicity2の子テーマダウンロード方法

カスタマイズをするに参考にしたサイト

カエレバのカスタマイズって難しそうって思うかもしれませんが、カスタマイズと言ってもコピペでできます。

親切な方が、サイトにコピペでいいよと言っていますのでまさに神ですね。

そこで、参考にしたサイトを紹介します。

「4mirai」

https://4mirai.com/how-to-display-yomeleba-kaeleba-beautifully-with-simplicity

シンプルなボタンで見た目が綺麗、私も参考にして使わせていただいています。

PC、スマホとコードがありますのでわかりやすいです。

「RoughLog」

https://rough-log.com/4854

こちらのサイトで紹介しているコードは、完全レスポンシブ対応にもなっています。

初心者の私でもわかりやすくコピーできました。

カエレバをカスタマイズして表示が崩れたら?

カエレバカスタマイズをコピーして「style.css」に貼り付け更新、どのように表示されているか確認してみたら、表示が何か違ったり、崩れたりしている。

なぜだろう?と思ったら、大体は「Simplicity2カスタマイズ」の完全レスポンシブ対応にチェックが入っているからだと思います。

完全レスポンシブ対応のカスタマイズなら大丈夫ですが、対応していない物もあります。その場合はチェックを外してください。

この部分のチェックを外せば表示崩れはなくなると思います。

※コピーしたコードが全て合っている場合。

※もしおかしくなって戻せなくなれば、バックアップで戻してください。

まとめ

カエレバはすごく便利なツールです。

商品のリンクをまとめて表示させれば、訪問してきてくれた方にもストレスがなくなると思います。

ASPサイトの登録などはこちらを参考にして下さい。

参考→【初心者】アフィリエイトの始め方 用意する物
参考→【アフィリエイト初心者に】おすすめASPを紹介するよ
参考→【Simplicity2】500エラーバックアップなしの解決方法
参考→間違いない!WordPress初心者 おすすめプラグイン
参考→【Simplicity2】カスタマイズ グローバルナビ設定方法

最新情報をチェックしよう!