本日、かの有名な目次作成プラグインであるTable of Contents Plus(TOC+)を導入してみました。
でも、・・・・・・。
なんとなくデザインがどうなのかなぁ。的な感じでした。
CSSでなんとかならないかな?と得意の試行錯誤をしてちょっとだけ見栄えを良くかっこ良くすることができました。
(と思っています。:自己満足→通称:自己満(笑))
スポンサーリンク
まずは、本家本元のTable of Contents Plus(TOC+)の公式サイトからプラグインをダウンロードします。
その後は、
上記に作成方法や設定方法を記載した記事の動画のように設定していってみてください。
そうすると、
基本的な設定はプラグインのみで出来ますがスタイル的に変えたいなぁ。
と思った時には以下のように自分にて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ですと以下のような感じでした。
この状態から上記のCSSコードをテーマのstyle.cssに記載すると、以下のようになります。
現在(2017年1月14日)の当サイトの目次のスタイルです。
今後変更の可能性はあります。
若干はかっこ良く見栄えが良くなったかなぁ。
なんて自己満足を今のところしています。
今後はわかりませんが・・・・・・。ポリポリ (・・*)ゞ(^.^;
もちろん、参考にさせていただいたサイトもあります。
参考サイト)
もうWordPressのカスタマイズネタなど基本的なことから応用的なことまで多くの情報が記載されていらっしゃるサイトですね。
他にも、
いくつかカスタマイズネタを参考にさせていただいたと思います。
本当に、ありがとうございます。
関連記事
-
小林麻央さんの病状も気になるが北斗晶さんの病状も気になる…。
私の従兄弟のお嫁さんが数年前に片方の乳房、そして今年両方の乳房を全摘手術…。再従兄弟も2年前に乳がんが発覚し片方の乳房を全摘手術したこともあり・・・・・・。 先日、夫の市川海老蔵さんが会見を開いて、 …
-
健康の意味と元気で安寧な日々を過ごしていきたい!!
健康とは何か? それ相応の年齢になったり、医療従事者であればそんなことに考えをはせることもあることがあると思います。
-
WordPressでOGP設定方法。プラグイン使わない。
多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。 なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定…
「WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
おすすめの記事一部広告
comment