【THE THOR】もくじのカスタマイズ

カスタマイズ

THE THOR にはデフォルトで目次機能がついていて、プラグインなしで各記事に目次を実装できます。
このデザインがちょっとシンプルすぎて味気なかったので、シンプルさを損なわない程度にカスタマイズしてみました。

  もくじ

実装するとこんな感じです

①シンプルに枠線で囲んだデザイン

こちらは CSS をコピペするだけで実装できます。

もくじ

②ボックスのタイトル部分に色を付けたデザイン

現在当サイトで採用しているデザインです。こちらはテーマファイルを編集する必要があります。

もくじ

①のデザインにカスタマイズする方法

編集するファイル

子テーマの「style-user.css」に以下をコピペします。

WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
から編集できます。

追加する CSS

色や文字を指定している部分にはコメントを入れてあるので、各自変更してください。

style-user.css

/*もくじ*/
.content .outline {
	border: 2px solid #cfcfcf; /*枠線の色とスタイル*/
	padding: 10px 0 20px;
	position:relative;
	border-radius:3px;
}
.content li ul li .outline__number{
	font-weight:bold;
	background:transparent;
	color:#cfcfcf; /*h3見出し前の数字の色*/
	width:auto;
}
.content .outline__number{
	width:2.5rem;
	height:2.5rem;
	padding:0;
	line-height:2.5rem;
	text-align:center;
	background:#cfcfcf; /*丸数字の背景色*/
	color:#fff; /*丸数字の文字色*/
	border-radius:50%;
}
.content .outline__link {
	display: block;
	color:#333;
}
.content .outline__link:hover {
	background: #cfcfcf; /*カーソルを乗せた時の背景色*/
}
.outline__title {
	color: #333; /*「もくじ」の文字色*/
	font-weight: 700;
	width:100%;
	padding: 0 calc(100% - 10rem) 10px 2rem;
}
.content .outline__switch{
	position:absolute;
	right:1.5rem;
	top:10px;
}
.content .outline__toggle:checked + .outline__switch::before {
	content: "CLOSE"; /*「閉じる」を上書き*/
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
	margin-top: 1rem;
}
.content .outline__switch::before {
	content: "OPEN"; /*「開く」を上書き*/
	border: 0;
	color:#999; /*「開く」「閉じる」の文字色*/
}
.content .outline__switch + .outline__list {
	background: transparent;
}
.content .outline__switch + ul.outline__list {
	margin-left:0;
	margin-right:0;
	border-top:2px dotted #cfcfcf; /*「もくじ」下の点線*/
}
.content .outline__switch + .outline__list-2 li:first-child{
	margin-top:2rem;
}
.content .outline__switch + .outline__list-2 li ul li:first-child{
	margin-top:1rem;
}
.outline__list-2 > li > a{
	font-weight:700;
}
@media only screen and (min-width: 992px){
.content .outline {
	width:calc(100% - 20%);
	margin:3rem 10%;
}
.content .outline__switch + .outline__list {
	margin-left: 10px;
	margin-right:20px;
}
.outline__title {
	margin-left: 2.5rem;
}
@media only screen and (max-width: 991px){
.content .outline {
	width:100%;
	margin:3rem 0;
}
}

②のデザインにカスタマイズする方法

用意するもの

FTP ソフトとテキストエディタ
サーバーのファイルマネージャー（とテキストエディタ）
のどちらかを使用します。

編集するファイル

テーマの目次を出力する PHP ファイル

wp-content＞themes＞the-thor＞inc＞front
のフォルダ内にある「outline.php」を編集します。

子テーマの CSS ファイル

子テーマの「style-user.css」に CSS を追記します。
WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
から編集できます。

テーマファイルを編集する

「outline.php」をダウンロード

まず最初に、FTP ソフトかサーバーのファイルマネージャーを使用して
wp-content＞themes＞the-thor＞inc＞front
と進み、その中の「outline.php」というファイルをダウンロードしてください。

このファイルを開くと、132～135行目（THE THOR ver.1.3.0）に目次を出力している部分があるので、そこを編集していきます。

outline.php 132～135行目

	<div class="outline">
		<span class="outline__title">目次</span>
		<input class="outline__toggle" id="outline__toggle" type="checkbox" '.$close.'>
		<label class="outline__switch" for="outline__toggle"></label>

「outline.php」を編集する

この部分を下のソースコードと差し替えてください。

3行目で「目次」というタイトル部分の表示を変更しています。クラス名にアイコンのコードを追加することで、タイトル左側に好きなアイコンを追加できます。（下のコードには当サイトで使用しているものが入っているので、変更したい場合は好みのものに書き換えてください）

outline.php

	<div class="outline">
	<div class="outline__head">
		<span class="outline__title icon-list2"> もくじ</span>
	</div>
		<input class="outline__toggle" id="outline__toggle" type="checkbox" '.$close.'>
		<label class="outline__switch" for="outline__toggle"></label>

子テーマに対応するフォルダを作りアップロードする

子テーマ直下に「inc」という名前のフォルダを作り、更にその中に「front」というフォルダを作ってください。そこに編集した「outline.php」をアップロードします。

追加する CSS

子テーマの「style-user.css」に以下をコピペします。
色や文字を指定している部分にはコメントを入れてあるので、各自変更してください。

style-user.css

/*もくじ*/
.content .outline__head{
	background:#cfcfcf;/*タイトル部分の背景色*/
	padding:10px 20px;
}
.content .outline {
	border: 2px solid #cfcfcf; /*枠線の色とスタイル*/
	padding: 10px 0 20px;
	position:relative;
	border-radius:3px;
}
.content li ul li .outline__number{
	font-weight:bold;
	background:transparent;
	color:#cfcfcf; /*h3見出し前の数字の色*/
	width:auto;
}
.content .outline__number{
	width:2.5rem;
	height:2.5rem;
	padding:0;
	line-height:2.5rem;
	text-align:center;
	background:#cfcfcf; /*丸数字の背景色*/
	color:#fff; /*丸数字の文字色*/
	border-radius:50%;
}
.content .outline__link {
	display: block;
}
.content .outline__link:hover {
	background: #cfcfcf; /*カーソルを乗せた時の背景色*/
}
.outline__title {
	color: #333; /*「もくじ」の文字色*/
	font-weight: 700;
}
.content .outline__switch{
	position:absolute;
	right:1.5rem;
	top:10px;
}
.content .outline__toggle:checked + .outline__switch::before {
	content: "CLOSE"; /*「閉じる」を上書き*/
}
.content .outline__switch::before {
	content: "OPEN"; /*「開く」を上書き*/
	border: 0;
	color:#999; /*「開く」「閉じる」の文字色*/
}
.content .outline__switch + .outline__list {
	background: transparent;
}
.outline__list-2 > li > a{
	font-weight:700;
}

@media only screen and (min-width: 768px){
	.content .outline {
		width:calc(100% - 20%);
		margin:3rem 10%;
	}
	.content .outline__switch + .outline__list {
		margin-left: 10px;
		margin-right:20px;
	}
	.outline__title {
		margin-left: 1rem;
	}
}
@media only screen and (max-width: 767px){
	.content .outline {
		width:100%;
		margin:3rem 0;
	}
	.content .outline__switch + .outline__list {
		margin-left: -5px;
		margin-right:15px;
	}
	.outline__title {
		margin-left: 0;
	}
}
Follow me ?
>

THE THOR をダウンロード
CTR IMG