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

WordPress

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

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

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

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

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

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

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

0.概要

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

1.使用したもの

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

ロリポップ!レンタルサーバー
【WordPress利用満足度No.1】のレンタルサーバー「ロリポップ!」月額220円からWordPressが使え、ワンクリック60秒で簡単インストール!今すぐ10日間の無料お試し!

・WordPress 4.9.8

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

・テーマ Hueman

Hueman
The Hueman theme loads fast and is 100% mobile-friendly according to Google. One of the best rated theme for blogs and magazines on WordPress.org. Powering 70K+...

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

Table of Contents Plus
目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。

2.手順

①table of contents plus(TOC+)のインストール

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

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

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

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

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

③CSSの編集

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

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

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

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


#toc_container {

margin-left: auto;

margin-right: auto;

}

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

④確認

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

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

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

3.追記

TOC+の設定で、プレゼンテーションをカスタムに変更すると、CSS編集で目次の枠などを変更できるようになります。ぜひやってみてね!

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

水中ドローンとUnityのお部屋|SHOWROOM(ショールーム)
水中ドローンとUnityの配信をメインにします(*^^*)たまにおやつ配信やおしゃべり配信します(*^^*)

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

https://hk-ryukyu.booth.pm/items/1061904
https://hk-ryukyu.booth.pm/items/1064971
https://hk-ryukyu.booth.pm/items/1067049
https://hk-ryukyu.booth.pm/items/1066777

コメント

タイトルとURLをコピーしました