書籍ブログパーツ「ヨメレバ」のカスタマイズ

弊社では、書籍などの紹介をアフィリエイトとして行っておられるサイトの構築・運営も行っております。
書籍などの紹介用で多く使われている書籍ブログ・パーツ「ヨメレバ」は、アマゾン、楽天ブックスなどの複数のブックショップへのリンクを自動生成してくれるので、アマゾン以外のショップを利用している人も逃すことがなくとても有益です。
ただ、そのままですと、スマホで参照した際にうまく表示できないので、CSSをカスタマイズしてレスポンシブ対応したいと思います。

いろいろ検索すると、既に多くの方がレスポンシブ対応されておりましたが、下記の記事を参考にさせて頂きました。
Com2 Blog » Blog Archive » ヨメレバ・カエレバのCSSカスタマイズ 解説つき

こちらに掲載されているコードの「スマートフォンでの表示設定部分」と「メディアクエリ(大きな画面での表示設定)」をほぼそのままCSSに追加するとレスポンシブ対応が完了します。
テーマによって、直接CSSファイルに追記するか、追加CSS登録欄から追記するかします。Nirvanaの場合は「Nirvana Setting」のカスタムCSSの欄で追記します。

今回適用したサイトでは、Amazon/Amazon Kindle/楽天ブックス のブックショップを対応するので、掲載されているセブンネットを Kindle に書き換えます。
書き換えは、「.shoplinkseven」を「.shoplinkkindle」に一括置換すればいいです。

大きな画面用の条件として、「@media screen and (min-width : 500px){ 」で500px を指定しているところをサイトに応じて調整します。

ヨメレバでは、「amazlet風-2(cssカスタマイズ用)」を選んで、そのコードをブログ画面に貼り付けます。

以下がカスタマイズした書籍紹介リンクになります。

以下の本はKindle版がないですが、リンクボタンは表示されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です