【Simplicity】カエレバ・ヨメレバのmobile.cssのカスタマイズが反映されない場合の解決方法

もしくはウェブサイトを運営している、ほとんどの人が使用しているであろう「カエレバ」「ヨメレバ」。

WordPressテーマ『Simplicity2』にて、これらの表示(スタイル)を変更しようとCSSを編集したところ、モバイル端末(スマートフォン)で正しく表示できなかったので、その対策をメモしておきました。

スポンサーリンク

「カエレバ」「ヨメレバ」とは

かん吉さんが開発した、量販品書籍を紹介するためのブログパーツです。

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

出典:商品紹介ブログパーツ カエレバ

綺麗に見せるためのCSSカスタマイズ

こちらのなぎそら(@nagisora)さんの記事をもとに、CSS編集を行いました。

パソコン表示用CSSと、スマートフォン表示用CSS、両方ちゃんとあるので初心者にもおすすめです。

何が起きたか?

パソコン表示ではちゃんとCSSが適用されたのですが、スマートフォン表示だとCSSが適用されず。

こんな感じだったり、

まったくCSSが適用されない場合もありました。

原因・対策

カスタマイズ内の「完全レスポンシブ表示を有効」をオフにしたら、正常に表示されるようになりました。

「完全レスポンシブ表示を有効」オン・オフの詳細については、Simplicity製作元のこちらの記事をご覧ください。

Googleレスポンシブデザインを推奨しているので、もしかしたら検索順位が下がるかもしれませんが、それは経過を見ていきながら判断したいと思います。