Simplicity2で最低限やるべきスマホ対応

WordPress無料テーマの中で5本の指に入るであろうSimplicity2

初心者にも優しいカスタマイズ機能、SEO対策もバッチリ、何よりシンプルで使いやすいので非常に評価が高い。このブログ以外にも色んなブログやミニサイトで使わせて貰っている。

そして何より嬉しいのがモバイルファーストであること。ただスマホにしてはちょっと文字が大きかったり、一部の機能が動作しないこともあった。

その時の対処手段と導入時に最低限やった方が良いことをいくつか紹介↓↓↓

スポンサーリンク

アコーディオンツリーが表示されない!?

Simplicity2のモバイルメニューでは、デフォルトで以下が用意されている。

  • アコーディオン(デフォルト)
  • アコーディオンツリー
  • モーダルメニュー
  • スライドインライト(ボタン上)
  • スライドインライト(ボタン下)
  • スライドインダーク(ボタン上)
  • スライドインダーク(ボタン下)

個人的にはアコーディオンツリースライドインダークがオススメ。ただ当ブログではアコーディオンツリーが上手く表示されず、理由を調べているとプラグインが影響していた。

何かと色んな影響を及ぼすこちらのプラグインが原因↓↓↓

AutoptimizeはJavaScriptやCSSを縮小し最適化してくれる有能なプラグイン。こちらを有効化しなければ表示はされるが、レスポンスとか考慮すると有効化が望ましいので、スライドインダーク(ボタン下)が良いかも。

ヘッダーにロゴ画像など使っている方がアコーディオン(デフォルト)にすると、モバイルメニュー表示のせいでロゴ画像が左寄りとなる。ちょっとデザインが微妙なので、やっぱスライドインダーク(ボタン下)がオススメ。こちらはプラグインの事を気にする必要ないみたい。

mobile.cssでモバイル閲覧時の文字の大きさを調整

モバイル閲覧時、デフォルトでは文字が少し大きいと感じた。

もちろん記事中の文字の大きさは[カスタマイズ]内で調整可能だが、トップ画面でのリスト表示ではエントリー記事タイトルが大きくて、ちょっと微妙だったので少し修正。CSS周りは子テーマを利用する前提だが、mobile.cssに記載することで変更可能。

しかしmobile.cssに書いてもcssが反映されてないことがある。ちなみにmobile.cssを有効化するためには、[完全レスポンシブ表示を有効]がチェックされていると反映されない。

こちらのチェックを外しても尚、反映されない場合はキャッシュ機能のプラグイン(W3 Total Cache)や閲覧ブラウザのキャッシュを削除してみると動く可能性が高い。

あとは極力デザイン崩れさせないため、当ブログでは[記事を読む]ボタンと投稿日時を非表示とさせている。これは好みだろうけど↓↓↓

サイトのテーマによるけど、今の時代モバイルでの閲覧が圧倒的多数。今までモバイル周りを放ったらかしにしていたが、PV数稼いでいるブロガー見ていると、かなり綺麗なデザインだ。

Simplicity2導入するなら、メニューと文字の大きさには気を使った方が良いかなと思う。

スポンサーリンク