WordPressの使い方・Tips発信サイト

「カエレバ・ヨメレバ・トマレバ」のCSSサンプル

カエレバCSSサンプル

Amazonアソシエイトや楽天アフィリエイトなどの商品リンクをまとめて設置することができる便利なサービスのカエレバ、ヨメレバ。そして楽天トラベルやバリューコマースなどのASPから宿泊情報をまとめて設置することができるトマレバ。

非常に便利なサービスですが、デフォルトのままだとリンクボタンが少々寂しいデザインです。

ユーザーのクリック率を上げるためにも役に立つリンクボタンのカスタム用CSSのサンプルを用意しましたので、是非ご利用ください!

サンプルCSS

ここでは各サイトをまとめてカスタムすることができるCSSサンプルを紹介します。
CSSはワードプレスのテーマカスタマイズ画面「追加CSS」に入力すればOKです。

ヨメレバで作成したリンクです。デフォルトの状態だと以下のようにリンクボタンではなくテキストリンクになっているので少し分かりにくい印象があります。

カエレバ デフォルト状態

今回、紹介するCSSを追加することで下画像のようにリンクボタンが追加されクリックされやすい仕様に変更することができます。

カエレバ CSS追加後

CSSはヨメレバ、カエレバ、トマレバ、全てのサイトで同じデザインに統一されているので、1つの記事内でカエレバとヨメレバの商品リンクがあっても違和感なく設置することができます。

カエレバサンプル

カエレバ CSS追加後画面

トマレバサンプル

トマレバ CSS追加後画面

尚、全てレスポンシブ対応になっているので閲覧する画面サイズによってボタンの配置も変わるようになっています。スマートフォンで表示すると下画像のように表示されます。

スマホ表示

デフォルトのテキストリンクよりも目立つのでクリック率も確実にアップします。
ここで紹介したCSSは以下のものになります。

ちなみに、これを気にCSSを学んでみようという方はこちらの書籍がおすすめです。要点がよくまとまっていますよ。

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]

著者:水野 史土
出版社:エムディエヌコーポレーション
発売日:2017/3/28

ワードプレスでCSSを追加する方法

ワードプレス管理画面より「外観」→「カスタマイズ」の順に進みます。

カスタマイズ

テーマのカスタマイズ画面が表示されたらカスタマイズメニューを下にスクロールします。
最下段に「追加CSS」があるので、こちらをクリックします。

追加CSS

追加CSSを記載するエディタが表れるので、こちらに上記CSSをまるごと貼り付けてください。

貼り付け 公開

全て貼り付けたら画面左上の公開ボタンをクリックして設置完了です。

まとめ

今回はアフィリエイトリンクを作るのに非常に便利なサービスのヨメレバ、カエレバ、トマレバのカスタムCSSを紹介しました。

各ショッピングサイトのアフィリエイトリンクを1つにまとめることができる便利なサービスですが小さなテキストリンクではクリック率が良くありません。

ここで紹介したようにリンクボタンにすることでクリック率が確実にアップしますので、是非カスタマイズしてみてください。