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

WPテーマ「STORK」カスタマイズ!SANGO風?目次の作り方!

 

ここあです。

 

私はWordPressテーマ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コードがコチラです!

/*目次カスタマイズ*/
@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;
}

/* 目次のh2フォント設定 */
ul.toc_list li a {
font-size:16px;
font-weight:bold;
color:#777;
}

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

/* 目次のh3フォント設定 */
.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;
}

/* 目次のh2フォント設定 */
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;
}

/* 目次のh3フォント設定 */
.toc_list ul li a {
font-size:14px;
font-weight:normal;
color:#888;
text-decoration:none;
}
}

 

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

設定は以上です!

 

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

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

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

 

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

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

 

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

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

 

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

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

Table of Contents Plus:設定画面

 

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

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

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

 

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

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

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

 

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

申し訳ございません。

 

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

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

 

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

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

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

 

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

h2タグの表示のみにしています^^;

 

Table of Contents Plus:設定画面

 

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

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

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

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

 

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

/* 目次タイトルのフォント設定 */
p.toc_title {
font-size:24px;←タイトル文字の大きさ
color:#6bb6ff;←タイトル文字の色
position:relative;
left:-35% !important;←タイトル文字の位置
top:10px;
}

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

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

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

 

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

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

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

 

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

目次の背景と

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

 

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

/* 目次の枠線 */
#toc_container{
border-top: solid 8px ←ラインの太さ
#6bb6ff;←ラインの色
background:#f9f9f9 !important;←背景の色
}

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

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

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

 

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

目次のタイトル左にある

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

 

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

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

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

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

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

 

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

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

 

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

/* 目次のh2フォント設定 */
ul.toc_list li a {
font-size:16px;←文字の大きさ
font-weight:bold;←文字の太さ(細くしたい場合はnormalに)
color:#777;←文字の色
}

ul.toc_list li a:hover{
color:#f05689;←マウスオーバーした時の文字の色
text-decoration:none;
}

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

 

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

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

h2と同じです。

/* 目次のh3フォント設定 */
.toc_list ul li a {
font-size:16px;←文字の大きさ
font-weight:normal;←文字の太さ(太くしたい場合はboldに)
color:#888;←文字の色
}

.toc_list ul li a:hover {
color:#f05689;←マウスオーバーした時の文字の色
text-decoration:none;
}

 

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

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

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

いかがでしたか?

 

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

 

今回、私が説明したのは

PC版のカスタマイズ(調整)方法だけ^^

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

 

ということで、今回は

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

ご紹介しました。

 

目次に関しては…

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

 

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

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

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

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!SANGO風?目次の作り方!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。