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

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

いろいろ検索すると、既に多くの方がレスポンシブ対応されておりましたが、下記の記事を参考にさせて頂きました。

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

各ショップのボタンは、ヨメレバ・カエレバで生成されるコードとカスタマイズ用CSSの中に記載されている「.shoplink***」を参考にして、shoplinkkindle などを追加していきます。

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

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

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

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

ヨメレバ・カエレバの仕様変更を機に以下のCSSに変更させていただきました。

コメントを残す

コメントは当サイト運営者の承認後に反映されます。
お名前はニックネームでも結構です。