Loading…

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

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

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

このセッションは  IPv4  で確立しています

本日の人気記事BEST10

所要時間目安:3

This session is using  IPv4  is established in

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

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

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

目次に行く・戻る

本日、かの有名な目次作成プラグインである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のカスタマイズネタなど基本的なことから応用的なことまで多くの情報が記載されていらっしゃるサイトですね。

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

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

27


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

関連記事

市川海老蔵妻小林麻央さんの病状について

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

小林麻央さんの病状も気になるが北斗晶さんの病状も気になる…。

私の従兄弟のお嫁さんが数年前に片方の乳房、そして今年両方の乳房を全摘手術…。再従兄弟も2年前に乳がんが発覚し片方の乳房を全摘手術したこともあり・・・・・・。 先日、夫の市川海老蔵さんが会見を開いて、 …

もっと読む

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

健康

伝えたいこと 備忘録 治療

健康の意味と元気で安寧な日々を過ごしていきたい!!

健康とは何か? それ相応の年齢になったり、医療従事者であればそんなことに考えをはせることもあることがあると思います。

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

Facebook携帯番号対処方法

WordPress カスタマイズ 備忘録

WordPressでOGP設定方法。プラグイン使わない。

多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。 なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定…

もっと読む

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

引用元サイトのテキスト選択部分を自動的に作成するブックマークレット

PC ツール ブックマークレット 伝えたいこと 備忘録

WordPressのインラインリンク化が嫌な場合ブックマークレットにてリンクコード作成方法

私自体、インライン化されたリンク機能はあまり使ったことがないのですが、 ほとんど以前記載したブログカードによるリンクか、 WordPressブログカード作成方法 昨今、ShereHTMLでのリンク作成…

もっと読む

WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


おすすめの記事一部広告

    Multiplex 広告

アクセスランキング

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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