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

LIONBLOGの目次をたたんだ状態で表示する方法 WordPress

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

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

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

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

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

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

LIOMBLOG_目次の表示設定

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

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

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

LION BLOGの目次のサンプル

LION BLOGの目次サンプル

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

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

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

LION BLOGの目次の問題点

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

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

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

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

LION BLOGの目次サンプル(長すぎ)

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

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

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

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

LION BLOGの目次サンプル(閉じた状態)

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

残念ながら、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

関数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に導入すると表示が変なことになっちゃう。

TOCサンプル_dot

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみに下の方のコード(5~8行)はマージン(余白)の設定なので必須ではないよ。 標準だと狭いから余白を広げてます。

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

TOCサンプル_nodot

テーマを使う側にとって最も楽なのは、閉じた状態で目次を表示する設定がLION BLOGに追加されることかもしれない。

でもプラグイン「Table of Contents Plus」も便利なので、ないならないでいい!

LION BLOGの目次を閉じた状態で表示する流れ

  • LION BLOGを子テーマ化する
  • プラグイン「Table of Contents Plus」をインストール、有効化する
  • 子テーマのcontent.cssにコードを数行だけ追加する

 

WordPressを勉強したい人にはこの本がオススメやで!