WordPress

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

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

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

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

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

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

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

上記のCSS コードは『外観』→『テーマエディタ』→『style.css』の最後に記述します。お使いのテーマによっては、style.css を編集することなくCSSを追記できる機能『CSSエディター』が使用できる場合があります。もしその機能があるならそちらに書いた方がいいですね。テーマのアップデートの影響を受けませんから。

記述の場所がわからない方はこちらを参考にしてください。

style.css に記述する場合

『外観』→『テーマエディタ』を選択。

『style.css』ファイルを選び、左側に出てくるコードの一番下に追記します。

画面一番下の『ファイルを更新』ボタンを押して終了です。

CSSエディターを使用する場合(TCD MAG)※推奨

TCDのテーマMAGを例に説明します。『外観』→『カスタマイズ』を選択。

その後出てくる画面の『追加CSS』をクリックします。

コードを追記して『公開』ボタンを押せば終了です。

コード追記後の画面を確認

上記コードを追加すると、目次のはみ出しがこのように修正されました。

box-sizing とは何か

box-sizing は、ボックスサイズに余白(padding)と枠線(border)を含めるか否かを指定するもの。デフォルト状態では、余白と枠線は指定されたサイズ内に含めないという設定になっているため、画面からはみ出てしまっていたわけです。

この方法は、今回の Table of Contents Plus の表示崩れ以外にも使えるので覚えておくといいですね。

box-sizing: content-box 余白(padding)と枠線(border)はボックスサイズ内に含めない
box-sizing: border-box 余白(padding)と枠線(border)をボックスサイズ内に含める

ぜひお試しください!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で安慶名勇子をフォローしよう!

関連記事

  1. WordPress

    WordPressでサイトマップを簡単に作成する方法

    今回はサイトマップのお話を。インターネット用語の『サイトマップ』…

  2. WordPress

    TCDテーマMAGで背景色や背景画像を設定する方法

    このブログはTCDのMAGというWordPressテーマで作って…

  3. WordPress

    WordPress で目次を自動作成!Table Of Contents Plus の設定方法

    ブログにおいての『目次』って、飲食店でいうお品書きと似ていると感…

  4. WordPress

    Table of Contents Plus:特定の記事のみ目次を非表示にする方法

    Wordpressの目次機能の代表的プラグインである Table of…

  5. WordPress

    < が &lt; と表示されてしまう Crayon Syntax Highlighter の問…

    私、Wordpressのカスタマイズが好きでして、寝食を忘れてコ…

毎週金曜更新!安慶名勇子のPODCAST

PAGE TOP