2021/10/11 電子ペーパー用 スケジュール帳(PDF)横型 2021年10月~2022年12月 販売開始!

Table of Contents Plus の目次が画面からはみ出る現象を解決

WordPress・Web運営

こんにちは。安慶名勇子(アゲナユウコ)です。

Table of Contents Plus というプラグインを使うと目次が自動表示されるので便利だよ!という記事を以前書きました。

目次の横幅を100%に設定するとブログの文面と横幅がそろって気持ちいいのですが…、なぜかスマートフォンでは目次が画面からはみ出てしまうという現象が見られました。

この現象、実は簡単に解決できます。同じ現象に悩んでいる方のお役に立てればと思ったので、記事にしました。

box-sizingの指定を追加しよう

処置は簡単。お使いのWordPress にてCSS に下記コードを追記をするだけ。

上記の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)をボックスサイズ内に含める

ぜひお試しください!

Yuko Agena

Yuko Agena

モノづくりやひとり旅、ガジェット好きのソリスト。仕事のこと、プライベートのこと、日々の出来事や思考を記録しています。

関連記事

特集記事

Yuko Agena

Yuko Agena

モノづくりやひとり旅、ガジェット好きのソリスト。仕事のこと、プライベートのこと、日々の出来事や思考をジャンルを問わず気ままに記録しています。YouTubeチャンネルを開設しました。

更新情報

2021年10月
 123
45678910
11121314151617
18192021222324
25262728293031

最近の記事

  1. 【Vol.141】Podcast収録の裏側。オーディオ機器へのこだわりとあるトラブルのお話。

  2. 【Vol.140】唐突に思いついてチートデイにすることに。お酒を片手にさぼり話をしてみます。

  3. 【Vol.139】急にかかってくる電話は私にとって恐怖でしかないが、なかなか理解されない話。

  4. 【Vol.138】手帳の切り替えは10月に!その理由と1年間の電子ペーパー実験を経ての感想

  5. 【Vol.137】苦手克服のために続けてきたルーティーンが思わぬところで実を結んだ話

ランキング

  1. 1

    テレビなしの生活を10年以上続けている私が感じる、テレビのない生活のメリット・デメリット

  2. 2

    WordPress「サイトに重大なエラーがありました」の解消方法

  3. 3

    WordPressで管理者メールアドレスが変更できないときの対処法

  4. 4

    YouTubeで流行っているらしいflixzoneを推奨するスパムコメントに気をつけて!

  5. 5

    Todoistは有料版がおススメ!無料版との違いと使い心地をグランドマスターが解説してみる

TOP