当ブログはワードプレスの有料テーマ「DIVER」を利用しています。

DIVERでは、商品紹介ブログパーツのヨメレバ・カエレバのを、標準設定でおしゃれに表示することが出来ます。

パソコン(PC)では「Amazonで探す」などのボタンが横並びに表示されるのですが、スマホ(モバイル)では縦並びに表示されてしまいます。

せっかくなので、スマホでも横並びに表示にしたいですから、この問題をCSSを追記して修正してみました。

カスタマイズ協力:フクロウ・セグレゲイテッドウィットネス氏

はじめに:ヨメレバ・カエレバの表示設定

まず標準設定でヨメレバ・カエレバのデザインを表示出来るようにしましょう。

Diverオプションから投稿設定を開き、「カエレバ・ヨメレバ・トマレバ・デザインを適用する」にチェックをつけ、変更を保存して下さい。

これで「Amazonで探す」などのボタンにデザインが付きます。

スポンサーリンク

デザインをスマホで確認してみる

ボタンにカラーがついていて綺麗ですが、位置がイマイチよくありません。

横並びにした方が見栄えしそうですよね?ということで、CSSに追加して横並び表示にします。

追加CSS|コピペでOK!

/* ヨメレバ・カエレバボタンをスマホでも横並び表示 */
@media screen and (max-width: 480px){
.booklink-link2>div, .kaerebalink-link1>div, .tomarebalink-link1>div{
margin-right: 0px !important;
margin: .5% !important;
}
}

おわりに:スマホで表示を確認

ボタンが横並びになりましたね。

こちらの方がスッキリしていますし、クリック率も多少は上がると思います。

こういった細かい部分にこだわっていくと、最終的に売上アップにつながりますから、是非設定してみて下さいね。

スポンサーリンク
DIVERを使って集客力の高いブログを作ろう

DIVERを使えば、初心者でも簡単におしゃれなブログが作れます。

ボタンや囲い枠など、記事を書く際の入力補助も多数搭載済みで、設定の手間がかかりません。

購入者には公式から無料の無期限サポートが付いてくる最強のテーマです。

Twitterでフォローしよう

おすすめの記事