「カエレバ」「ヨメレバ」を利用して商品を紹介されているブロガーさんは、多くいらっしゃるのではないでしょうか？？
今回は、「ヨメレバ」を利用するにあたり、WordPressテーマ『JIN』を使っているさっ子自身がつまずいた点、『ボタンがうまく表示されない』の解決方法についてまとめました。
WordPressテーマJINで「ヨメレバ」のボタンをうまく表示させられない人
Contents
「ヨメレバ」とは
まずはじめに、「ヨメレバ」とは何かについて簡単にご説明します。
「ヨメレバ」って何？
「ヨメレバ」とは、ブログ上で書籍を紹介する場合に使用するブログパーツです。
「楽天ブックス」「Amazon」「Kindle」「７net」「ebookjapan」など複数のリンクを表示することができます。
例えば、「楽天ブックス」「Amazon」「Kindle」「７net」の４種類のリンクを貼りつけると、以下のように本の紹介ができます。
こちらの本は、アフィリエイトを始める方が最初に手に取る本と言っても過言ではないほど有名ですね。
「カエレバ」との違いは？
「ヨメレバ」とよく似たパーツで「カエレバ」があります。
「ヨメレバ」が書籍を紹介する場合に使用するのに対し、「カエレバ」は、主に量販品を紹介するためのブログパーツです。
「楽天市場」「Amazon」「Yahoo!ショッピング」「Wowma!」など複数のリンクを表示することができます。
例えば、「楽天市場」「Amazon」「Yahoo!ショッピング」の3つのリンクを貼りつけて、シャープのプラズマクラスターの紹介をすると、以下のようになります。
「カエレバ」でも書籍を紹介することは可能ですが、Kindleその他書店へのリンクも作ることができるのが「ヨメレバ」の魅力です！
「ヨメレバ」のボタンが表示されない！？
「ヨメレバ」のボタンが表示されない状態から、どのようにして表示されるようになったのかを順にご説明しますね。
「ヨメレバ」のボタンがうまく表示されていない状態
「ヨメレバ」でブログパーツを生成したままだと、上の画像のような状態になりました。
いろいろと調べる中で、WordPressテーマ『JIN』でボタン表示に対応しているのが「楽天ブックス」「Amazon」「Kindle」だからということがわかったのです。
「ヨメレバ」のボタン表示はCSSコピペで一発解決
“CSSなんてよくわからない”という人もいらっしゃるのではないかと思いますが、作業は単純なので安心して下さい♪
WordPressで『外観』→『カスタマイズ』→『追加CSS』を開きます。
『追加CSS』を開いたら、下記のCSSコードをコピペしましょう！
※これは、７netの場合のコードです。
@media (min-width: 768px) {
.shoplinkseven{
margin-right: 8px; }
}
@media (max-width: 767px) {
.shoplinkseven{
margin: 0 auto;
margin-bottom: 1px; }
}
@media (max-width: 767px) {
.shoplinkseven a{
padding: 10px; } }
@media (min-width: 768px) {
.shoplinkseven a{
font-size: 0.8rem;
padding: 12px 5px; } }
@media (min-width: 1024px) {
.shoplinkseven a{
padding: 12px 12px; } }
.shoplinkseven a {
display: block;
font-size: 0.85rem;
text-decoration: none !important;
color: #fff !important;
text-align: center;
border-radius: 2px; }
.shoplinkseven a{
background: #79d100;
}
貼り付けると以下のようになるので、『公開』ボタンを押しましょう！
「ヨメレバ」のボタンがうまく表示された状態
このように、CSSコードを貼り付けた後には、７netのボタンがうまく表示できるようになりました！
ちなみに、CSSコードの最後にある
“background: #79d100;”の＃以降の色の値を変更すると、ボタンの色を変更することもできますよ(^^)
「ヨメレバ」のその他のボタン表示方法
もし７net以外のボタンを表示させたい場合は、先ほどのCSSコードの中にある
“shoplinkseven”の部分を「ヨメレバ」で生成されている以下のものに変更すれば大丈夫です。
例えば、
楽天koboであれば”shoplinkrakukobo”
図書館であれば”shoplinktoshokan”
といった感じです。
「ヨメレバ」のボタンを表示させる方法【まとめ】
ブログを始めて間もない方や、CSSがよくわからないという方にとっては、CSSを自力で入力するのはハードルが高いですよね。
また、慣れてきたり自分好みのカラーなどある方はカスタマイズを楽しんでみて下さい♪
一緒に頑張りましょう(^^)
これからアドセンス申請される方はこちらの記事もぜひ参考にしてみて下さい♪
ブログで使うアイコンに迷っている方はこちらの記事もどうぞ♪
