2022/04/23 本日のPodcastはお休みします。
Table of Contents Plus の目次が画面からはみ出る現象を解決
こんにちは。安慶名勇子（アゲナユウコ）です。
Table of Contents Plus というプラグインを使うと目次が自動表示されるので便利だよ！という記事を以前書きました。
ブログにおいての『目次』って、飲食店でいうお品書きと似ていると感じるのは私だけでしょうか。「ここではこんなコース（お料理）を提供します...
目次の横幅を100％に設定するとブログの文面と横幅がそろって気持ちいいのですが…、なぜかスマートフォンでは目次が画面からはみ出てしまうという現象が見られました。
この現象、実は簡単に解決できます。同じ現象に悩んでいる方のお役に立てればと思ったので、記事にしました。
Contents
box-sizingの指定を追加しよう
処置は簡単。お使いのWordPress にてCSS に下記コードを追記をするだけ。
|
1 2 3 |
#toc_container { box-sizing: border-box; } |
上記のCSS コードは『外観』→『テーマエディタ』→『style.css』の最後に記述します。お使いのテーマによっては、style.css を編集することなくCSSを追記できる機能『CSSエディター』が使用できる場合があります。もしその機能があるならそちらに書いた方がいいですね。テーマのアップデートの影響を受けませんから。
記述の場所がわからない方はこちらを参考にしてください。
CSSエディターを使用する場合 ※ 推奨
TCDのテーマMAGを例に説明します。『外観』→『カスタマイズ』を選択。
その後出てくる画面の『追加CSS』をクリックします。
コードを追記して『公開』ボタンを押せば終了です。
style.css に記述する場合
『外観』→『テーマエディタ』を選択。
『style.css』ファイルを選び、左側に出てくるコードの一番下に追記します。
画面一番下の『ファイルを更新』ボタンを押して終了です。
コード追記後の画面を確認
上記コードを追加すると、目次のはみ出しがこのように修正されました。
box-sizing とは何か
box-sizing は、ボックスサイズに余白（padding）と枠線（border）を含めるか否かを指定するもの。デフォルト状態では、余白と枠線は指定されたサイズ内に含めないという設定になっているため、画面からはみ出てしまっていたわけです。
この方法は、今回の Table of Contents Plus の表示崩れ以外にも使えるので覚えておくといいですね。
| box-sizing: content-box | 余白（padding）と枠線（border）はボックスサイズ内に含めない |
| box-sizing: border-box | 余白（padding）と枠線（border）をボックスサイズ内に含める |
ぜひお試しください！
