特定ページでスマホ画面が横ブレしてしまう原因とoverflowの使い方【WordPress】

Cocoonのカルーセルにドットを表示させるカスタマイズをしてから、そのページだけ画面がグラグラと横ブレする症状が発生しました。

その横ブレを直そうとしていたら今度はまたドットが表示できなくなった話は後に触れますが、そもそもページが横ブレする理由と改善方法を纏めてみました。

スポンサーリンク

画面が横ブレしてしまう原因

ユーザーの画面サイズに収まりきらずはみ出している要素があるから横にブレるのですが、多くの要素は画面サイズに合わせて拡大・縮小など自動で調整されます。自動と言うと語弊があるかもしれませんが、WordPressやテーマ側で制御してくれています。

私の様な基礎を知らない者がカスタマイズを続けていると、この様に予期せぬ事態にぶち当たります。今回症状が出るのは当サイトのトップページだけなので、スマホのトップページにだけ表示させている要素=カルーセル(スライドショー)だと仮定して調査を進めました。

横ブレに関連するプロパティ『overflow』

結論から言うと、疑わしきセレクタ[slider]の中にプロパティ[overflow]を追加しただけで改善しました。

/**カルーセル**/
.slider {
  overflow: hidden;
}

overflowのオプション

画面サイズからはみ出した要素をどの様に処理するかを指定するプロパティです。{hidden}=はみ出した部分は表示しないという記述です。その他の主なオプションは以下のとおり。

overflow の主な値
  • visible:はみ出した要素を表示【デフォルト】
  • hidden:はみ出した要素は非表示
  • auto:おまかせ
  • scroll:スクロールバーを表示

※いつもお世話になっているHTMLクイックリファレンスさんを参考にしました

画像がブレていた原因

横ブレが直ってホッとしたのも束の間、カルーセルの下にあったslickのドットが消えていました。overflowを追加してから消えたので、そもそもドットの位置を正しく指定できていなかった(はみ出ていた)という事になります。

今までは画面外にはみ出ていたドットがoverflowのデフォルト[visible]のおかげで上手いこと表示されていたという。

overflow-x / overflow-y

今回のケースは横ブレさえしなければ良いので、そういうコードないかな〜と探して見つけたのが[overflow-x / overflow-y]。縦と横をそれぞれ別々に指定できるという。

ドットは縦にはみ出している → じゃあ縦ははみ出しOKで横だけ非表示に指定{overflow-y: hidden;}すれば直ると思って試してみましたが、横ブレはしないもののドットは表示されませんでした。

調べたところ、overflowのxとyは連動性があるため、必ずしも私が思っている様な独立した動きはしない様です。

根本的な解決策

小細工ではなくそもそもベースとなっているセレクタ[slick]全体のサイズを広げて、そのボックス内にドットを表示させる事にしました。恐らく基本的な事かと思います。

赤枠が全体として、paddingとmarginの位置
追加したコード
/*slick ドット*/
.slick-dotted.slick-slider {
  margin-bottom: 10px; 
  padding-bottom: 31px;
}
修正したコード
.slick-dots2 {
  bottom: 0px;
}

{bottom: 0px;}に修正して全て解決しました。

補足

既存のカスタマイズ方法が間違っていた訳ではありませんが、こういった事が起こり得るという事は認識しなければなりません。

やはりカスタマイズはコピペだけに頼らず、探究心を持ってチャレンジし続けなければならないなと感じました。

でもまずはコピペっすよね(笑)。世の中もそういう流れが多いです。なかなかパイオニアにはなれません。そこからオリジナリティーを求める事で、新しいものが生まれると思います。みたいな。

Comment

タイトルとURLをコピーしました