スマホでレスポンシブが効かないトラブルを解消

Webサイト制作時に二度も同じ罠にハマってしまったので記載する。

構築したサイトをスマホで閲覧した際に、サイズが最適化されずクソデカ表示されてしまうという事象だ。

制作したのはLP兼ECサイトだったが、WordPressのCocoonを使用して制作した。CMSの機能はほとんど使用しないのにWordPressを使用したのは以下の理由からだ。

• レスポンシブが楽

• cssを全書きしなくて済む

• 購入者情報の入力やメールの自動送信にContact Form 7を使用したかった

• GA（GTM）の設定が一か所で済むので楽

静的ページをhtmlとcssで一から作るのは大変だ。
良い感じのテンプレも持っていないので、Cocoonという文明の利器を活用して人間様は楽をしようと考えたのだ。

しかし、実際に作ってみると、スマホでのレスポンシブが上手く効かないトラブルが発生した。厳密に言うと、あれこれと指定したレスポンシブは概ね機能しているのだが、サイズだけがなぜか大きいままだった。

スマホでページを開くと、ページが画面から大きくはみ出していた。
巨大なサイトをスマホの画面で切り取って一部だけを見ているような表示だ。指でページを縮めて縮めてスマホ画面内に収めると、それ以降は100%に固定された。しかし、ページを開き直すと振り出しに戻ってしまうのだ。

こんな事を毎回ユーザにさせる訳にはいかないし、何より一瞬でページを閉じられてしまう。

レスポンシブが予め設定されているので、手動で作り出さなくても良いのが利点でWordPressにしたはずだが、なぜこんな事になってしまうのか？

とりあえず情報収集しなくては・・・
「Cocoon　レスポンシブ　バグ」検索

実に愚かだ。

他人に対しては、「プログラムは思った通りに動かない。書いたとおりに動く」等と説いておきながら、いざ自分のターンになると己の設定に誤りが無いか検証しようともしないのである。

検索結果の中に有益な情報は無かった。プログラムが意図通りに動作しない時は、もう一行ずつ検証するしかない。VBAのF8と同じだ。

この時点で手動でもそれなりにcssを書いていたので、
外観＞テーマファイルエディター＞style.css
を一行ずつ確認する事にした。

最初は下の方に書いた
レスポンシブデザイン用のメディアクエリ
の所を丹念に確認していたのだが、意外にも犯人はPC表示の設定だった。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*ページ全体の横幅固定*/
.no-sidebar .wrap {
 width: 750px;
}

/*固定ページのタイトル非表示*/
.entry-title {
display: none;
}

/*ヘッダ非表示*/
.logo-header{
display: none;
}

手書きで追加した所を確認すると、そこにはいきなり犯人が堂々と佇んでいた。

/*ページ全体の横幅固定*/
.no-sidebar .wrap {
 width: 750px;
}

こいつが犯人である。
厳密に言うと、こいつが犯人というよりは、レスポンシブデザイン用のメディアクエリでスマホ用のwidthを設定していなかった事が原因だった。

Cocoonのデフォルトでも何らかの設定はあるはずだが、.no-sidebar .wrap で指定している以上、スマホ用の設定でも.no-sidebar .wrap でwidthを指定し直さなければ750pxの設定が有効で居続けるという事なのだろう。

Cocoon設定＞カラム＞メインカラム設定＞コンテンツ幅
を750にすれば良さそうなものだが、なぜわざわざ手で書いたのかは不明だ。正直覚えていないが、おそらく意図通りの結果にならなくてやむなくcssを手書きしたのだろう。

/*782px以下*/
@media screen and (max-width: 782px) {
.no-sidebar .wrap {
 width: auto;
}
}

と追記した事で一発で100%表示されるようになった。

ここまで四苦八苦したにも関わらず、数か月後にCocoonで同じ事をやらかしているのである。こうしてアウトプットする事で強く記憶に残り、三度目の正直は達成されると信じたい。

さらにこの記事が誰かのトラブル解消に役立てば幸いである。