当ブログはWordPressのテーマである「THE THOR」のデザイン着せ替え機能で「デモサイト03」をベースに構築しています。もちろんメインビジュアルやベース色などは変更していますが、ほぼノーマルのまま使っています。
ただ、構築を進めている中で少し気になることがありました。メニューパネルを設置し、カスタマイズ画面の「SNS設定>Follow設定」からHeaderにTwitterのフォローアイコンを表示するよう設定したところ、無事アイコンは表示されたものの、なぜか右側にスクロールバーが表示されてしまいます。
特に実害はないので放っておいても問題はないのですが、気になりだしたら落ち着かないので調べてみることにしました。
ブラウザのズームサイズが影響か
まずは「THE THOR」を利用されているであろうブログをいくつか拝見させていただいたところ、やはりメニューパネルのフォローアイコンにスクロールバーが表示されているサイトが散見されます。
そこで、複数のデバイス（PC、iPhone、iPad）やブラウザ（Edge、Chrome、Firefox）で確認してみたところ、iPhoneやiPadでは表示されませんが、PCのブラウザによっては表示されたりされなかったりしています。さらに、ブラウザのズームのサイズも影響していることに気が付きました。
いずれにせよスクロールバーが表示されてしまうということは、「メニューパネルのフォローアイコンを構成している要素に、アイコンが収まりきらない何かしらの設定がある」といった仮説のもと、「THE THOR」の スタイルシート（style.css） から、これらを構成する要素に何かしらのチューニングを試みてみることにします。
menuBtn__navi関連セレクタ
メニューパネルのフォローアイコン周りのレイアウトは、スタイルシート（style.css）1593行目から記述のある「.menuBtn__navi」「.menuBtn__naviList」「.menuBtn__naviItem」「.menuBtn__naviLink」あたりのセレクタで設定される要素の組み合わせによって構成されています。
それぞれのセレクタが設定する要素と記述内容は次の通りです。
ちなみに、各要素は、ヘッダー（header.php）に記述があり、大まかな構造は次の通りです。
<nav class="menuBtn__navi"> <ul class="menuBtn__naviList"> <li class="menuBtn__naviItem"><a class="menuBtn__naviLink" href="https://twitter.com/">...</a></li> <li class="menuBtn__naviItem"><a class="menuBtn__naviLink" href="http://instagram.com/">...</a></li> ... </ul> </nav>
スクロールバーが表示される原因は？
結論から言うと、力及ばず根本的な原因は不明のままです。
「.menuBtn__naviList」で設定されている要素にスクロールバーが表示されていることは確認できるのですが、それぞれのプロパティの値を見ても「.menuBtn__naviLink」で30pxに設定されているアイコンがはみ出してしまうような設定は見当たりません。
ChromeのデベロッパーツールでHTMLを確認しても、アイコンとそれを格納する要素のサイズは一致しているように見えます。
もっと広範囲の何かしらの要素が影響を及ぼしているのでしょうか。それとも、もっと単純な問題なのでしょうか。もしくは「ブラウザのズームサイズの拡大縮小による内部処理の誤差」「ディスプレイの解像度やサイズ」といった、根の深い問題が潜んでいるのでしょうか。もしそうであれば、とても自分の手に負えるものではないので、調査はひとまず中止することにしました。
ただ、あくまでも対処療法ではありますが、一部セレクタのプロパティ値を変更することで解消できることを確認しています。
解消方法①～はみ出した部分をそのままに又は非表示に
注目したのは、「.menuBtn__naviList」の「overflow」プロパティです。このプロパティは、要素内を構成するコンテンツが大きすぎて、ブロック（要素）に収まらない場合の動作を設定します。
- visible：収まらない部分はブロックからはみ出して表示される（初期値）。
- hidden：収まらない部分は非表示となる。スクロールバーは表示されない。
- scroll：収まらない部分はブロックからはみ出さずにスクロールバーが表示される。
- auto：ユーザーエージェント（ブラウザ等がはじめから持っているCSS）に依存する。
「.menuBtn__naviList」の「overflow」には「auto」が設定されています。PCのデスクトップブラウザのユーザーエージェントでは、スクロールバーを表示する動きになるようです。
そこで、「overflow」を「visible」に変更してアイコンをはみ出したままにするか、「hidden」ではみ出した部分を非表示にすることでスクロールバーは表示されなくなります。
次のcssを「外観>カスタマイズ>追加CSS」に追加、または「外観>テーマファイルエディタ」の「編集するテーマを選択」で「THE THOR CHILD」を選択し「style-user.css」に追加します。
.menuBtn__naviList{
overflow:visible;
}
/*または*/
.menuBtn__naviList{
overflow:hidden;
}
なお、「THE THOR」の「style.css」を直接変更しないでください。テーマのアップデートが行われた場合、変更内容が失われてしまいます。
解消方法②～余白の調整
もし、誤差が原因だとすれば、誤差を見込んだ余白を要素に設けることでスクロールバーの表示を回避することが可能ではないかと考えました。
要素の余白は「margin」及び「padding」で設定します。何らかの要因で下方向にはみ出していると考えられるので、「.menuBtn__naviList」で設定される要素の内側下方向に「padding-bottom」で余白を設けてみることにします。
「margin」及び「padding」の取り扱いについては以下の記事もご覧ください。
当ブログはWordPressのテーマである「THE THOR」のデザイン着せ替え機能で「デモサイト03」をベースに構築しています。 ほぼカスタマイズせずに使っていますが、要素の色やサイズなどのスタイルを若干変更することもあります。そ[…]
次のcssを「外観>カスタマイズ>追加CSS」に追加、または「外観>テーマファイルエディタ」の「編集するテーマを選択」で「THE THOR CHILD」を選択し「style-user.css」に追加します。繰り返しますが「THE THOR」の「style.css」を直接変更しないでください。
.menuBtn__naviList{
padding-botom:1px;
}
おわりに
以上、デスクトップやブラウザのサイズを変更してもスクロールバーは表示されなくなりました。抜本的な解決ではないかもしれませんが、表示自体はされなくなったのでこれで良しとしました。根本的な原因がおわかりになる方いらしゃましたら是非ご教示いただけると幸いです。
こんな細かいことを気にしているから遅々として構築作業が進まないのですね。最後までお付き合いいただきありがとうございます。