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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

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

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

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

WordPressテーマ THE THOR 目次

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

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

自分の設定は、

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

となっています。

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

【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;
	}
}

カスタマイズ後の見出し

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「目次」は次の様に表示するようになりました。

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

ブログサイトのカラーに合わせた配色に設定し、リンク文字にホバーしたときの認識性の向上、「目次」自体を中央表示などのカスタマイズを行いました。

最後に

今回は必要最低限の「目次」のカスタマイズに留めました。

それでも、WordPressテーマ THE THOR(ザ・トール)のデフォルトの「目次」と比べると、かなり綺麗な「目次」に仕上がっています。

このようなカスタマイズをしなくても、WordPressテーマ THE THOR(ザ・トール)側で、色の変更と中央表示の設定ぐらいは欲しいものです。

コメント