現在の接続環境は
です

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

Windows10サポート終了まで
¥1,650 (2024/11/30 16:49時点 | Amazon調べ)

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

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

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

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

所要時間目安:3

This session is using  IPv4  is established in

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

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

  • 本日
  • 週間
  • 月間
  1. エクストレイルリアワイパー交換方法と純正部品番号 2PV

    エクストレイルT32以降のリアワイパーは汎用品があまりなく(PIAA製品でブレードごと交換というものはあります。)長さが30cm(300mm)でリアワイパーゴムに鉄心があります。 PIAA製品でブレー…

    もっと読む

  2. シガーライターがない車にシガーライターソケット増設

    シガーライターがない車にシガーライターソケットの付け方と増設方法 1PV

    ここのところ最近の車にはシガーライターソケットもしくはシガーライター自体が付いていない車があります。 そんな時には、昨今ではスマホの充電などでも車のシガーライターソケット電源は必須とも言えます。 しか…

    もっと読む

  3. ブレーキペダルストローク調整部分

    ブレーキペダル調整ストローク調整方法高さ調整 1PV

    やっと、 本来書こうとしたネタである車ネタを書きます。多くの車でフットブレーキがあるのは当たり前です。 (ないと車とは言えないんですが^^;)そのフットブレーキがメーカーや車種によって、高さや長さが違…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 48PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 21PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

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

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

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

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 48PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 21PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

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

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

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

    もっと読む

今日は2025年1月22日です。

目次に行く・戻る

メルカリ招待コード:

本日、かの有名な目次作成プラグインである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の目次を自動表示するプラグインTable of Contents PlusのCSSデザインカスタマイズ。横幅をピッタリ揃えたり中央に配置する方法も解説しています。

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

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

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

バレンタインまであと…VALENTINEはどんなPresent(プレゼント)でどのように過ごされますか?

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

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

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

0

カウントダウンタイマー

あなたにおすすめな関連記事

🎉 Counting Up! 🎉
Loading...
ツイッター10年日本公式サイトスクショ

PC 伝えたいこと 備忘録 時事ネタ

Twitter10年!!はじめてのツイッター投稿からちょうど10年の日

上記画像は、 日本Twitterの公式サイトのスクショです。 (サイトを訪れると10年を祝って風船があがっていきます。。) 今日2016年3月21日は、Twitterではじめてツイートされた…

もっと読む

インフィード広告アドセンス

心臓模式図

伝えたいこと 備忘録 時事ネタ 治療

心臓の位置が左右で逆?内臓転位なのか?右心蔵なのか?

心臓の位置は通常は胸の真ん中辺りにありますが、若干左側にあるとも言えます。ただ、心臓の軸が左側に傾いているということが正確な表現でもあります。よく心電図(ECG)などをとる時に、アイントーベンの三角形…

もっと読む

インフィード広告アドセンス

ベッキーが上半身裸の大胆な新聞広告

伝えたいこと 備忘録 時事ネタ

ベッキーが上半身裸で臨んだ大胆な新聞広告…。自分を大切にしてね。

(アイキャッチ画像はナリナリドットコムhttps://www.narinari.com/Nd/20160939982.htmlのスクショです。) あのベッキーが・・・・・・。ある意味トレードマークだっ…

もっと読む

インフィード広告アドセンス

LINEブロックされてもメッセージを送る方法

LINE 伝えたいこと 備忘録

LINEでブロックされてもメッセージを送る方法

 今は、多くの人が無料アプリのLINEを使用している方々が多いと思います。私も、スマホは持っていなかったのですが、持った途端に無料通信アプリのLINEをインストールしてしまいました。そしたら…

もっと読む

インフィード広告アドセンス

参院選池上彰と今井絵理子対談池上無双

伝えたいこと 備忘録 時事ネタ

池上彰氏参院選に続いて都知事選で池上無双炸裂か!!

池上彰さんと言えば、もう知らない人はいないと言っても過言ではないと思います。私がはじめて池上彰さんを知ったのは、NHKでの「こどもニュース」をされていらっしゃった時からです。その頃から大人にも分りやす…

もっと読む

インフィード広告アドセンス

伝えたいこと 備忘録 時事ネタ

Googleを独禁法違反で審査 公取委、検索寡占を解明へ

公正取引委員会(公取委)が、Google(グーグル)を検索サービス(検索ポータルサイト。検索プラットフォーム)の独占禁止法疑いで審査へとのことのようです。(調査) ググるという言葉が出来たのが2000…

もっと読む

あなたが訪問してから

0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total412


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください