THE THOR(ザ・トール)カスタマイズ – 目次デザイン

THE THORには目次機能が標準搭載されていますが、デザインも機能もとてもシンプルなものになっています。

あまりにもシンプルなのでもう少し読者の目に留まりやすいデザインに変更したいと思い、検索してみたところ以下の記事で紹介されているデザインが綺麗でしたので参考にさせていただきカスタマイズしてみました。

カスログ for THE THOR

「THE THOR」のもくじをカスタマイズしてみました。CSSコピペで実装できるものとテーマファイルを編集するもの、2種…

以下が完成型の目次です。

それでは目次に従って手順を説明していきます。

子テーマ用outline.php作成

outline.phpを子テーマにコピー

目次を出力している outline.php を子テーマ用に作成するために親テーマからコピーします。その際親テーマのフォルダ構成と同じになるように子テーマ内にもフォルダを作成します。

  1. 子テーマフォルダ the-thor-child の直下に inc という名称のフォルダを作成し、さらにその中に front という名称のフォルダを作成します。
  2. 親テーマフォルダ the-thor/inc/front 内にある outline.php を①で作成した子テーマ内の front 内にコピーします。

子テーマ用outline.phpの編集

  1. コピーした子テーマ用の outline.php133行目を書き換えます。

編集前

<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>

編集後

<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>

目次のタイトルに「outline_head」という名称のclassをつけ、「目次」の前にアイコン 「icon-list2」をつけるための追記をします。なお、目次の手前に半角スペースを入れてアイコンと文字の隙間を調整しています。

子テーマ目次スタイル記入

子テーマのstyle-user.css に以下のCSSを記述します。

style-user.css
/*目次*/
.content .outline__head{
	background:#000;
	padding: 10px 20px;
	margin: -10px  -10px;
}
.content .outline {
	border: 2px solid #000;
	padding: 10px;
	position:relative;
	border-radius:3px;
	width:100%;
	margin:3rem 0;
}
.content li ul li .outline__number{
	font-weight:bold;
	background:transparent;
	color:#000;
	width:auto;
}
.content .outline__number{
	width:2.5rem;
	height:2.5rem;
	padding:0;
	line-height:2.5rem;
	text-align:center;
	background:#000;
	color:#fff;
	border-radius:50%;
}
.content .outline__link {
	display: block;
}
.content .outline__link:hover {
	color: #cfcfcf;
}
.outline__title {
	color: #fff;
	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:#fff;
}
.content .outline__switch + .outline__list {
	background: transparent;
	margin-left: 0;
}
.outline__list-2 > li > a{
	font-weight:700;
}
このブログで使用しているWordPressテーマ:THE THOR

  • 圧倒的にSEOに強く抜群に上位表示されやすい圧倒的にSEOに強く上位表示されやすい「国内最高クラスのSEO最適化テーマ」
  • 息を呑むほどに美しく・プロ仕様のデザイナーズサイトが簡単に作れる。
  • サイトで集客し収益を上げるための「集客・収益化支援システム」を搭載。
  • 革新的な高速表示技術を多数装備した「国内屈指の高速テーマ」
  • 国内随一と言っても過言ではない機能数と簡単に使いこなせる操作性。
  • メールサポート・操作マニュアル/会員フォーラム・無料バージョンアップ有
  • 要望や最新技術を取り入れ、機能追加改善を繰り返す「進化し続けるテーマ」
利用者の声

M.Oさん:ブロガー
トールはとてもSEOに強いテーマ
FITの無料テーマ(ライオンブログ・ライオンメディア)も無料とは思えないほどに素晴らしいテーマですが、トールはその上を行く最高のテーマだと思います。私はこれまでたくさんの有料テーマを使ってきましたが、そのなかでも断トツ一番のテーマでした。テスト版を1ヶ月ほど使わせていただきましたが使い始めてから短期間でGoogleで1ページ目に表示され始めていて、とてもSEOに強いテーマだというデータが取れました。(SEOに強いことで有名なテーマ)○○○もこれまで随分と使いましたが、その○○○と比べてもトールのほうがSEOに強いテーマだと思います。正規版がリリースされたら手持ちのサイトは全てトールに乗り換えるつもりです。


Nさん:有名凄腕アフィリエイター
数十万円するような機能が付いてきて驚き
トールは、ブロガー・アフィリエイター向けテーマと銘打つだけあって、機能面もデザイン面もSEOに関してまでも良く作り込まれているという印象を受けました。本来プラグインを導入しなければ実現できないような機能であっても、トールには標準で備わっている。例えば簡易お問い合わせ機能なんて私みたいなアフィリエイターにはちょうどいい機能です。アフィリエイターの視点で言えば、標準でアフィリエイトタグ管理機能とランキング機能、それから絞り込み検索機能がついているのはうれしいですね。アフィリエイトタグを一元管理できれば、修正も1か所で済むし、それらのタグをボタン一つでランキングコンテンツとして作り上げることができるランキング機能もうれしいですね。私は以前、エンジニアの方に、これに似た機能を数十万円で作ってもらっているので、少し悔しいですよ。それから、テーマとして絞り込み検索が備わっているのは驚きました。私の知る限りそういった無料プラグインもなかったように思います。


R.Aさん:WEBデザイナー
他の有料テーマを使ってサイトを作っていた時の時間は何だったんだろう。
画像編集ソフトを使わなくてもテーマの機能として画像が簡単に加工できるのはいいですね。サイト制作作業の大幅な時短になりそうです。これまでは新しくサイトを作るときって、なんだかんだ丸1日から2日くらいサイトのレイアウトとかデザインとかをいじくり回してましたけど、ザ・トールでは数時間でいい感じのサイトが完成しましたよ。今まで(デザインが売りの有名テーマ)○○○のテーマを使ってサイトを作っていた時の時間は何だったんだろうって感じです。