【やりたいこと】目次を真ん中に表示させたい！
目次が左端にあると、ちょっと違和感ありませんか。
他のブログやサイトでも、目次は真ん中に表示されているし、自分のブログもそうしたい！
ということで、今回は、目次を真ん中に表示する方法です(^^)/
※目次を作る方法は、書いてありません。
【10分でできる】CSSを追加します。
※ダウンロード時間は10分の中に含まれていません。
0.概要
プラグインtable of contents plus（TOC+）を使用して、目次を作成した後に、目次を真ん中に表示するCSSを追加します。
1.使用したもの
・ロリポップレンタルサーバー スタンダードプラン
・WordPress 4.9.8
※WordPressはロリポップユーザー専用ページからインストールしました。
・テーマ Hueman
・プラグイン table of contents plus（TOC+）
2.手順
①table of contents plus（TOC+）のインストール
プラグインの新規追加をクリックします。 table of contents plusを検索し、インストールします。 インストール後、有効にします。
②table of contents plus（TOC+）の設定
設定のTOC+をクリックします。
横幅、回り込み、文字サイズを上記の画像のように設定します。
③CSSの編集
外観のCSS編集をクリックします。
詳細設定をクリックします。
追加CSSをクリックします。
下記のコードを記入しましょう。
#toc_container {
margin-left: auto;
margin-right: auto;
}
④確認
実際に、記事を確認すると、目次が真ん中に表示されているかと思います。
下記の画像のようになっていれば成功です。
お疲れさまでした(^^♪
3.追記
TOC+の設定で、プレゼンテーションをカスタムに変更すると、CSS編集で目次の枠などを変更できるようになります。ぜひやってみてね！
【最後に】Showroomとマッハ新書の紹介
ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!
以下は、私のUnity学習体験記となっております。
「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!
コメント