BETA

【WordPress】目次を真ん中に表示する方法 

投稿日:2019-01-26
最終更新:2019-01-26
※この記事は外部サイト(https://hk-ryukyu.club/hideto/archives/490)からのクロス投稿です

【やりたいこと】目次を真ん中に表示させたい!


目次が左端にあると、ちょっと違和感ありませんか。

他のブログやサイトでも、目次は真ん中に表示されているし、自分のブログもそうしたい!

ということで、今回は、目次を真ん中に表示する方法です(^^)/

※目次を作る方法は、書いてありません。

【10分でできる】CSSを追加します。


※ダウンロード時間は10分の中に含まれていません。

0.概要


プラグインtable of contents plus(TOC+)を使用して、目次を作成した後に、目次を真ん中に表示するCSSを追加します。

1.使用したもの


・ロリポップレンタルサーバー スタンダードプラン

https://lolipop.jp/

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

https://ja.wordpress.org/themes/hueman/

・プラグイン table of contents plus(TOC+)

https://ja.wordpress.org/plugins/table-of-contents-plus/

2.手順

table of contents plusTOC+)のインストール


プラグインの新規追加をクリックします。 table of contents plusを検索し、インストールします。 インストール後、有効にします。

②table of contents plus(TOC+)の設定


設定のTOC+をクリックします。

横幅、回り込み、文字サイズを上記の画像のように設定します。

TOC+は、目次を自動生成するプラグインです。本文の見出しを自動的に目次にします。

③CSSの編集


外観のCSS編集をクリックします。

詳細設定をクリックします。

追加CSSをクリックします。

下記のコードを記入しましょう。

  

toc_container {

margin-left: auto;

margin-right: auto;

}

これで、目次が真ん中に表示されているはずです。確認してみましょう。

④確認


実際に、記事を確認すると、目次が真ん中に表示されているかと思います。

下記の画像のようになっていれば成功です。

お疲れさまでした(^^♪

詳細

画像が見づらい場合は、以下のリンク先に移動することをおすすめします。

https://hk-ryukyu.club/hideto/archives/490

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

パソコン関連で役に立った情報を発信します

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!