備忘録_22 / Cocoon_4
公開画面
[図_1]
左の画面は、
第14回 備忘録_14 / Word Press_06
UpdraftPlusでバックアップを取ろう
の回で現在公開中の投稿記事です。
赤枠の部分に「目次」とか付いているのですが、これは一体何でしょうか？
そんな物付けた記憶がありません…？
編集画面
[図_2]
こちらはその編集画面です。
が、あれ？
赤色点線枠の辺りに「目次」なる物が知らぬ間に挿入されています。
私は、「目次」など作っていない…。
この「目次」とは何でしょうか？
余談ですが前回、第16回 備忘録_16 / Cocoon_01 で「親テーマ」でなく「子テーマ」を適用する理由を少しだけ説明しましたが、先日Word Press 5.53 から 5.6 にUpdateされた事により、早くも編集画面もレイアウトに崩れが生じております。今回は編集画面の崩れだけで済み助かりました。これが、公開画面まで崩れてしまうことが本当に稀ですけどよくあります。必ず「子テーマ」を使いましょう。
■ WordPressに目次をつける方法
そこで、WordPressのブログ記事に「目次」なる物を付ける方法を調べましたところ、以下の二通り発見しました。
1⃣ 目次をつける １つ目の方法
- 目次機能を付けるプラグインを使う。
目次を自動作成して表示してくれる「Easy Table of Contents」というプラグインが定番として良く使われているそうです。
非常に細かい設定も可能であり上級者からも高い信頼を得ています。割とポピュラーな方法だそうです。
2⃣ 目次をつける ２つ目の方法
[表_1]
<h2>目次</h2> <ol> <li><a href="#heading1">見出し1</a></li> <li><a href="#heading2">見出し2</a></li> <li><a href="#heading3">見出し3</a></li> </ol>
- CSSで見出しタグに目次タグを埋め込む
見出しのタグに目次のタグを埋め込み、それをまとめた目次を記事冒頭で設置する。
といった面倒な作業が必要との事です。
しかし、この回に於いて私はその様な面倒などちらの作業も行っておりません。だから、不思議なんです…。
… … …！！あ、ありました！幻の「方法 3」を発見しました！
3⃣ 目次をつける 幻の第３の道
Cocoonでは、Table of Contents Plusのようなプラグインを使用せずとも、テーマの独自機能で以下のような目次を表示させることが可能です。
- Cocoonは目次機能を利用できます。
おお‼ついに犯人を見つけました‼
どうやら、この第14回で表示されている「目次」は、第16回にCocoonテーマを適用した際に、予めCocoonに実装されていた目次機能が突然働き始めたようです！
――――― わいひら先生感謝‼
■ Cocoonテーマの目次の使い方
設定項目の説明
それぞれ以下のような設定を行うことができます。
- 目次の表示：目次の表示/非表示の切り替え
- 目次のタイトル：目次の見出し
- 目次表示の深さ：目次を表示するhタグのレベル設定
- 目次ナンバーの表示：目次にナンバリングをするかどうか
- 目次の表示順：目次と広告の配置入れ替え
※ Cocoonの見出し機能は、H見出しを元に作成されます。本文中内でH2～H6の見出しが使われていないと、目次は表示されません。
via:プラグインを利用せずとも目次機能を利用できます
H1（見出し1）は基本的に使わないようです。確かに編集画面で見ますとブログの記事タイトルでもの凄く大きなフォントが使用されております。つまりH1はブログ記事の冒頭見出し専用です。
試しましたが、初期設定では本文中のどこかでH2「見出し2」が一回は使われないと目次機能は働かないようです。
つまりH3～H6だけで構成された本文は、「見出し機能」だけがそのまま反映されるだけのようです。
[図_4]
では、実際に打ち込んでみましょう。
「カラフルライン」スキンの「見出し」がどの様なデザインに作られているか、一度全て目を通しておきたいと思います。
エディッタに「見出し2」と入力して更にマウスで反転させます。
[図_5]
[段落]より「見出し2」を選択します。
同様にして「見出し2」から「見出し6」までを出力したものが以下になります。
● 見出しsample
【ここから】
見出し2
見出し3
見出し4
見出し5
見出し6
【ここまで】
はい、webページには以上のように出力されております。洗練されたデザイン、とてもカラフルで綺麗ですね♪
この上にある「目次」にリストアップされている「見出し」にマウスを重ねて実際にクリックしてみて下さい。選択された見出しの場所にページ内ジャンプします。
■ 目次機能を使う理由って何だろう？
- 投稿が長文になるとページ内のどこにいるかわからなくなり、迷子になる事を防ぐ。
- 冒頭の目次で記事内容を一目で一覧でき、欲しい情報が書かれた場所にスグ飛べる。
- Googleのページランク対策に効果が見込める。
- 裏を返せば、長文を書かなければ目次を使う理由が無い。
ともすると、｛見出し ＝ 記事内容｝ と、中身が無く見出しだけで構成されたブログ記事になってしまいます。
文筆家や、大学教授の論文のようなプロの物書きの方でもない限り5階層も必要無さそうで、私の様なブログ初心者は慣れるまで２～３階層ぐらいに絞った方が良さそうです。
今回はここ迄で一旦切りまして、次回は構成について考えてみましょう。
EyeCatch画像：ホワイトボードと書く女の子/fujiwaraさん /photoAC