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

WordPress

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

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

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

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

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

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

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

0.概要

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

1.使用したもの

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

ロリポップ!レンタルサーバー
【WordPressの表示速度No.1】のレンタルサーバー「ロリポップ!」月額550円から高速WordPressが使える!初期費用・ドメインも無料!今すぐ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学習体験記となっております。

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

※無料版あり Unity学習100日記念本(0~30日編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
Unity学習100日記念本(Progate編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

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