【THE THOR】目次のカスタマイズ

INDEX

WordPressテーマ THE THOR
1. WordPressテーマ THE THOR 目次
2. WordPressテーマ THE THOR 目次の不満
目次のカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後の見出し
最後に

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）の「目次」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR 目次

WordPressテーマ THE THOR（ザ・トール）は、プラグインを使うこと無く「目次」を表示する機能が備わっています。

「目次」は「投稿ページ設定[THE]」→「目次設定」から設定することができます。

自分の設定は、

目次を表示するか選択：表示する
目次を表示するための最小見出し数を指定：2
目次に表示する見出しのレベルを指定：5
目次パネルをデフォルトで閉じておく：チェック無し

となっています。

WordPressテーマ THE THOR（ザ・トール）のデフォルトの「目次」は下記の様なシンプルなデザインとなっています。

「目次」は左隅に表示されてしまいます。

必要最低限の「目次」と言ったところでしょう。

WordPressテーマ THE THOR 目次の不満

WordPressテーマ THE THOR（ザ・トール）のデフォルトの目次は非常にシンプルなので、万人向けのデザインとなっています。

また、左隅に表示されるのも不満なところです。

WordPressテーマ THE THOR（ザ・トール）の見出しデザインは53種類有るのに、WordPressテーマ THE THOR（ザ・トール）の設定では「目次」のデザインを変更することができません。

と言う事で、自分のブログサイトにあったデザインの「目次」にカスタマイズしてみました。

目次のカスタマイズ

「目次」のデザインについてカスタマイズを行います。

カスタマイズ内容

「目次」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。

/************************************
** ■目次カスタマイズ
************************************/
.content .outline { /*目次ボックス設定*/
	border: 1px solid #fe619a; /*枠線*/
	padding: 15px 0; /*上下余白*/
	position:relative; /*相対位置*/
	border-radius:4px; /*角丸コーナー*/
	background:#fff2f9; /*背景色*/
	box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
	line-height: 18px !important; /*高さ*/
}
.content .outline__number{ /*数字設定*/
	font-weight:bold; /*フォント太さ*/
	background:#ffddee; /*数字の背景色*/
	color:#fe619a; /*数字の文字色*/
	border-radius:2px; /*角丸コーナー*/
	padding: 2px 5px 3px 5px; /*上下左右余白*/
	margin-right: 6px; /*右間隔*/
	font-size: 15px; /*フォントサイズ*/
	width:auto; /* widthプロパティ*/
}
.content .outline__link { /*リンク部分設定*/
	display: block; /*ブロックボックスとして表示*/
	font-weight:bold; /*フォント太さ*/
	font-size: 13px; /*フォントサイズ*/
	border-bottom: 1px dotted #fe619a; /*アンダーラインの太さとカラー*/
}
.content .outline__link:hover { /*リンク部分ホバー時*/
	background: #ffddee; /*背景色*/
	text-decoration:none; /*装飾無し*/
	color:#000; /*文字色*/
	font-weight:bold; /*フォント太さ*/
	border-bottom: 1px dotted #fe619a; /*アンダーラインの太さとカラー*/
}
.outline__title { /*目次タイトル設定*/
	color: #333; /*文字色*/
	font-weight: 700; /*フォント太さ*/
	font-size: 16px; /*フォントサイズ*/
	font-style: oblique; /*斜体フォント*/
	padding-left:16px; /*左余白*/
}
.content .outline__switch{ /*「閉じる」「開く」の表示位置設定*/
	position:absolute; /*絶対位置*/
	top:15px; /*上からの配置位置*/
	right:1.5rem; /*右からの配置位置*/
}
.content .outline__switch + .outline__list { /*目次項目設定*/
	background: transparent; /*背景色透明*/
}
.content .outline  ul li,
.content .outline ol li { /*表示間隔設定*/
    padding-left: 2.4rem ;	/*間隔設定*/
}

/*モバイル端末時調整*/
@media only screen and (min-width: 769px){ /*768px*/
	.content .outline {
		width:calc(100% - 20%);
		margin:3rem 10%;
	}
	.content .outline__switch + .outline__list {
		margin-left:  0px;
		margin-right: 25px;
	}
	.outline__title {
		margin-left: 1rem;
	}
}
@media only screen and (max-width: 768px){ /*767px*/
	.content .outline {
		width:100%;
		margin:3rem 0;
	}
	.content .outline__switch + .outline__list {
		margin-left: -10px;
		margin-right: 15px;
	}
	.outline__title {
		margin-left: 0;
	}
}