カエレバ・ヨメレバ・ポチレバをコピペ一発でカスタマイズ！

ワードプレスのカスタマイズが落ち着いたので、今まで気になっていたけど手をつけていなかったものも、ついでにカスタマイズしてみました。

利用している方も多いことでしょう。こちらのサービス。

カエレバ（商品の紹介）
ヨメレバ（本の紹介）
ポチレバ（アプリや曲の紹介）

まぁ、今さら説明するまでもありませんが、Amazon・楽天・価格ドットコムなどのアフィリエイトツールをまとめて連携してくれるサービスです。

これを使えば、Amazonの商品を見て紹介リンクを作ろうとした時に、楽天や価格ドットコムなどのリンクも同時に作ってくれるんです。

「Amazonで買えるよ〜」ではなく、「Amazonでも楽天でもあなたの好きなところで買えるよ〜」と訴求できるので、重宝されているサービスです。

1
カスタマイズをするためのハードルが微妙に高い
2
カスタマイズのルール
3
商品名のフォントを小さく＆ポチレバの余白を消す
4
メーカー名・出版社名などの名前を小さく
5
Amazonや楽天などへのリンクを全てまとめてボタン化
6
G-toolsの時のレイアウト崩れにも対応
7
全てのコードをまとめてコピペ！
8
まとめ

カスタマイズをするためのハードルが微妙に高い

このサービスを使っていると必ずと言っていいほど気になるのがデザイン。かなりシンプルです。

現に「カエレバカスタマイズ」などで検索すると、たくさんのカスタマイズ例が公開されていますよね。

ワードプレスの特定のテーマに合うようなカスタマイズだったり、コピペ一発でカスタマイズできるコードだったりします。

そんな僕もずっとカスタマイズしたい気持ちはあったんですが、悩みがありまして…

（CSSコードの量多くない？…）

そう。コピペで出来るとはいえ、コードの量がかなり多いんですよ。

人生のテーマが「Less is more」な僕としては見過ごせない問題です。

そして、大きな悩みがもう一つ。

「〇〇風を選択しないと表示（レイアウト）が崩れます」という制約。

こっちの方が大きな悩みだったかなぁ。でも、気分でレイアウトを変えることってありますよね？

例えば、カエレバの場合。

僕は「amazlet風-3」というデザインを好んで使っているんですが、気分によっては「amazlet風-1」や「amazlet風-2」を選択する時もあるんです。

商品毎にデザインを変えている人もいるでしょう。

選べる選択肢

そうなると選べる選択肢は限られていて、

カスタマイズのために常に同じデザインにする
カスタマイズをしない

の2つだけになってしまいます。でも、それじゃあ面白くない。

第3の選択肢「どのデザインにしても良くなる」を作らなきゃ。

カスタマイズのルール

カスタマイズをする前に決めたルールがこちら。

どのデザインを選んでも「それなりに」いい感じのデザインになる
コードは極力減らす（まとめれるものはまとめる）
カエレバ・ヨメレバ・ポチレバを同時にカスタマイズできる
スマホのレイアウトを重視する
コピペ一発で成功するカスタマイズ
規約を守る（著作権リンクを外さないなど）

先に言っておくと、今回のカスタマイズでは「Amazonの時は青色のボタン、楽天の時は赤色のボタン」みたいなことはしていません。

あと、パソコンの時はボタンのサイズを小さく…みたいなこともしていません。コードがごちゃごちゃしちゃうので…

最後にまとめたコードを公開しますが、どんなカスタマイズをしているか見てみませんか？

商品名のフォントを小さく＆ポチレバの余白を消す

商品名のフォントを小さくしました。デフォルトの文字の大きさが若干大きい気がして。

そして、ポチレバの謎の空白問題にも対処しました。こんな空白ありませんか？

コード

コードはこちら。CSS3の属性セレクタを活用しています。

div[class$="link-name"] p,div[class$="pochi_name"],.pochireba p {
    font-size: 12px;
    margin: 0 !important;
}

カエレバ・ヨメレバの商品名のクラスの最後→「link-name」
ポチレバの商品名のクラスの最後→「pochi_name」

だったので、「そのクラス名で終わるdivのフォントを小さく、マージン（余白）を0に」というカスタマイズにしました。

別にしても良かったのですが、ポチレバの謎の余白問題もここのコードで対応しています。「p要素」が原因でした。

ポチレバの余白の原因は「P要素の余白」

ポチレバの左側にあるアプリの画像。これはp要素で囲まれているのですが、このp要素が画面幅いっぱいに広がっていたんです。

でも、高さは「0」。なぜ余白ができるのでしょう？

それは、どのテーマもp要素の下に余白を作っているから。

ワードプレスなどのブログの文字は、基本的にこのp要素の中に入っています。

ですので、文字を見やすくするため、p要素の下に余白を作っているんです。

つまり、p要素自体の高さは「0」だけど、p要素の余白の高さ分だけ下にずれていたということです。

メーカー名・出版社名などの名前を小さく

次に、商品を製造している会社の名前・出版社名・アプリを開発している会社の名前などのフォントを小さくしました。

デフォルトだと大きい気がするんですよね。こんな感じ。

コード

コードはこちら。

div[class$="-detail"],div[class$="pochi_seller"] {
    font-size: 8px;
    margin: 0;
}

先ほどと同じようなカスタマイズです。

カエレバ・ヨメレバの商品名のクラスの最後→「-detail」
ポチレバの商品名のクラスの最後→「pochi_seller」

だったので、そのクラス名で終わるdiv要素のフォントをかなり小さくし、余白を消しました。

Amazonや楽天などへのリンクを全てまとめてボタン化

ここが一番カスタマイズしたいところでしょうか。

ただ、先述の通り「Amazonは青色でー」みたいなカスタマイズは一切していません。

コード

先にコードをご紹介してみます。

div[class^="shoplink"] {
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #333;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    display: block !important;
    margin: 5px 0;
}
div[class^="shoplink"] a {
    display: block;
}

まぁ、コード自体は非常にシンプルなものです。注目すべきポイントはやはり属性セレクタを活用しているところでしょうか。

Amazonや楽天などのリンクをボタン化してそれぞれに色をつけようとすると、かなりコードがごちゃごちゃしてしまいます。

だから、規則性を見つけて全部一括でボタン化することにしました。それが「class^=”shoplink”」の部分です。

クラス名が「shoplink」から始まる要素にだけデザインを適用

このコードによって「shoplink」から始まるクラス名のdivだけに対して、カスタマイズをすることができます。

そう、もうおわかりかと思いますが、カエレバもヨメレバも、Amazonや楽天などのリンクは全て「shoplink」から始まっているんです。

Amazon→shoplinkamazon
楽天→shoplinkrakuten

ですので、属性セレクタで条件分岐をさせて、全てのリンクをまとめてボタン化しました。ナイスアイディア！

クリッカブルエリアを広く

他には「display: block」を追加したこともポイントです。

最初の「display: block」でブロック化しレイアウト崩れを防止。強制的に効くように「!important」もつけました。

そして、次の「display: block」で、クリッカブルエリア（クリックできる範囲）を広くしました。

これにより、文字だけでなく、そのボタン全体がクリックできるようになります。ストレスフリー！

G-toolsの時のレイアウト崩れにも対応

「G-tools風」を選んだ時のスマホのレイアウト崩れも解決しました。

しかも、パソコン版の時の表示もスッキリする魔法のカスタマイズです。

レイアウト崩れの原因は「カエレバ・ヨメレバの表記」です。

G-toolsはテーブルタグで作られているのですが、ボタン化するとレイアウトが崩れちゃうんですよね。

▼こんな感じで▼

まぁ、そこまで気になんないし…なんて妥協は一切許しません！しっかり解決しました！

コード

まずはコードをご紹介します。

td[valign="top"],[style="border:none;text-align:left;"] {
    position: relative;
}
td[style="vertical-align: bottom; padding-left: 10px; font-size: x-small; border: none;"] {
    position: absolute;
    bottom: 1px;
    right: 1px;
}

いろいろやり方はあったんですが、CSSだけで解決するにはこの方法がベストだと判断しました。

G-toolsのテーブルの時だけ親要素（td）に「position:relative」を適用
G-toolsのテーブルの時だけ子要素（td）に「position:absolute」を適用し、右下に絶対配置

というカスタマイズです。クラス名があれば簡単だったんですが、G-toolsのデザインにはクラス名がないんですよ。

ですので、属性セレクタを使い、G-toolsのデザインのテーブルの時だけスタイルが適用されるようにしました。ナイスアイディア！

POINT

各ショップへのリンクをボタン化しない場合でも、いい感じのレイアウトになりますよ！

本来、テーブル要素に適用できないようなCSSを追加していますが、「ChromeとSafariで動いたからOK♪」的なゆとり世代のノリで進めました。

Chromeで確認したところ、

iPhone
iPad
ギャラクシー
ネクサス

などのデバイスで問題なく動作しましたよ。

テスト環境と本番環境での挙動の違い

一つ疑問だったのは、オフライン環境（テストサイト）と本番環境（実際のサイト）で挙動が違ったこと。

原因は、本番環境だけに「コード間の空白」や「;」があったことなんですが、いろいろ試した結果、先ほどのコードになりました。

これだけは、一度本番環境で試さないとわからないと思うので、キャッシュをクリアしても挙動がおかしければ削除しちゃってください！

G-tools風と同じCSSが適用されたテーブルがあった場合

そうそう、ありえないと思いますが、G-tools風と全く同じデザインのテーブルが他にもあれば、そのテーブルにもこのスタイルが適用されてしまいます。

万が一そういうテーブルがあった時は、属性セレクタの「not:()」で条件分岐をすればOKです。念のため、頭の片隅に入れてください。

全てのコードをまとめてコピペ！

解説は以上です。まとめたコードがこちら。

/* 商品名のフォントを小さく */
div[class$="link-name"] p,div[class$="pochi_name"],.pochireba p {
    font-size: 12px;
    margin: 0 !important;
}
/* メーカーや出版社名のフォントを最小化 */
div[class$="-detail"],div[class$="pochi_seller"] {
    font-size: 8px;
    margin: 0;
}
/* カエレバ・ヨメレバの各ショップへのリンクをボタン化 */
div[class^="shoplink"] {
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #333;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    display: block !important;
    margin: 5px 0;
}
div[class^="shoplink"] a {
    display: block;
}
/* G-tools風の時だけ適用 */
td[valign="top"],[style="border:none;text-align:left;"] {
    position: relative;
}
td[style="vertical-align: bottom; padding-left: 10px; font-size: x-small; border: none;"] {
    position: absolute;
    bottom: 1px;
    right: 1px;
}

うん！すごくスッキリしてますね！