現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

Table of Contents Plus(TOC+)目次のCSSカスタマイズ方法

WordPress カスタマイズ 伝えたいこと 備忘録

所要時間目安:3

This session is using  IPv4  is established in

今日は2025年6月4日です。

この記事は2017年1月14日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年6月4日 (水曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 2PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 1PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. FTPツールWinSCPにてサーバー上の削除できないファイルやフォルダ削除方法

    サーバ上のファイルやフォルダ削除できない時に削除する方法 1PV

    えーっ、(汗)。この度WordPressのバージョンアップ後にjetpackが連携できなくなってしまいまして…。 その詳細は次回にしますが、結果しっかりと連携できました。(#^.^#) そして、その連…

    もっと読む

  1. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 29PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  2. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 28PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 22PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

  1. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 18PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 15PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 10PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

本日、かの有名な目次作成プラグインであるTable of Contents Plus(TOC+)を導入してみました。

 

でも、・・・・・・。

なんとなくデザインがどうなのかなぁ。的な感じでした。

CSSでなんとかならないかな?と得意の試行錯誤をしてちょっとだけ見栄えを良くかっこ良くすることができました。
(と思っています。:自己満足→通称:自己満(笑))

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ

メルカリ招待コード:

まずは、本家本元のTable of Contents Plus(TOC+)の公式サイトからプラグインをダウンロードします。

Table of Contents Plus

その後は、
上記に作成方法や設定方法を記載した記事の動画のように設定していってみてください。

そうすると、
基本的な設定はプラグインのみで出来ますがスタイル的に変えたいなぁ。

と思った時には以下のように自分にてCSSを書いて、
見た目を変更することができますので参考にしてみてください。

 

具体的にTable of Contents Plus(TOC+)の目次のスタイルをCSSで以下のように記載して見た目を変更しました。

 

/*--------------------------------------
 TOC+
 --------------------------------------*/

 #toc_container {
 display: block !important;
 width: 85% !important;
 background: #ffffff ;
 border: 1px solid #ccc;
 font-size: 95%;
 box-sizing: border-box;
 line-height: 1.4;
 margin: 36px auto;
 padding: 1em 2em;
 }
 #toc_container .toc_title {
 text-align: center;
 }

 #toc_container .toc_list {
 width: 95% ;
 padding-left: 0;
 }

 #toc_container ul {
 list-style: none;
 margin-bottom: 0;
 }
 #toc_container ul li {
 margin: 1px;
 padding-left: 0;
 text-indent: 0;
 }
 #toc_container ul a {
 display: block;
 text-decoration: none;
 color: #444; /* リンク色 */
 border-bottom: 1px dotted #ccc; /* リンク下線(1pxの間隔と色指定)*/
 }
 #toc_container .toc_list > li {
 margin-bottom: 30px;
 }

 #toc_container .toc_list > li > ul > li {
 margin-bottom: 8px;
 }

 #toc_container .toc_list > li > a {
 margin-bottom: 8px;
 border-bottom: 2px solid #00f; /* 大見出しの下線 */
 font-size: 110%; /* 大見出しのフォントサイズ */
 }

 #toc_container ul ul {
 padding: 0;
 }
 #toc_container li {
 margin-bottom: 1em;
 padding-bottom: 0.2em;
 }

 

これまでのTable of Contents Plus(TOC+)目次のデフォルトのCSSですと以下のような感じでした。

目次Table of Contents Plus導入方法

この状態から上記のCSSコードをテーマのstyle.cssに記載すると、以下のようになります。

 

Table of Contents Plus(TOC+)目次CSS-min

 

現在(2017年1月14日)の当サイトの目次のスタイルです。
今後変更の可能性はあります。

若干はかっこ良く見栄えが良くなったかなぁ。
なんて自己満足を今のところしています。

今後はわかりませんが・・・・・・。ポリポリ (・・*)ゞ(^.^;

もちろん、参考にさせていただいたサイトもあります。

参考サイト)

もうWordPressのカスタマイズネタなど基本的なことから応用的なことまで多くの情報が記載されていらっしゃるサイトですね。

他にも、
いくつかカスタマイズネタを参考にさせていただいたと思います。

本当に、ありがとうございます。

あなたにおすすめ

Windows10サポート終了まで
132日 23時間 39分 17秒

Multiplex 広告

あなたが訪問してから

3 秒経過 🎉
885日 0時間 20分 42秒

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

入学入社おめでとうございます!!

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:

9547日 0時間 20分 42秒

カウントダウンタイマー

おすすめの記事一部広告

Total566


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る

新着コメント


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.

S