【Simplicity2】ヨメレバ・カエレバのカスタマイズ後、スマホ表示がおかしい時の対策は?

mobile_display
ひとつ前の記事に書いた通り、ヨメレバ・カエレバの見た目をCSSでカスタマイズした。といってもコピペだけの簡単な作業なので、初心者のワタシでも無事完了~!

ブログ内記事 カエレバ・ヨメレバをSimplicity2用にカスタマイズして使ってみた

ちなみに以下2つのサイトを参考にさせていただきました↓

参考 Simplicityでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ
参考 カエレバ・ヨメレバをSimplicity2用にカスタマイズして使ってみた

その後すぐ作業をしていたPC(ノートパソコン)で表示を確認。うんバッチリ!あとはスマホ画面だとどう見えるかな~?と軽~いキモチでチェックしてみたところ・・・

CSSカスタマイズがスマホに適用されてな~い(泣)

ん?ん?なんかアマゾンや楽天へのリンクボタンが寸詰まり、っていうか右寄りに小さく固まってて何かバランスがおかしい・・・な、なぜだああーーーー!!(以下キャプチャ画面)

まー単に見た目の問題だけでクリックできないワケじゃないんでスルーしてもいーんですけどね、こーいうの気になりだすともうトコトン突き詰めないと気がすまない性分なんですよ。(だから記事書きがちっともはかどらないんだよっ←心の声)

で早速またもやググってみると、何とドンピシャな記事を発見!↓

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

うーんまさに集合知のパワー!人生初ワードプレスのテーマをSimplicityにしてホントによかった~~と改めて♪

原因はレスポンシブ設定だった

上の記事によると、幸い原因はとっても明快シンプルで、よーするにSimplicity2の設定で完全レスポンシブ表示が有効になっているという1点のみ。

自分でこの項目をオンにした記憶がないので、もしかしたら最初からデフォルトでオンになってたのかな?それとも単に自分でやって忘れただけか^^;

いずれにしても、すぐにチェックしてみると、案の定?完全レスポンシブ表示の設定がオンになっていた。

ここまでわかれば対策は簡単、早速この設定からチェックをはずし完全レスポンシブをオフにした。

ちなみにWordPressの管理画面からこの「完全レスポンシブ表示を有効」の項目にたどり着く順番は以下の通り。↓

外観→カスタマイズ→レイアウト(全体・リスト)

対策後はスマホ表示もバッチリ~!

ここで「完全レスポンシブ表示を有効」の項目からチェックをはずして、「保存して公開」をクリック。早速スマホで再度チェックしてみると・・・

今度はリンクボタンがキレイに並んで表示されてる!!あーヨカッターー♪(以下キャプチャ画面)

まとめ

ヨメレバ・カエレバのデザインカスタマイズ後、モバイル・スマホ画面で表示(とりわけ各ショップへのリンクボタン)がおかしい時は、以下2ステップを実行!

(1)Simplicityの「完全レスポンシブ表示を有効にする」項目を確認。
(2)もし有効になっていたらチェックを外して無効にする。

(蛇足)で完全レスポンシブ表示はオン・オフどっちがいいの?

そんな次第で幸いなことにヨメレバ・カエレバのカスタマイズ問題はアッサリ解決。でもここでまたソボクな疑問が・・・そう、今回のカスタマイズは別として、サイトとしては「完全レスポンシブ表示」の方がベターだったりしないの?

だって、グーグル先生もレスポンシブ表示のサイトを高く評価してるらしいし、完全レスポンシブにしちゃえば、今回のカスタマイズもstyle.cssとmobile.cssの2つじゃなくてstyle.cssひとつを変更するだけとよりシンプルになるよね?

・・・なんてシロウト考えでモヤモヤしながらググってみると、どうやら完全レスポンシブ表示をオンにすると、モバイル画面のメニューやアドセンス広告の表示とかの面で細かい選択肢が減る、らしい・・・?

参考 完全レスポンシブデザインについて
参考 Simplicityが「ファイルを生成するキャッシュプラグイン」と相性が悪い理由(※適切に設定すれば使えます)
参考 Simplicityでスライドインモバイルメニューを表示するには完全レスポンシブル表示をオフに

まー今はアドセンス広告の配置とかモバイル画面でのメニュータイプとか、そんな細かなことよりまずはひたすら記事書けよって段階なんで(^^;)とりあえず頭のスミッコに置いとく用ね。

いずれにしてもSimplicityのテーマ自体は、「完全レスポンシブ表示」が有効・無効にかかわらず、

・Googleのモバイルフレンドリーテストに合格
・PageSpeed Insightsのモバイルユーザエクスペリエンスが100点

とグーグル先生が重視するモバイル面でも超優等生!なので完全レスポンシブ表示をオフのままでも全然問題なさそうなので、当面は有効にせずに使ってみるとするかな。

参考 SEO対策済みのWordPressテーマ「Simplicity」を使ってみる! – スモービズ

作者わいひらさん自身のサポートはモチロン、今回みたいに何かトラブルがあってもちょっとググればほとんど解決できちゃうSimplicityさん、やっぱりワタシはアナタについていきます!!