LION BLOGの目次をたたんだ状態で表示させる方法

画面表示が早いWordPressテーマ「LION BLOG」（ライオンブログ）の目次をたたんだ状態で表示させる方法を紹介します。

手順どおりに進めれば、専門的な知識はほぼ必要ありません。

内容があなたの目的と完全に一致していなくても、解説がCSSやPHPのカスタムに役立つはず。

これを応用することで、子テーマのCSSからプラグインの設定（プロパティ）を変更できるよ、多分ね！

LION BLOGには目次の表示、非表示の切り替えがある
1. LION BLOGの目次のサンプル
2. LION BLOGの目次の問題点
前提条件としての子テーマ化
プラグイン「Table of Contents Plus」を利用
1. LION BLOGのソースコードの場所
2. プラグインを選んだ理由
不具合を子テーマのCSS変更で回避
1. 子テーマのstyle.cssを編集して表示を修正

LION BLOGには目次の表示、非表示の切り替えがある

LION BLOGにはプラグインを使わなくても、記事の最初の方に目次を表示する機能があります。

画像の一番下に見えますのが、LION BLOGの目次、表示/非表示の設定でございます。

WordPressのダッシュボード画面から、「外観」の「カスタマイズ」を選択、「投稿ページ設定（[LION用]）」を押すと上の画面になります。

設定の画面も分かりやすくていい。LION BLOG好き。

LION BLOGの目次のサンプル

プラグインを使わず、LION BLOGにある機能で目次を表示させると上のようなデザインになります。

ボタンを押せば開閉するし、見た目もシンプルで悪くない。CSSファイルを編集すればデザインも変更できる。

私も最初はこの状態で利用していました。

LION BLOGの目次の問題点

しかし少ししてから気づいた点が１つあります。

LION BLOGに備わっている目次は、最初の開閉状態を選べない。

最初は必ずフルオープン、なんて親切丁寧なんだろう。しかしその親切さが重たいと感じる人も中にはいるのである。

例えばページを開いて、冒頭でこんな目次をみたらどう感じますか？

どんだけ長いんや！もう別のページに行くわ！って人もいると思います。

ちなみにこの目次、まだ半分くらいなんです…さすがに長いなぁ。

[2018]子供乗せ自転車を買う前、絶対に知るべき５項目

読む人や記事の内容にもよるけど、目次が長すぎると読む気が失せることってありますよね。

上の目次のように、最初は折りたたまれていて、目次を見たい人は開くボタンを押して目次を広げるというスタイルが、読む人にとってストレスがないと私は思っています。

残念ながら、2018年1月現在のLION BLOGでは、最初は閉じた状態で目次を表示するという設定ができません。

※2018年3月追記

LION BLOGの目次機能で、最初の開閉状態が選択できるようになりました！

前提条件としての子テーマ化

今回の作業ではCSSファイルを編集します。

よく分からんって人でも、指定した場所に追加コピペでOKです。あらカンタン。

ただし、ちゃんとLION BLOGを子テーマ化した人に限る！

別に子テーマ化せんでもいいんだけど、LION BLOGがアップデートされた時に変更箇所が全部元に戻っちゃうよ。

（事実として、LION BLOGはテーマの更新を何度かしている）

そういうカスタムを繰り返すとトラブルの原因になるので、きちんと子テーマ化してから作業しましょう。

子テーマ化もそんなに難しくないから大丈夫。

子テーマ化についてはここにまとめてあります。

プラグイン「Table of Contents Plus」を利用

ごめんよ、本当はプラグインを使わなくて済む方法を考えたかった。

プラグインを使いたくないプラグインベジタリアンの人もいるもんね。プラグインの数を増やしたくない気持ちは分かります。

プラグインを使わずに実現する方法を頑張って探して、LION BLOGのソースコードの場所は見つけました。

でも結局はプラグインを使った方が簡単で、トラブルが少なそうだから、プラグインを使った方法を紹介します。

LION BLOGのソースコードの場所

親テーマフォルダの中にある「function.php」というファイルの中に、目次を表示させるためのソースコードがあります。

function.php

//目次を作成します。
function add_outline($content) {

    // 目次関連の情報を取得します。
    $outline_info = get_outline_info($content);
    $content = $outline_info['content'];
    $outline = $outline_info['outline'];
    if ($outline != '') {
        // 目次を装飾します。
        $decorated_outline = sprintf('
		<div class="outline">
		  <span class="outline__title">目次</span>
		  <input class="outline__toggle" id="outline__toggle" type="checkbox" checked="checked">
		  <label class="outline__switch" for="outline__toggle"></label>
		</div>', $outline);
        // カスタマイザーで目次を非表示にする以外が選択された時＆個別非表示が1以外の時に目次を追加します。
		if ( get_option('fit_post_outline') != 'value2' && get_post_meta(get_the_ID(), 'outline_none', true) != '1' && is_single() ) {
        	$shortcode_outline = '[outline]';
        	if (strpos($content, $shortcode_outline) !== false) {
            	// 記事内にショートコードがある場合、ショートコードを目次で置換します。
            	$content = str_replace($shortcode_outline, $decorated_outline, $content);
        	} else if (preg_match('/<h[1-6].*>/', $content, $matches, PREG_OFFSET_CAPTURE)) {
            	// 最初のhタグの前に目次を追加します。
            	$pos = $matches[0][1];
            	$content = substr($content, 0, $pos) . $decorated_outline . substr($content, $pos);
        	}
		}
    }
	return $content;
}
add_filter('the_content', 'add_outline');

関数add_outline($content)で目次を表示させています。

フルオープン状態の目次を決め打ちで出力しているので、開いた状態or閉じた状態の設定はありません。

プラグインを選んだ理由

上で書いた場所で目次を表示させていることは分かりました。

そして、子テーマによる処理の追加によって目次を閉じた状態にすることが難しいということも分かってしまった…

開閉ボタンをクリックする動きをjavascriptで実現することはできるようですが、LION BLOGはjavascriptを使わない方針のWordPressテーマです。

表示速度にそこまで大きな影響はないと思いますが、この選択はやめました。

また、プラグイン「Table of Contents Plus」が便利で、色々と応用が利くということもあって、今回はそちらを採用しています。

不具合を子テーマのCSS変更で回避

それじゃあ、LION BLOGの目次は表示しないように設定して、プラグイン「Table of Contents Plus」を導入してサクッと解決しよう！

ところがどっこい、プラグイン「Table of Contents Plus」をLION BLOGに導入すると表示が変なことになっちゃう。

よく見てください。行頭の番号に「・」が入ってます。

なんだこれは。「・」なんていらんのですよ！消えてなくなれー。

（1.1.3が強調表示＆アンダーラインなのは、たまたまカーソルがあってたからです。そこは気にせんといて）

子テーマのstyle.cssを編集して表示を修正

なんでこんな変な表示になっているのかというと、LION BLOGのCSSの設定がプラグイン「Table of Contents Plus」に影響しているからです。

Chromeでページを見ているのであれば、デベロッパーツールを使うと問題の特定がしやすくなります。

今回の件であれば、調べたい場所（プラグイン「Table of Contents Plus」の目次）にカーソルを合わせて右クリック＞「検証」を選ぶ）で、そこに関係するCSSの情報を見ることができます。

CSSの情報を見ると、親テーマのcontent.cssに書いてあるリスト設定に「・」が潜んでいます。

.content ul ul,
.content ul ol,
.content ol ul,
.content ol ol{margin-top:0;}
.content ol{counter-reset:number;}
.content ul li:before{
	content:"・";
	position:absolute;
	left:0;
}

この「content:”・”」が問題個所です。これがあるせいで、箇条書きリストの先頭に「・」が付いてしまう。

プラグイン「Table of Contents Plus」の目次だけはこの設定にしたくない。

ということで、子テーマのcontent.cssに以下のコードを追加すれば「・」は消えます。

/*目次（プラグイン「Table of Contents Plus」）の「・」表示を消去*/
.content .toc_list li:before {
	content:"";
}
/*目次（プラグイン「Table of Contents Plus」）のマージン設定*/
#toc_container {
	margin-top: 2em;
}

プラグイン「Table of Contents Plus」の箇条書きリストはクラスが「toc_list」となっているので、そこだけに設定が反映されます。

LION BLOGの他の箇所には影響を与えません。

ちなみに下の方のコード（５～８行）はマージン（余白）の設定なので必須ではないよ。標準だと狭いから余白を広げてます。

こうすれば下の画像のように、「・」を消すことができます。