ブログ

【WordPressテーマJINで「ヨメレバ」のボタンを表示させる方法】~CSSコピペで一発解決~

【WordPressテーマJINで「ヨメレバ」のボタンを表示させる方法】~CSSコピペで一発解決~

「カエレバ」「ヨメレバ」を利用して商品を紹介されているブロガーさんは、多くいらっしゃるのではないでしょうか??

今回は、「ヨメレバ」を利用するにあたり、WordPressテーマ『JIN』を使っているさっ子自身がつまずいた点、『ボタンがうまく表示されない』の解決方法についてまとめました。

さっ子
さっ子
同じように困っている方のご参考になれば幸いです。
こんな人におすすめです

WordPressテーマJINで「ヨメレバ」のボタンをうまく表示させられない人

「ヨメレバ」とは

まずはじめに、「ヨメレバ」とは何かについて簡単にご説明します。

「ヨメレバ」って何?

「ヨメレバ」とは、ブログ上で書籍を紹介する場合に使用するブログパーツです。

「楽天ブックス」「Amazon」「Kindle」「7net」「ebookjapan」など複数のリンクを表示することができます。

例えば、「楽天ブックス」「Amazon」「Kindle」「7net」の4種類のリンクを貼りつけると、以下のように本の紹介ができます。

こちらの本は、アフィリエイトを始める方が最初に手に取る本と言っても過言ではないほど有名ですね。

「カエレバ」との違いは?

「ヨメレバ」とよく似たパーツで「カエレバ」があります。

「ヨメレバ」が書籍を紹介する場合に使用するのに対し、「カエレバ」は、主に量販品を紹介するためのブログパーツです。

「楽天市場」「Amazon」「Yahoo!ショッピング」「Wowma!」など複数のリンクを表示することができます。

例えば、「楽天市場」「Amazon」「Yahoo!ショッピング」の3つのリンクを貼りつけて、シャープのプラズマクラスターの紹介をすると、以下のようになります。

「カエレバ」でも書籍を紹介することは可能ですが、Kindleその他書店へのリンクも作ることができるのが「ヨメレバ」の魅力です!

「ヨメレバ」のボタンが表示されない!?

「ヨメレバ」のボタンが表示されない状態から、どのようにして表示されるようになったのかを順にご説明しますね。

「ヨメレバ」のボタンがうまく表示されていない状態

「ヨメレバ」でブログパーツを生成したままだと、上の画像のような状態になりました。

さっ子
さっ子
7netのボタンがうまく表示されない!

いろいろと調べる中で、WordPressテーマ『JIN』でボタン表示に対応しているのが「楽天ブックス」「Amazon」「Kindle」だからということがわかったのです。

「ヨメレバ」のボタン表示はCSSコピペで一発解決

“CSSなんてよくわからない”という人もいらっしゃるのではないかと思いますが、作業は単純なので安心して下さい♪

WordPressで『外観』→『カスタマイズ』→『追加CSS』を開きます。

 

『追加CSS』を開いたら、下記のCSSコードをコピペしましょう!
※これは、7netの場合のコードです。

@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コードを貼り付けた後には、7netのボタンがうまく表示できるようになりました!

ちなみに、CSSコードの最後にある
“background: #79d100;”の#以降の色の値を変更すると、ボタンの色を変更することもできますよ(^^)

「ヨメレバ」のその他のボタン表示方法

もし7net以外のボタンを表示させたい場合は、先ほどのCSSコードの中にある
“shoplinkseven”の部分を「ヨメレバ」で生成されている以下のものに変更すれば大丈夫です。

例えば、

楽天koboであれば”shoplinkrakukobo”

図書館であれば”shoplinktoshokan”

といった感じです。

「ヨメレバ」のボタンを表示させる方法【まとめ】

ブログを始めて間もない方や、CSSがよくわからないという方にとっては、CSSを自力で入力するのはハードルが高いですよね。

さっ子
さっ子
そんな方はぜひCSSコピペでサクッと問題解決して、ブログ記事作成に時間を回してくださいね!

また、慣れてきたり自分好みのカラーなどある方はカスタマイズを楽しんでみて下さい♪

一緒に頑張りましょう(^^)

これからアドセンス申請される方はこちらの記事もぜひ参考にしてみて下さい♪

【Google AdSense13時間で一発合格した体験談】~設定・記事数・アフィリは?~アドセンス合格は、ブログを書いている人にとって大事な通過点の一つですよね!アドセンス審査に申請して13時間後に一発合格したさっ子が、申請時の設定状況や記事数・文字数・アフィリエイトリンク・引用画像・内部リンク等どういう状態だったのかお伝えします。...

ブログで使うアイコンに迷っている方はこちらの記事もどうぞ♪

【ココナラのアイコン依頼がおすすめな3つの理由】~SNS・ブログで顔出しNGな人必見!!~
【ココナラのアイコン依頼がおすすめな3つの理由】~SNS・ブログで顔出しNGな人必見!!~SNS(twitterやインスタグラムなど)やブログで顔出しNGな人必見!!アイコンのお悩みはココナラで解決!!おすすめな理由を簡潔にお伝えします!!...

 

さっ子
さっ子
良かったらTwitterのさっ子とも仲良くしてね~♪