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

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

ここあです。

 

私はWordPressテーマ「STORK」(ストーク)の

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

カテゴリー一覧はこちら

 

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

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

 

それが目次

 

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

 

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

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

別にいいかな?って…(笑)

 

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

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

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

 

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

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

 

リクエストをくれた方に

どんな目次にしたいんですか?」って聞いたところ…

サンプルで送ってくれたページはSANGOの目次。

 

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

とりあえずがんばることに…^^

 

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

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

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

 

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

 

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

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

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

 

我ながらやれば出来る子!」と自画自賛しつつ…(笑)

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

 

目次がSANGO風になると

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

STORK」でSANGOもどきができるかもしれません(笑)

 

それはそれで面白いので、ついでにサイトの配色を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年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。