この記事では目次のカスタマイズを紹介します。
コードをコピペするだけなので、誰でも簡単にカスタマイズすることができます。
オプションで画像を入れたり、色も簡単に変更できるように説明を入れておくね
カスタマイズ結果
ギュッとコンパクトになったね。くまもひょっこりしてるよ
このカスタマイズのこだわりをちょっとだけ説明するね
使いやすい様にカスタマイズしたつもりです。くまは遊び心です。
ちなみにPCでは
こんな感じでコンパクトに表示。
[toc]
カスタマイズの準備
これからカスタマイズしますが、まずはじめにこちらを読んでください。
カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。
カスタマイズは仮に同じテーマであっても、100％成功する保証はありません。
準備といってもカスタマイズのコードを書き込む場所を開くだけです。
- 追加CSS（初心者向け）
- style.css（慣れた人向け）
このどちらから開きます。
追加CSSを開くにはワードプレスの外観＞カスタマイズ＞追加CSSの順で開きます。
使い方がわからない方はこちら
style.cssを開くにはワードプレスの外観＞テーマエディター＞jin-child＞スタイルシートの順で開きます。
どちらで大丈夫です♪ 少ししかカスタマイズをしないなら追加CSSで十分です。
カスタマイズのコード
こちらのコードをコピーして、さきほど開いた追加CSS（もしくはstyle.css）に貼り付けてください。
コメントなしのコード
/*目次 ギュッとしてヒョコ*/
div#toc_container {
max-width: 450px;
}
#toc_container:before {
opacity: .05;
border: 2px solid;
}
#toc_container .toc_title {
text-align: left;
line-height: 55px;
padding: 0px 20px;
background: #f4f4f5;
}
div#toc_container .toc_title {
color: #797979!important;
}
#toc_container .toc_title a {
padding: 5px;
text-decoration: underline;
text-underline-position: under;
color: #ccc;
}
#toc_container.contracted .toc_title {
padding: 0 20px;
}
span.toc_toggle {
color: transparent;
}
ul.toc_list:before {
display: block;
color: #ccc;
margin-bottom: 15px;
font-size: .9em;
}
#toc_container .toc_list>li {
margin-left: 0;
padding-left: 30px;
padding-bottom: 5px;
}
div#toc_container .toc_list li a {
color: #89baff!important;
}
#toc_container .toc_list>li ul {
margin-bottom: 0px;
}
#toc_container .toc_list>li>ul>li {
margin-bottom: 10px;
padding-left: 25px;
}
#toc_container .toc_list>li>ul li a:before {
content: "";
background: #eee;
left: -22px;
top: 3.5px;
width: 10px;
height: 10px;
border-radius: 50%;
}
ul.toc_list:after {
content: url(★画像URL★);
position: absolute;
right: 0;
bottom: 0;
opacity: .3;
}
@media (min-width: 768px){
#toc_container .toc_title {
margin-bottom: 0;
margin-top: 0;
font-size: 22px;
}
div#toc_container.contracted .toc_title {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#toc_container .toc_list {
padding: 15px 20px;
padding-bottom: 20px;
}
ul.toc_list:before {
content: "クリックするとその場所へジャンプします";
}}
@media (max-width: 767px){
#toc_container .toc_title {
margin-bottom: 0;
margin-top: 0;
font-size: 22px;
}
div#toc_container.contracted .toc_title {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#toc_container .toc_list {
padding: 15px 20px;
padding-bottom: 20px;
}
ul.toc_list:before {
content: "タップするとその場所へジャンプします";
}}
コメントありのコード
/*--------------------------------------
目次 ギョッとしてヒョコ
--------------------------------------*/
div#toc_container {/*目次全体*/
max-width: 450px;/*最大の幅を指定するよ*/
}
#toc_container:before {/*1番外の枠線*/
opacity: .05;/*透明度0.05％*/
border: 2px solid;/*線幅と線の種類*/
}
#toc_container .toc_title {/*「もくじ」部分*/
text-align: left;/*左揃えに*/
line-height: 55px;/*行間の高さ*/
padding: 0px 20px;/*内側の余白ー上下ー左右*/
background: #f4f4f5;/*背景色*/
}
div#toc_container .toc_title {/*強めに指定*/
color: #797979!important;/*文字色-強制*/
}
#toc_container .toc_title a {/*ひらく・とじる部分*/
padding: 5px;/*内側の余白ー上下左右*/
text-decoration: underline;/*下線追加*/
text-underline-position: under;/*下線の位置*/
color: #ccc;/*文字色*/
}
#toc_container.contracted .toc_title {/*とじた状態での設定*/
padding: 0 20px;/*内側の余白調整ー上下ー左右*/
}
span.toc_toggle {/*[ ]部分*/
color: transparent;/*透明に*/
}
ul.toc_list:before {/*～ジャンプします部分*/
display: block;/*一行になるように*/
color: #ccc;/*文字色*/
margin-bottom: 15px;/*外側の下余白*/
font-size: .9em;/*文字サイズ*/
}
#toc_container .toc_list>li {/*もくじリストの微調整 開始*/
margin-left: 0;
padding-left: 30px;
padding-bottom: 5px;
}
#toc_container .toc_list>li ul {
margin-bottom: 0px;
}
#toc_container .toc_list>li>ul>li {
margin-bottom: 10px;
padding-left: 25px;
}/*もくじリストの微調整 終了*/
div#toc_container .toc_list li a {/*もくじリスト内のテキストリンク*/
color: #89baff!important;/*文字色ー強制*/
}
#toc_container .toc_list>li>ul li a:before {/*h3の前の ●*/
content: "";/*おきまり*/
background: #eee;/*背景色*/
left: -22px;/*左からの距離*/
top: 3.5px;/*上からの距離*/
width: 10px;/*幅*/
height: 10px;/*高さ*/
border-radius: 50%;/*丸にする*/
}
ul.toc_list:after {/*ひょっこり画像用*/
content: url(★画像URL★);/*アップした画像URL*/
position: absolute;/*自由に動けるように*/
right: 0;/*右からの距離*/
bottom: 0;/*下からの距離*/
opacity: .3;/*透明度30%*/
}
@media (min-width: 768px){/*768px以上ーPC用*/
#toc_container .toc_title {/*「もくじ」部分*/
margin-bottom: 0;/*外側の下余白*/
margin-top: 0;/*外側の上余白*/
font-size: 22px;/*文字の大きさ*/
}
div#toc_container.contracted .toc_title {/*閉じたときの設定*/
margin-top: 0px !important;/*絶対上の余白なし*/
margin-bottom: 0px !important;/*絶対下の余白なし*/
}
#toc_container .toc_list {/*もくじリストの微調整*/
padding: 15px 20px;
padding-bottom: 20px;
}
ul.toc_list:before {
content: "クリックするとその場所へジャンプします";/*PCでの言葉*/
}}
@media (max-width: 767px){/*767px以下ーモバイル用*/
#toc_container .toc_title {/*「もくじ」部分*/
margin-bottom: 0;/*外側の下余白*/
margin-top: 0;/*外側の上余白*/
font-size: 22px;/*文字の大きさ*/
}
div#toc_container.contracted .toc_title {/*閉じたときの設定*/
margin-top: 0px !important;/*絶対上の余白なし*/
margin-bottom: 0px !important;/*絶対下の余白なし*/
}
#toc_container .toc_list {/*もくじリストの微調整*/
padding: 15px 20px;
padding-bottom: 20px;
}
ul.toc_list:before {
content: "タップするとその場所へジャンプします";/*モバイルでの言葉*/
}}
目次に画像をひょっこりさせる
ぼくはしろくまをひょっこりさせました。やり方は簡単です。
コメントなしのコード60～66行目部分をちょっくら変更していきます。
ul.toc_list:after {
content: url(★画像URL★);
position: absolute;
right: 0;
bottom: 0;
opacity: .3;
}
黄色でハイライトされている部分の★画像URL★部分に画像のURLをコピペしてあげれば、画像が表示されます。
使用したしろくまの画像
ぼくは幅50px、高さ100pxのサイズで画像を作成しました。保存形式はSVG画像です。
SVGはめちゃくちゃ綺麗ですが、イラストレーターが無いと作成が難しいです。無難にPNG画像でもそこそこキレイに挿入できます。
SVG画像とは
拡大しても縮小してもずっとキレイなWEBで使える画像です。
SVG画像について
「SVG画像を使って美しいイラストを挿入しよう」
イラストレーターについて
「ブログでイラストレーターを使うメリット」
カスタマイズの締め
カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。
これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。
キャッシュ削除
簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。
ここにボックスタイトルを入力
