Table of Contents Plusの目次を綺麗にカスタマイズする方法。WordPress必見。


スポンサードリンク



今回自分の記事を見ていて思いました。

記事の目次を自動で生成してくれるTable of Contents Plusはとっても便利なんですが…。

 

ウィキペディアのような目次はちょっと飽きた!笑

ていうか、味気ないよね…?

 

この目次…なんか綺麗に見やすく出来ないかなぁ〜ってことで、少しCSSをいじってみました。

CSSをいじってみた所…

 

じょさなん

なんて見やすい目次なんだ…Σ(゚Д゚)!

どう?どう?どうですか?この目次!

もちろん、この記事を読むだけでこんなオシャレな目次が作成できるようになります!

  • 何故この目次にしたのか。
  • この目次の作成方法

を今回の記事の内容といたします\(^o^)/

 

いやぁ〜かっこよくて困るわぁ〜(o・ω・o)

 

どうしてこのデザインにしたのか?

HoliHo / Pixabay

ではでは、どうしてこのデザインにしたのか?

ダークレッドのようなサイトなのに、緑かよ…?等、思うことがあるかもしれませんので、僕の考えをとりあえず語っていきます!

色→サイトカラーとの差別化

まずは、読者の方にひと目で目次だとわかって欲しかったからです。

サイトカラーと同じ系統の色を扱ってしまうと、大見出しの吹き出しも同じカラーを使っていますから、もしかしたら、

 

読者
あ、これって目次だったんだ。

となってしまうかも。

 

読者
あ、これが目次だな。

と、当然のように目次を見ていただくのが目的です。

 

なので、色を選ぶ際も、ダークレッドの色相環の正反対にある色を選びました。

じょさなん
読者の人が分かりやすいように作ったら、思った以上にカッコよくて気に入っちゃったぜ…?

 

字→ひたすら見やすく分かりやすく

このデザインの字体の特徴は以下の通り。

  1. 「目次」と「大見出し」の太字化。
  2. 「小見出し」はそのまま。

たったこれだけ。

じゃあ実際に見てくださいな!

まるで本の目次ページのように…

遠くから見ても、大見出し小見出しの見分けが付くように、太字化しました。

ちなみにフォントは何もいじってません。笑

じょさなん
大見出しが太字だと、小見出しよりも目立って良い感じ…だろ?(・∀・)ニヤニヤ

 

目次のカスタマイズ方法

ではでは、実際にカスタマイズ方法を解説していきます。

CSSも貼り付けてありますので、このページからコピーして使ってもOK!

同じプラグインを使っているなら大丈夫なはずです!!

 

Table of Contents Plusの設定変更

ではまず、「プラグイン」のTable of Contents Plusの設定を開きましょう。

「上級者向け」の設定項目が隠れていると思うので…ぺらっと見つけちゃってください!!笑

「CSSファイルを除外」のチェックを外しましょう。

これで準備は整いました。

さぁいこう、無限の彼方へ!!

 

全体を整えてしまう

では、CSSを追記するエリア(テンプレートにより、追記CSSエリアがあるはずです。)に、以下のCSSを書き込んで行きましょう。

 

CSSコードが表示されてない人へ

下の、「ソースを表示」をクリックすることでCSSコードを表示することができます。

お手数おかけしますがよろしくお願いいたします。

 


#toc_container {
 display: block !important;
 width: 80% !important;
 background: #f5f5f5; /* 背景色 */
 border: 5px solid #ccc; /* 枠 */
 border-color: #008c8c; /*枠線の色*/
 border-radius: 20px; /*枠の角を丸くする*/
 font-size: 110%; /* フォントサイズ */
 box-sizing: border-box; /* スマホの横揺れ防止 */
 line-height: 1.2; /* 行間 */
 margin: 36px auto; /* 外側の余白 */
 padding: 1em 2em; /* 内側の余白 */
}

はいはいはい…意味分からない人もいるでしょうけども…

さらっと、皆がカスタマイズしたいような項目を説明します!!


background: #f5f5f5; /* 背景色 */
 border: 5px solid #ccc; /* 枠 */
 border-color: #008c8c; /*枠線の色*/
 border-radius: 20px; /*枠の角を丸くする*/

この部分ですね。

この部分は、右に意味が書いてありますが…そのままの意味です!!笑

背景色を変えたい場合、「#~~~~~」の「~」の部分を変更することにより背景色を変えられます。

「枠」と「枠線の色」も同じです。

 

そして、目次自体の角を丸くしたい場合は、「20px」の部分をいじります。

  • 0→全く丸くない。角っちょ。
  • 100→丸い。まん丸。

のように、角の丸さの度合いを「~~px」で変えられます。

では、ここがいじり終わったら次です。

 

じょさなん

CSSなんて簡単やろ?

割りといじるの楽しくて止まらないぜ!!

 

 

目次ボタンのカスタマイズ


.toc_title {
 text-align: center; /* 中央寄せ */
 background: #008c8c; /* 背景色 */
 border-bottom: 2px solid #ddd; /* 下線 */
 padding: 0.4em 0; /* 内側の余白 */
 color: #ffff00; /* 目次のカラー */
 border-radius: 20px; /* 目次ボタンの角を丸くする度合い */
 font-size: 130%; /* 「目次」の字の大きさ */
font-weight: bold; /* 「目次」を太字にする */
}

さぁ、上のCSSもそのまま貼り付けてみましょう。

きっと僕みたいなデザインになったはず…!

ここのカスタマイズで大切な要素はやっぱり、


background: #008c8c; /* 背景色 */

color: #ffff00; /* 目次のカラー */

font-weight: bold; /* 「目次」を太字にする */

ここだね。

背景色と、字の色を見やすくカスタマイズしてみよう。

あ、色を変えたいけど、#◯◯◯が分からないって人は、とりあえずスクロールすると良いよ!

下にちゃんと説明してあるからね。

 

でもって、目次の字を太字にしたくない時は、「font-weight: bold; 」これごと消しちゃえば大丈夫です!

読者
あれ…?でも、「隠す」の部分って…?

おっと忘れてた!笑


.toc_toggle a {
 color: #ffd500;
}

この上のコードを貼り付けてくれれば、「隠す」ボタンの編集ができるよ\(^o^)/

色は、前項と同じようにカスタマイズよろしく!!

 

見出しのフォントを変更する


#toc_container ul a {
 display: block;
 text-decoration: none;
 color: #444; /* リンク色 */
 border-bottom: 1px dotted #ccc; /* リンク下線 */
}
 
#toc_container .toc_list > li > a {
 border-bottom: 2px solid #ccc; /* 大見出しの下線 */
 font-size: 110%; /* 大見出しのフォントサイズ */
 
 font-weight: bold;
}

この上のコードを貼り付けよう!

このコードの肝はやっぱり、「font-weight: bold;」かな?

これが無いと太字にならないからね。

じょさなん
もうあと1分で終わるから、少しの辛抱やで!!

 

余白を整える


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

はい!このCSSコードを貼り付けて終了です!

余白がちょうどいい感じに(僕基準)なったかと思います。

正直、このままあまりイジらないほうが良いと思うので、今回の説明は無しでよろしくお願いします。

 

スマートフォン用にCSSを追記する

これで完成?!かと思いきや。

このまま保存しても、大丈夫には大丈夫なのですが…

少しスマートフォンで覗いてみましょうか。

じょさなん
うぇええ…長すぎて読む気しない…最悪…。

長いですよね、パソコンから見ると良い感じでも、スマートフォンからだとそのままCSSを読み込んでしまうため、とっても読みにくくなってしまいます。

じゃあこの問題を解決してしまいましょう!


@media only screen and (max-device-width: 480px) {

#toc_container {
display: block !important;
width: 80% !important;
background: #f5f5f5; /* 背景色 */
border: 5px solid #ccc; /* 枠 */
border-color: #008c8c;
border-radius: 20px;
font-size: 90%; /* フォントサイズ */
box-sizing: border-box; /* スマホの横揺れ防止 */
line-height: 1.2; /* 行間 */
margin: auto ; /* 外側の余白 */
padding: 1em 1em; /* 内側の余白 */
}

.toc_title {
text-align: center; /* 中央寄せ */
background: #008c8c; /* 背景色 */
border-bottom: 2px solid #ddd; /* 下線 */
padding: 0.4em 0; /* 内側の余白 */
color: #ffff00;
border-radius: 20px;
font-size: 120%;
font-weight: bold;
}
.toc_toggle a {
color: #ffd500;
}

#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線 */
}

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

font-weight: bold;
}

#toc_container ul ul {
padding: 0em 0 0em 0em;
font-size: 90%;
}

#toc_container li {
margin-bottom: 0.5em;
padding-bottom: 0.2em;
}
}

この上のコードを追記するだけで大丈夫です\(^o^)/

@media only screen and (max-device-width: 480px)

このコードを追記してCSSを書くことで、スマートフォン専用のCSSを書くことができます。

縮尺等はお任せください\(^o^)/!

そのままコピペしていただければ…!大丈夫!!

さぁ見てください自分のスマホで!ほら!

完成!まとめたCSSをどうぞ!

では、下に全てまとめたCSSコードを貼り付けておきます!

これ全部コピーして貼り付けるだけで、僕の目次デザインになります。


#toc_container {
display: block !important;
width: 80% !important;
background: #f5f5f5; /* 背景色 */
border: 5px solid #ccc; /* 枠 */
border-color: #008c8c; /*枠線の色*/
border-radius: 20px; /*枠の角を丸くする*/
font-size: 110%; /* フォントサイズ */
box-sizing: border-box; /* スマホの横揺れ防止 */
line-height: 1.2; /* 行間 */
margin: 36px auto; /* 外側の余白 */
padding: 1em 2em; /* 内側の余白 */
}

.toc_title {
text-align: center; /* 中央寄せ */
background: #008c8c; /* 背景色 */
border-bottom: 2px solid #ddd; /* 下線 */
padding: 0.4em 0; /* 内側の余白 */
color: #ffff00;
border-radius: 20px;
font-size: 130%;
font-weight: bold;
}
.toc_toggle a {
color: #ffd500;
}

#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線 */
}

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

font-weight: bold;
}

#toc_container ul ul {
padding: 0em 0 0em 0em;
}

#toc_container li {
margin-bottom: 0.5em;
padding-bottom: 0.2em;
}

@media only screen and (max-device-width: 480px) {</pre>
#toc_container {
display: block !important;
width: 80% !important;
background: #f5f5f5; /* 背景色 */
border: 5px solid #ccc; /* 枠 */
border-color: #008c8c;
border-radius: 20px;
font-size: 90%; /* フォントサイズ */
box-sizing: border-box; /* スマホの横揺れ防止 */
line-height: 1.2; /* 行間 */
margin: auto ; /* 外側の余白 */
padding: 1em 1em; /* 内側の余白 */
}

.toc_title {
text-align: center; /* 中央寄せ */
background: #008c8c; /* 背景色 */
border-bottom: 2px solid #ddd; /* 下線 */
padding: 0.4em 0; /* 内側の余白 */
color: #ffff00;
border-radius: 20px;
font-size: 120%;
font-weight: bold;
}
.toc_toggle a {
color: #ffd500;
}

#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線 */
}

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

font-weight: bold;
}

#toc_container ul ul {
padding: 0em 0 0em 0em;
font-size: 90%;
}

#toc_container li {
margin-bottom: 0.5em;
padding-bottom: 0.2em;
}
}

色に迷ったらどうすればいいの?

ijmaki / Pixabay

 

読者

色をカスタマイズしろって言われても…

どうやって色選んでコードを入手すれば良いんですかぁ?!

うんうん、そうだよね。

ということで、必殺技を教えちゃいます。

色の名前とカラーコードが一目でわかるWEB色見本 原色大辞典

このサイトへ飛んでみてください。

いっぱい色がありますね。

では、このサイトのカラーに近い、「ダークレッド」を探してクリックしてみます。

darkred

#8b0000

と書いてありますね?これで色のHTMLコードはわかります。

それでは、「darkredの配色パターン」をクリックしてみてください。

これがまた便利で…泣ける。

「コンプリメンタリー配色」は、先程も言ったような「色相環の正反対にある色同士の配色」を表示してくれています。

僕はここからデザインカラーを決めていたわけですねぇ。

 

じょさなん

他にも色々な色のパターンが表示されてるから、わざわざ色の勉強しなくても良いんだぜ?

凄いぜネット社会。

 

オレンジパターンのCSSも公開!

このデザインで色を編集してみようかな…

このデザインでどんなパターンの目次が作れるのかな…!!

なんて思ってる人がいらっしゃいましたら、オレンジの目次なんかどうでしょうか?

別のブログのCSSでもデザインしてみましたので、もしCSSが欲しいという方は、以下のコードを貼り付けるだけでPCもスマホもバッチリですよぉ〜!


#toc_container {
display: block !important;
width: 80% !important;
background: #f5f5f5; /* 背景色 */
border: 5px solid #ccc; /* 枠 */
border-color: #ff8f1f;
border-radius: 20px;
font-size: 110%; /* フォントサイズ */
box-sizing: border-box; /* スマホの横揺れ防止 */
line-height: 1.2; /* 行間 */
margin: 36px auto; /* 外側の余白 */
padding: 1em 2em; /* 内側の余白 */
}

.toc_title {
text-align: center; /* 中央寄せ */
background: #ff8f1f; /* 背景色 */
border-bottom: 2px solid #ddd; /* 下線 */
padding: 0.4em 0; /* 内側の余白 */
color: #fff;
border-radius: 20px;
font-size: 130%;
font-weight: bold;
}
.toc_toggle a {
color: #ffd500;
}

#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線 */
}

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

font-weight: bold;
}

#toc_container ul ul {
padding: 0em 0 0em 0em;
}

#toc_container li {
margin-bottom: 0.5em;
padding-bottom: 0.2em;
}

&nbsp;

#main .top-post-list .post-list a img {
border-radius: 5.0px;
}

@media only screen and (max-device-width: 480px) {

#toc_container {
display: block !important;
width: 80% !important;
background: #f5f5f5; /* 背景色 */
border: 5px solid #ccc; /* 枠 */
border-color: #ff8f1f;
border-radius: 20px;
font-size: 90%; /* フォントサイズ */
box-sizing: border-box; /* スマホの横揺れ防止 */
line-height: 1.2; /* 行間 */
margin: auto ; /* 外側の余白 */
padding: 1em 1em; /* 内側の余白 */
}

.toc_title {
text-align: center; /* 中央寄せ */
background: #ff8f1f; /* 背景色 */
border-bottom: 2px solid #ddd; /* 下線 */
padding: 0.4em 0; /* 内側の余白 */
color: #fff;
border-radius: 20px;
font-size: 120%;
font-weight: bold;
}
.toc_toggle a {
color: #ffd500;
}

#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線 */
}

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

font-weight: bold;
}

#toc_container ul ul {
padding: 0em 0 0em 0em;
font-size: 90%;
}

#toc_container li {
margin-bottom: 0.5em;
padding-bottom: 0.2em;
}
}

 

じょさなん

いやぁ〜なんて素晴らしいCSSコードなんだ…!

惚れた?惚れたっしょ?(・∀・)ニヤニヤ

 

今回参考にさせていただいたブログ

ではでは、これにてこの記事の内容は終了となります。

皆様お気に入りの目次は作れたでしょうか?

今回のこの記事、目次を作るにあたって大変参考にさせていただいたブログをここに載せておきます。

僕もこの方のCSSにかなりお世話になりました…

Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出!

 

では、これにて!

ばいばい〜!

 

 

じょさなん

アフィリエイトリンクを2分で綺麗にカスタマイズする方法も記事になってます!

もしよろしければどうぞ〜

 

アフィリエイトリンクを2分で綺麗にカスタマイズする。Amazon、楽天向き。

 

スポンサードリンク

⇩〜〜お知らせ〜〜⇩

読者さん
JOSALOGが、無料のメールセミナーを始めたって…?
 
じょさなん
そうなんすよ。 【JOSALOGのブログで稼ぐ★メールセミナー】をはじめました…。 無料で、「僕がブログを始めた時に知りたかった情報」を毎日配信し続けるっちゅうものですね。
   

副業としてブログを始めてみたい。

ブログの集客や収益化がうまくいかない。

稼いでいる人は何を考えているのか知りたい。

てか、まず何から始めればいいかわからない。

 

そんな人は、迷わず登録や!

 

 

    スポンサードリンク



    スポンサードリンク

    この記事がためになったらシェア!

    コメントを残す

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