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

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

WordPressテーマ THE THOR

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

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事を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(ザ・トール)側で、色の変更と中央表示の設定ぐらいは欲しいものです。

コメント