WPテーマ「STORK」カスタマイズ！目次をSANGO風にしてみよう!

ここあです。

私はWordPressテーマSTORK（ストーク）の

カスタマイズ系の記事をいろいろと書いています。

STORKカスタマイズ！コピペだけでオシャレにする方法まとめ

しかし、いろいろカスタマイズ方法を書いている中で

唯一書いていない記事がありました。

それが目次。

目次も多少はカスタマイズしていたものの…

記事にする程のことでもなかったし

私はあまり目次をしっかり見ないタチなので

別にいいかな？って…（笑）

ということで、目次のカスタマイズ記事に関しては

完全にスルーしていたんですが…

やはり、目次のカスタマイズをしたい方もいらっしゃるようで…＾＾

今回は、ちょっとリクエストをいただいたこともあり

がっつり目次をカスタマイズしてみました。

※現在、リクエストによる制作は受け付けていません。

リクエストをくれた方に

「どんな目次にしたいんですか？」と伺ったところ…

サンプルで送ってくれたのは、なんとSANGOの目次…＾＾；

「な、なるほど…。確かに可愛いですね…」と

とりあえず、がんばって作りました（笑）

ということで、今回ご紹介するのは

読者さんからリクエストをいただいた

WPテーマSANGO風の目次にする方法。

私もWebに関してはまだまだ勉強中。

上手くできるかは分からなかったけど

それでも、勉強したことは無駄にならないと思い

いろいろと試行錯誤しながら無事に完成＾＾

「我ながらやれば出来る子！」と自画自賛しつつ…（笑）

せっかくなので、記事にしてみました。

目次がSANGO風になると

見出しをフラットなパステル系のカラーにすれば

私のようにSTORKでちょっとした

SANGOもどきのデザインができます（笑）

ということで、設定方法は全て公開するので

「STORK買っちゃったけど、SANGOもいいなぁ〜」と

気持ちが浮ついてる方は必見です（笑）

ただし、タブレット以下は調整が大変なので

SANGO風にはなりません＾＾；

色の雰囲気だけ合うように設定してますので

「それでもOK！」という方のみコピーして使ってください。

SANGO風の目次とは…

先にSANGO風の目次について説明しておきますね。

SANGO風の目次とは、これ ↓

今回はこんな感じの目次にする方法をご紹介致します。

いきなりSANGO風とか言われても

「知らねぇよ！」って感じですよね…＾＾；

記事内に目次を表示させるには…

すでに分かっている方、導入済みだという場合は読み飛ばしてください。

まだ、これからというあなたはここから設定しましょう。

記事内に目次を表示させるためには

Table of Contents Plusというプラグインがおすすめです。

特に今回のカスタマイズには、このプラグインは必須。

ダッシュボードメニューから

プラグイン → 新規追加をクリック。

プラグインの新規追加画面が表示されたら

画面右上のキーワードの入力欄にTable of Contents Plusと入力。

Table of Contents Plusのプラグインが表示されたら

今すぐインストールをクリックし

インストール出来たら、有効化しましょう。

まずは第一ステップ完了です。

SANGO風もくじの設定方法

それではいよいよSANGO風もくじの設定方法です。

まずは、以下の場所に私が用意した

CSSコードをコピペしましょう！

とりあえずはそれでOK!＾＾

CSSコードの設置場所は…

ダッシュボードメニューから外観 → カスタマイズをクリックし

追加CSSに記述してください。

追加する超長いCSSコードがコチラです！

追加CSSにコピペ

@media only screen and (min-width: 767px){
#toc_container{
border-top: solid 8px
#6bb6ff;
background:#f9f9f9 !important;
}
p.toc_title {
font-size:24px;
color:#6bb6ff;
position:relative;
left:-39% !important;
top:10px;
}
ul.toc_list li a {
font-size:16px;
font-weight:bold;
color:#777;
}ul.toc_list li a:hover{
color:#f05689;
text-decoration:none;
}

.toc_list ul li a {
font-size:16px;
font-weight:normal;
color:#888;
}

.toc_list ul li a:hover {
color:#f05689;
text-decoration:none;
}

span.toc_toggle{
font-size: 14px !important;
}

span.toc_toggle a{
font-size: 14px;
color:#6bb6ff;
}

#toc_container .toc_title::before {
display: inline-block;
color: #fff;
font-family: FontAwesome;
font-size: 20px;
line-height: 50px;
content: "\f0ca";
}

#toc_container .toc_title:before {
display:inline-block; width: 50px;
height: 50px;
border-radius: 50%;
background:#6bb6ff;
margin-right:8px;
}

#toc_container li a{
border-top-width:0px;
line-height:30px;
}
}

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

#toc_container{
border-top: solid 8px
#6bb6ff;
background:#f9f9f9 !important;
}

#toc_container .toc_title:before{
content: "\f0f6";
font-family: FontAwesome;
display: inline-block;
margin-right:5px;
width: 1.2em;
color:#6bb6ff;
}

p.toc_title {
text-align: center;
font-size:17px;
color:#6bb6ff;
}

ul.toc_list li a {
font-size:16px;
font-weight:bold;
line-height: 2em;
color:#777;
text-decoration:none;
}

ul.toc_list li a:hover{
color:#6bb6ff;
}

.toc_list ul li a {
font-size:14px;
font-weight:normal;
color:#888;
text-decoration:none;
}
}

コピーした瞬間に、目次がSANGO風に早変わりします。

設定は以上です！

と、言いたいところですが…

多少、説明は欲しいですよね＾＾

ということで、簡単に設定方法も解説しておきます。

SANGO風もくじのカスタマイズ方法

簡単に解説していきます。

目次の番号表示・非表示の仕方

目次に番号表示が不要な場合は…

Table of Contents Plusの設定画面にある

以下の場所のチェックを外してください。

代わりにタイトルに自分で数字を入れたり

「●」を入れても良いと思います。

その辺はあなたの好みにお任せ…。

目次の見出しタグを切り替える方法

今回、ご紹介するSANGO風目次に関しては

h2および、h3タグまでしかCSSの設定をしておりません。

なので、h4タグを多用される場合は、ご使用を控えてください＾＾

申し訳ございません。

私は現在、h2タグしか表示しない設定にしてあります。

h2タグとh3タグを表示させたい場合は…

Table of Contents Plusの設定画面にある

上級者向けという設定項目の中

見出しレベルのチェックで切り替えられます。

わたしはあまり、ダラっと長い目次は美しくないと思うので

h2タグの表示のみにしています＾＾；

目次のタイトル位置の調整方法

目次の表示・非表示切り替えボタンをOFFにすると

目次のタイトルの表示位置がズレるかもしれません。

また、タイトルの文字数によって表示位置が左右ズレます＾＾；

そんな場合は以下の場所で調整してください。

上記コードのピンク色の文字部分-35%の数字を変更すれば

左右の位置が調整できます。

数字を増やしたり減らしたりしてみてください。

ちなみにfont-size:24px;の数字を変えれば

目次タイトルの文字の大きさも調整可能。

color:#6bb6ff;で文字の色もご自由にどうぞ。

目次の背景と上部ラインの色を変える方法

目次の背景と

最上部の水色のラインを変更する場合は…

以下の部分で調整します。

上記コードのborder-top: solid 8px #6bb6ff;の部分で

ラインの太さや色（現在は水色）が変更できます。

背景色はbackground:#f9f9f9 !important;のカラーコードを変えてください。

目次のアイコンの背景色を変える方法

目次のタイトル左にある

アイコンの背景色を変える方法もお伝えしておきます。

アイコンの背景色を変える場合は

以下のコードを変更してください。

上記コードのbackground:#6bb6ff;のカラーコードを変えることで

アイコンの背景色は変わります。

目次のh2見出しをカスタマイズする方法

h2の見出しをカスタマイズする方法は以下の通りです。

以下のコードで変更が可能です。

上記変更箇所を記しましたので、変更してみてください。

目次のh3見出しをカスタマイズする方法

h3のカスタマイズ方法も基本的には

h2と同じです。

目次もコピーだけで簡単にカスタマイズできる！

目次をカスタマイズするためのコードと

コードを調整するための方法をご紹介してきましたが

いかがでしたか？

まぁ、何でもやろうと思えばできるもんですね…（笑）

今回、私が説明したのは

PC版のカスタマイズ（調整）方法だけ＾＾

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

と書かれたコードの以下の部分は

タブレットやスマホ用のコードになります。

こちらの調整の仕方は書いていません。

というのも、タブレットやスマホ用のコードは

それほど調整する箇所もなく

PC版の色を変更すればタブレットやスマホ版の色も

あなた自身の力だけで十分変えられるハズです。

なので、ぜひタブレットやスマホ版の色調整は

どこのカラーコードを調整すればいいのか

テストしながら探ってみてください。

色を変えるぐらいなら、もう問題はないはず…＾＾

ということで、今回は

STORKの目次をSANGO風に変更する方法を

ご紹介しました。

目次に関しては…

もう1つ、クールな目次の設定方法もご紹介しています。

違う目次も見てみたいという方は

以下の記事も参考にしてみてください＾＾

目次をGoogleフォントでオシャレにしよう!

最後までお読みいただきありがとうございました！