備忘録_23 / Cocoon_5
前回に引き続き、目次機能と見出しについてもう少し考えてみましょう。
「目次機能」と「見出し」を使う前提でブログを書くという事は、フリースタイル（ぼくのさくぶん）でダラダラ書くような文章の構成であってはなりません。文頭から文末までの間に理路整然と一直線に繋がる形で、また余すことなく全てを端的に説明仕切る必要があります。
かつて「ぼくのさくぶん」しか考えたことが無かった。… … 突如として目の前に出現したウォール・マリア級の壁。
… 果たして「目次機能」を使いこなせるだろうか、 … 人類はこの日を乗り越えられるだろうか…。
ブログの構成と全体像
[表_1]
|
① タイトル |
今回は私の備忘録（仮）にもまくらを付けてみました。
個人的に③まくらは必要だと思っております。Cocoon付属の目次機能は目次の表示場所を選べません。実は、まくらが無いと④目次がページの一番先頭に来てしまいます、そのことによりなかには学術サイトの様な堅苦しい印象を受けられる方もおられるかも知れません。
しかしそれは私の本質ではありませんですし、このサイトはぶっちゃけ超ユルユルなものでス。
ですから冒頭に遊びが必要であると考えております。
次に②アイキャッチ画像ですが、今はまだ一度も使っておりません。次回以降に作ります。
一般的な使われ方として、見出しはあくまでも⑤本文の中に展開されます。
⑥お問い合わせ、⑦まとめ・感想も、今回は詳しい説明を省きます。次回以降に考えて行きましょう。
最後のオチはあった方が良いのかしら…？
見出しの種類
[表_2]
|
前回内容と重複しますが、見出しは5階層から成ります。
さらに、エディッタの中に❶リストや●箇条書きもありますから、見出しでジャンプさせたいような場合を除き、私の様な初心者は全ての見出しを無理して使わなくても良いのではないでしょうか。
H3～H5の中から「中見出し」として1つ。
H4～H6の中から「小見出し」として1つ。
毎回メインで利用する見出しを予め選んでおきます。
ブログ全体を通して一貫した自分のパターンを持つこと…人はそれを慣れと呼ぶ‼習うより慣れよ！心臓は捧げよ！
目次の動作条件
目次は自動的に作成されますが、Cocoon付属の目次機能を有効にするためには動作条件（トリガー）が存在します。
- ルール1. 見出しH1は記事タイトル専用。
- ルール2. 記事全体の中で、大見出しH2が必ず１度は使われること。
- ルール3. 記事全体の中で、見出しが２個以上あること。
前回も触れましたが、長文を書かなければ目次を使う理由がありません。
しかし、薄い記事内容でも強引に目次機能を有効にさせたい場合には、この様なブログ構成が考えられます。
| 方法 1 | 方法 2 | 方法 3 |
| 記事タイトル[H1] ・大見出し[H2] ・大見出し[H2] |
記事タイトル[H1] ・大見出し[H2] ・中見出し[H3] |
記事タイトル[H1] ・大見出し[H2] ・小見出し[H4] ・小見出し[H4] |
| 記事全体を大きく二つに分ける方法。そもそも投稿を二本に分ければ良いではないかとの疑惑が残る。 | 記事全体を２つに分け、かつそれぞれの主張に強弱が存在する場合。 案外クールかも？私的に合法。 |
記事内容は一つであるが、それを細切れにしてごまかす方法。ともすると、｛見出し ＝ 記事内容｝に、 |
しかし、
- Q. どうして強引に目次を使わなくてはダメなの？それって誰得、美味しいの？
- A. 私にもわかりません（笑）
適当に思いつく限りムチャな理由を挙げるとしたら、
- 目次があると、カッコイイ！
- 目次を付けるとSEO対策に効果が見込める。（・・・と言われている）
目次の設定
初期設定（default）
[Cocoon設定] → [目次] より、目次機能の設定を行えます。以上は初期（default）の状態です。
- ①目次の表示：目次を自動で表示します。
初期の状態で☑有効になっています。目次機能を使いたくない場合は✓チェックを外すと目次は表示されません。
目次には[閉じる][開く]の「開閉」ボタンが付いており、以下の左右はそれぞれの画面表示です。
・目次が開いた状態（default）
・目次が閉じた状態
- 目次の表示：最初から目次内容を表示する。
初期の状態で☑有効になっています。最初にページが開かれた時に内容を表示した状態にしたくない場合は✓チェックを外すと、目次は閉じた状態で表示されます。
目次を閉じた状態に設定する場合は、投稿記事の閲覧に訪れた方々はそもそも目次は使わない前提で考えましょう。ご覧のように表示が小さいですから見落としてしまいます。それにネット上級者ばかりとも限りません。わざわざ目次を開いて目的の場所に飛ぶ人は少ないと思います。
私が使ってみた感じではいずれも目次機能を使う場合、初期の状態のままで特に設定を変える必要なくそのままお使いいただけると思います。
一応、赤枠部分 ②目次切り替え、③目次表示深さ、④目次ナンバーの表示、などの設定を変えてどの様に変わるかを実験してみました。
目次切り替え
- ②目次切り替え：目次に「開閉」ボタンをつけることができます。
初期の状態で☑有効になっています。「開閉」ボタンを付けない場合は✓チェックを外すと表示されません。
・「開閉」ボタン有り（default）
・「開閉」ボタン無し
「開閉」ボタンを付ける意味は、投稿記事を閲覧されているお客様が「目次を閉じる」事が出来るという、ちょっとした選択肢を用意しますから閲覧者側のユーザービリティに立脚した配慮です。しかし、作り手である私もこれだけ苦労して目次を作ってますから、「閉じる」ボタンを用意しなくても……、などと言った浅ましいことは全く考えておりません。
目次表示の深さ
- ③目次表示の深さ：見出しH2からH6まで、どの階層まで目次で表示するかを設定します。
初期の状態で「H6見出しまで（デフォルト）」になっています。以下の左右は「H2見出しまで」と、それぞれの画面表示です。
・H6見出しまで（デフォルト）
・H2見出しまで
「目次機能」と「見出し」はそれぞれ独立して働いてます。上記右の「H2見出しまで」と設定した場合においても目次の項目にこそ表示はされませんが、投稿記事の本文はしっかりとH3以下の見出しが使われたページのデザインになります。Cocoon設定の目次設定は、「目次機能」と「見出し」の連携を調節するコントロールパネルです。
目次ナンバーの表示
- ④目次ナンバーの表示：各項目の前の数字の表示形式を設定します。
初期の状態で「数字（デフォルト）」になっています。以下の左右は「表示しない」「数字詳細（ex:1.1.1）」、それぞれの画面表示です。
・表示しない
・数字詳細（ex:1.1.1）
「カラフルライン」スキンのバグか、Cocoonのバグか、
いえ恐らく私の動作環境が悪いのだと思いますが、
罫線が目次の枠からはみ出す問題が発生しています。
「数字詳細（ex:1.1.1）」を選択しますと、よほど階層をうまく使いこなさない限りナンバリングだけが目ざとく映ります。
例えばお気に入りの見出しだけに絞って使いたい、ウェブページを綺麗にデコレーションしたいなど、そこまで厳密に階層を意識して使わない場合はここまでの機能は必要ないかも知れません。
今回は以上です。
前回 part①と、今回 part②の２回に渡り「目次機能と見出しを使ってみよう」の備忘録を残しました。取りあえず最低限の目次機能を使えるに至りました。しかし他にもまだ優先順位の高いTo Doがたくさんあります。タスクを一通り順繰りとこなした後で、また、次回 part③ 目次のカスタマイズにチャレンジしていきます。
我々は… 今回も… なんの成果も!! 得られませんでしたぁぁ――――――――!!
EyeCatch image：OpenClipart-Vectors/Pixabay