[Cocoon] 目次 ～ 好きなところから記事内リンクも！

目次は、知らぬ間にできていた！という方も多いと思います。

初期設定のままなら、

「見出し２(H2)」を含めて、見出しを２つ以上使うと、目次があらわれます。
　

目次は、いわば記事内のリンクです。

タイトルをクリックすると、そこに飛ぶことができますね。

目次を作っておくと、どこからでも指定したタイトルにジャンプできるようになります。

好きなところから指定したタイトルに飛ぶ方法をお求めの方は、目次の2番からどうぞ。（←この「目次の2番」についているのが、記事内リンクです。）

目次設定

初期設定のままで良いかたは、飛ばしてくださいね。（次のセクションへジャンプ。）

１．[Cocoon設定]をクリック。

２．[目次]タブをクリック。

３．プレビューの下に、以下の設定項目があります。（クリックすると画像が拡大表示されます。）

上の図で、最後の２つにコメントしなかったのは、私自身がよく分かっていないからです。

最初に目次を開いておくか、閉じておくかや、

目次に表示させたい見出しレベルの深さは、好みが別れるところだと思います。

ページ除外する方法

普段は目次を出したい、

でも、特定の記事で出したくない、というとき。

１．編集画面の右サイドで、[文書]タブをクリック。

（[文書]タブが無い！という場合は、[公開する]ボタンの右にあるお花のアイコンをクリック。）

２．サイドバーをグ～っと下げます。[ページ設定]というセクションで、[目次を表示しない]にチェックを入れて、[下書き保存]をクリック。

今まで、H３からスタートするという方法にしてました・・・★。ちゃんとオプションがあったとは・・・！

見出しスタイルの入れ方

見出しは、文章のまとまりにつけるタイトルです。

本文中に見出しを入れないと、目次は作れません。

見出しスタイルをつける手順です。

ご存知の方は飛ばしてくださいね。（次のセクションへジャンプ。）

１．ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

２．ここで、[見出し]メニューがリストされていたらクリック。なければ、ブロックの検索ボックスに見出しと入力してエンターキーを押してください。

３．[見出し]をクリック。

４．最初はH2スタイルが適用されています。H2スタイルでよければ文字を入力。

好きなレベルを選んでタイトルを入力してできあがりです。

見出しスタイルの使い方

見出しスタイルは、大きい順でH1からH6まであります。

H1は記事のタイトルなので、利用は一記事に１度きりです。

記事の中身につけるタイトルで、一番大きい見出しスタイルはH2です。

H2からスタートして、意味のあるまとまりごとにタイトルをつけます。

H2セクションの内容を更に深めたいときや、補足的な内容のまとまりには、H3。

H2と同列になるくらい重要なまとまりには、再びH2。

視点や話題が変化するときも、新たに大きなレベルの見出しをつけるのが良いと思います。

見出しレベルは、順番に使います。例えば、H2の内容を更に深めたいとき、その下にはH3を使います。H3を飛ばしてH4とするのは良くないということです。

どこからでもリンクOK

目次をクリックすると、そのタイトルに移動できるのと同じように。

どこからでも、好きなところから

指定した「タイトル」にジャンプできるリンクを作れます！

１．まずは、目次があるページを開きます。

２．目次で、飛び先にしたいタイトルをクリック。該当のセクションに飛びますね。

３．その状態で、URLをコピーします。公開済みの記事だと、以下のようになっているはずです。

ブログのURL、スラッシュ、記事のスラッグ、スラッシュがあって、

最後に、見出しに与えられる番号があります。

『#toc』の後の数字は、飛びたいセクションの位置によって変わります。

「toc」は、Table Of Contents(目次)の略です。

４．編集画面で、タイトル名など、好きな文字を入力。

例：どこからでもリンクOK

５．入力したテキストを選択してリンクアイコンをクリック。(もしくは上からURLを貼り付けると終了します。)

このURLボックスに、先ほどの#toc番号がついたURLを貼り付けます。。

矢印マークをクリックするかエンターキーを押すと設定完了です。

下にある「新しいタブで開く」はお好みで。右にすると「オン」になるので、リンクをクリックしたときに新しいタブでページが開きます。

これで終了です。

できあがり例：どこからでもリンクOK

URLを入力した後の画面が以下です。

最後に『#toc』と番号があるリンクは、該当のタイトルに飛ぶリンクです。

記事内で指定したタイトルに飛びたいときも、

違う記事の指定したタイトルに飛びたいときも、

この方法でリンクを作成すればOKです。

ブログカードもOK

ブログカードにも、見出し番号付きのURLを入れられます。

そうすると、該当のタイトルにジャンプします。

ただ、記事内で飛ばしたい場合は、テキストリンクを推奨します。

テキストリンクの場合、初期設定だと同じページ内の移動になります。（設定変更は可能ですが。）

ブログカードだと新しいタブで開かれることになります。

そのため、記事内ジャンプの場合はテキストリンクのが読みやすいと思います。

別記事の場合は、以下のようにブログカードに入れるのもOKだと思います。
例として、リンクの入れ方記事の目次２番に実際に飛ぶリンクです。このブログカードには「https://blogstudynotes.com/link/#toc2」という文字列が入っています。新しいタブで開かれます。

目次ウィジェット

目次ウィジェットがあるので、好きな場所に目次を表示させられます。

例えば、記事を読んでいるときにサイドバーに目次が表示されると、

「さっきの所、もう一回読み直したい」とか、

「このセクションは飛ばしたい」と読者の方が思ったときに便利ですね。

１．[外観]>[ウィジェット]を選択。

２．左サイドで[目次]ウィジェットを見つけて、▼をクリックします。少しスクロールするとありますよ。

３．目次を表示させたい場所を選んで、[ウィジェットを追加]をクリック。例として、「サイドバースクロール追従」を選択しています。（目次ウィジェットの人気位置です。）

４．お好みで、[タイトル]、[目次表示の深さ]、[表示設定]を設定して、[保存]をクリックします。（[表示設定]は、特定のページだけ表示したい、非表示にしたいというときに利用します。）

５．[完了]をクリックします。できあがり。

見出しの長さに注意

目次をサイドバー追従に表示させたい場合、記事内のH2見出しタイトルは13文字くらいが良いと思います。

注意：「記事タイトル」ではなく、「セクションタイトル」についてです。

記事内で、短めのタイトルを使うようにしたときに、SEO対策的にどうなるかは私は分からないので、そのポイントに興味がある方は、これまた、じっくり検索しましょう。

最低限、キーワードを入れるくらいの理解しかないです。

特に記事内タイトルは、SEOより何より、読者の使い勝手が一番かなと。

サイドバー表示＆読者の使い勝手という観点のみからいって、私のおススメは13文字以内。（Fuwariスキン利用中。フォントのサイズによって、ベストな文字数が違います。）

当ブログは、むしろ悪いお手本になっています。（当記事から意識し始めました。）

良くない例（ピンクはOK。それ以外は長すぎる。）：

この例だと、明らかに「～Cocoonヘッダーレイアウト」を繰り返す必要が無いですね。

タイトルチェックをちゃんとしないで公開してしまった記事は他にもあると思うので修正が必要です・・・。かなり大々的に★。

サイドバー追従の動き

目次ウィジェットの表示位置として人気の[サイドバースクロール追従]。

設定したウィジェットがあらわれると、

サイドバーだけはスクロールされず、そのウィジェットが表示され続けます。

当記事もそうしておりますので、右サイドで動作をご確認くださいませ。

注意点がありまして。

長編記事で、全レベルまで目次を表示して「追従」させると、目次の最後の方が表示しきれなくなる場合があります。

以下のように切れてしまう部分ができるということです。タイトルが長すぎるせいもありますが。

この記事は、目次の7番までありますが、見出し6.3までしか表示されないまま、サイドバーの動きがしばらく止まります。

記事の最後の方までスクロールすると、残りがあらわれます。

対策２については、以下のように、目次ウィジェットを２回入れて、それぞれ異なる[目次表示の深さ] と[表示設定]を指定することもできますね。

対策３の、縦スクロールバーの設置をやりたいなぁと夢見ております。

おまけ　Wordとの相性

インターネットの調子が悪くてWordPress画面にアクセスできなかったとき。

Wordファイルにブログの下書きをしていました。オフラインでできますのでね。

Wordファイルで「見出しスタイル」をつけておいて、

その下書き記事をWordPress編集画面にコピペすると、

他の文字装飾はほとんど無理ですが。

Wordの見出しレベル１が、WordPressのH1(記事タイトル用)になるので、

Wordで下書きする機会があったら、見出し１を記事タイトル、記事内タイトルには見出しレベル２以降を使うのがポイントです。

WordPressと同じです。

ちなみに、Google Docsも同様です♪。（ふと気になって調べたら、Google Docsも、拡張ツールをいれて設定するとオフラインで使用できるそうです。）

おわりに

「目次」・「パンくずリスト」・「ブログカード」は、

「あれ？できてた！」と驚いた３点セットです。

ブログ開設前に書いておいた下書き記事をWordファイルから貼り付けて、プレビューで見てみたら、

目次とブログカードがあらわれ！

四苦八苦した後にグローバルメニューを設置したら、

記事の画面で、ご褒美のごとくパンくずリストに気が付き！

３つとも難しそう・・・と思っていたことだったので、本当に嬉しい誤算でした。

そして、「記事内リンク」を作れる、ということに、ず～っと気が付いていませんでした。

ふと思い立って設定してみたら。

となり、再び嬉しいビックリでした。

今まで、記事内リンクを一切使っていないので、これもまた、全部見直そうと思います。

まずは１００記事達成を目指し。

そのあとは、

しばらく大修正大会。

修正点が多くて、リストを作らないと分からなくなりそうです★。

100記事を達成した感想記事はこちら：