CSSで目次をカスタマイズしてみる – WordPress【 Luxeritas 】ルクセリタス
WordPress
分かりやすいといえば とても分かりやすいのですが、
個人的に もっとシンプルにしてみたいと思ったので、ちょっとカスタマイズしてみたいと思います。
また、初心者の方向けに 基本的な 目次の設定方法から 分かりやすく解説していきます。
バージョンによってCSSが正常に表示されない場合があります。
2022年現在、こちらのバージョンでCSSカスタマイズの有効性を確認しました。
WordPress バージョン 5.7.6 Luxeritas バージョン: 3.9.0
WordPress バージョン 5.9.3 Luxeritas バージョン: 3.16.0
外観カスタマイズ から設定できる目次
投稿記事に目次を表示させるかどうか または 表示させる際の設定を 外観カスタマイズから行います。
外観カスタマイズで 設定できる項目はこちら
➊ 開閉設定 開始時に開いた状態にするか、手動で開いていただくか設定
❷ 目次のタイトルと 開・閉 のボタンの名前を設定
❸ 文字幅に合わせて 目次枠を変動( 自動 )か、固定の 設定
➍ ➎ で設定した 見出し2の数を満たした場合、目次が自動で挿入される設定
➎ 記事内の 見出し2の数で目次の表示を設定
➏ 固定ページで目次を表示したくない場合など、目次を設定できます。
➐ 目次に表示させる見出しの階層 を設定
そのほか、目次の開始状態・タイトル名の設定・カラー設定などがあります。
CSSで カスタマイズをしていく場合、カラー設定は
重複する項目ですので どちらか一方に記述するようにします。
記事ごとの目次の表示設定
投稿作成画面に 目次の非表示 というボックスがあります。
例えば、H2タイトル 3タイトルから 目次の設定をしていたとしても 記事によって 非表示にすることができます。
これを使えることで、基本設定の ➎ ➏ ➐ の設定の基準も変わってきますね。
コンテンツ内の 目次カスタマイズ
今回は コンテンツ内の目次 と サイドウィジェットに表示する目次を
こんなイメージの目次に カスタマイズしていきます。
主に4つの項目が CSSカスタマイズの ポイントになります。
- 目次の 外観デザイン
- 数字部分の 表示変更
- サイドウィジェットの 目次カスタマイズ
- その他の カスタマイズ
コンテンツ内の目次 – CSSカスタマイズ
まずは、メインの 外観デザインと リストの文字設定をカスタマイズしていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*目次デザイン*/ /* Table of Contents */ #toc_container, .toc_widget{ max-width: 100%; font-size: 14px; } /*目次の枠とタイトル*/ #toc_container{ display: table; margin-bottom: 10px; padding: 10px; font-weight:bold; color: #fff; background:#a4d5bd; } /*目次の文字色*/ #toc_container a{ color: #333; } /*見出し3 - Font */ .toc_list li li a{ font-size:14px; font-weight:normal; } /*見出し4 - Font */ .toc_list li li li a { font-size:13px; } /*リストの行間*/ .toc_list li { line-height:1; padding-top: 15px; } |
目次の数字部分を CSSカスタマイズ
次に、目次の数字部分とリストの背景を白に変更していきます。
見出し2には数字を 3・4には FontAwesome のアイコンを使用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/*目次の番号表示変更*/ .toc_number{display: none; } /*見出し2の設定*/ #toc_container > .toc_list { counter-reset: my-counter; list-style: none; margin-bottom: 0 !important; padding: 0 35px 10px 35px; background: #fff; /*リストを白抜きに*/ } /*見出し2に数字*/ #toc_container > .toc_list > li:before { content: counter(my-counter); counter-increment: my-counter; color: #57697f; display: block; float: left; margin-left: -30px; text-align: center; width: 30px; } /*見出し3 4 の設定*/ .toc_list li li:before { font-family: FontAwesome; content: "\f105"; color: #a4d5bd; font-weight:900; margin-right:5px; } /*見出し3 4 - 位置調整*/ .toc_list li li { margin-left:-30px; line-height: 1; } .toc_list li li li { margin-left:-10px; padding-top: 15px; line-height: 1; } |
開閉ボタンの非表示
開閉ボタンが不要な場合、こちらを追記します。
1 2 3 4 5 |
/*開閉ボタンの非表示*/ .toc_toggle { display: none; } |
リストマークに合いそうな FontAwesome
応用で 見出し2に FontAwesome を使うこともできます。
参考までに、目次に FontAwesome のアイコンを いくつか あげてみました。
チェックサークル f056
ディアスポラ f791
ハート f004
シェブロン-サークル-右 f138
スクエア f0c8
スター f005
ストップサークル f28d
バンドキャンプ f2d5
FontAwesome がうまく表示されない場合の Check Point !!
1.FontAwesome の表記のしかた
font-family: FontAwesome の部分で“FontAwesome"や “Font Awesome 5 Free” などと表記するケースがあります。
FontAwesome で 正しく表記されない場合は 別の表記で試してみてください。
2. ルクセリタスでの アイコンフォントの設定
ルクセリタスのカスタマイズ画面で FontAwesome の設定画面があります。
こちらの バージョンがあってない場合がありますので、設定を変えてみてください。
3.FontAwesome のプラグインをインストールしていない方
プラグインから FontAwesomeを検索し インストールすると使用できるようになります。
サイドバーの 目次カスタマイズ
サイドバーで 目次を表示させる場合は、外観→ ウィジェットから サイドバーに目次を追加します。
左がデフォルトの状態です。
こちらは コンテンツ内の CSS と連動していますので
.toc_number{ display: none; } と設定している前提の CSSコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* サイドバー・ウィジェットの目次*/ /*目次 - 背景と余白*/ #side .toc_widget > .toc_list { counter-reset: my-counter; list-style: none; margin-bottom: 0 !important; padding: 0 10px 10px 30px; background:#f0e68c; padding:1px 10px; } /*目次の文字色*/ .toc_list a{color: #696; } /* 見出し2に数字を指定 */ #side .toc_widget >.toc_list > li:before { content: counter(my-counter); counter-increment: my-counter; display: block; float: left; text-align: center; width: 30px; color:#696; } /*サイドバー目次 -見出し2- 文字設定*/ #side .toc_list li { font-size: 1em; font-weight: bold; } #side .toc_list li li { margin-left:10px; line-height: 1.5; } /*サイドバー目次 - 見出し3 4 */ #side ul.toc_list li li:before { color:#000; content:'・'; } #side ul.toc_list li li li:before { color: #696; content: '■'; font-size:0.8em; margin-left:1.5em; } |
ここでは 見出し3 4 のマークを アイコンではなく 記号 を使用しました。
記号は + - * など、" " で囲むことで表記させることができます。
画像がずれて表示される!
WordPressと ルクセリタスのバージョンによって 画像が崩れる場合があります。
今回、3パターンで試してみましたが 画像が崩れてしまったのは ② のパターンでした。
① WordPress バージョン 5.7.6 Luxeritas バージョン: 3.9.0
② WordPress バージョン 5.7.6 Luxeritas バージョン: 3.16.0
③ WordPress バージョン 5.9.3 Luxeritas バージョン: 3.16.0
この改善方法としては以下のコードを削除することで正常に表示することができました。
削除するコードは3つです。
display: block;
float: left;
text-align: center;
今回使用した ルクセリタスのバージョンも最新ではないので 他のバージョンでの不具合までは分かりませんが、
リスト・余白など ほかで指定したCSSカスタマイズと重複して記述することで 表示が崩れてしまうケースが考えられます。
上手く表示されない場合は 同じ項目のカスタマイズをチェックしてみてください。
サイドバーのカスタマイズ
サイドバーのカスタマイズは 外観カスタマイズのいくつかの項目に分かれています。
背景色/枠線色
サイドバーの背景色を指定します。
コンテンツ領域とサイドバー
コンテンツ(サイドバー)に枠線で囲む・角に丸みを付けるなどしていできます。
カラム操作
サイドバーのコンテンツを分離・結合して表示するのは カラム操作から指定できます。
これで先ほどの サイドバーでの目次が完成しました!
その他の カスタマイズ
最後に そのほかの 関連するカスタマイズをご紹介します。
リンクのカスタマイズ – 色と アンダーラインを消す
1 2 3 4 5 6 7 8 9 10 11 |
/*リンク色とアンダーライン*/ /*コンテンツ内*/ #toc_container a:hover { color:#6969; text-decoration:none; } /*サイドウィジェット*/ #side .widget a:hover { color:#6969; text-decoration:none; } |
番号なしのリスト
記事内に表示する 番号なしのリスト ul を使ったCSSをカスタマイズする際に
目次で使用するCSSと連動してしまうため、スタイルが崩れてしまいます。
リストに背景を付けただけのイメージですが、先ほど背景色に白を使ったため
このように 別の色で表示させるためには追加でCSSを指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*番号なしリストの背景色設定*/ .post ul{ background:#f1f1; } /*目次の背景色修正*/ .toc_list ul { background:#fff; } /*サイドバー目次の背景色修正*/ #side ul.toc_list{ background:#f0e68c; } |
番号なしのリストでは ほかに文字に関する指定はできますが inline-block の指定をするとまた 目次の画面が崩れてしまいますのでご注意ください。
以上、WordPress【 Luxeritas 】ルクセリタス – 目次のカスタマイズ でした。