注目キーワード
現在注文住宅の特化ブログ作成中!2021年2月14日引き渡し完了!

【Cocoon】で 「目次を作る、目次に戻る」を作る方法

こんにちは。ブログには「目次」が必ずありますよね?自分のブログにも目次作りたいと思いませんか。

そんな方に僕が実際に作った方法を書いていきたいと思います。

Cocoonは見出しを付けると自動で目次を作ってくれます。まずは見出しを作ってみましょう。

目次を作る

見出しの作成

手順を説明します。

  1. 見出しにするテキストを入力。
  2. ブロックタイプを(見出し)に設定。
  3. 見出しレベルの変更を行う。

見出しにするテキストを入力

文章を書くのと同じで見出しにしたいテキストを入力します。

下の画像のように、一番左の「ブロックタイプまたはスタイルを変更」を選択。

[temp id=2]

見出しを選択

ブロックタイプまたはスタイルを変更を選択すると一覧が出てきます。その中の「見出し」を選択しましょう。

[temp id=2]

見出しのサイズの選択

見出しのサイズの変更をします。上の画像の「H2」の部分を選択すると一覧が出てきます。

大きさの目安は、下の画像を参考にしてください。表示に関してはスタイルによって変わってきます。

[temp id=2]

この記事の目次を見てください。大テーマの下に中テーマ、その下に小テーマとなっていませんか?

見出しのサイズを分けることで、目次をわかりやすく提示させることができます。

目次を作る方法の説明は以上になります。次は目次に戻る方法を書いていきます。

[temp id=2]

目次に戻る

この記事にもある「目次に戻る」の表示方法です。

目次設定の変更

Cocoon設定→目次→目次設定で、目次切り替えの「目次表示切替機能を有効にする」にチェックを入れる。

[temp id=2]

CSSの追加

Cocoon子テーマのstyle.cssにコードを追加。

style.cssの場所は、ホーム→外観→テーマエディターで出てきます。

下のコードをコピーして追加する。

/* 目次に戻るリンクを機能させる */
.toc-checkbox {
    height: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

赤矢印の部分にコピー。

[temp id=2]

Cocoonのテンプレート機能を使う

次にCocoonのテンプレートを登録します。

Cocoon設定→テンプレート→新規追加をクリック。

新規追加をクリックすると上のような画面になります。

まずタイトルをきめます。なんでも大丈夫ですがわかりやすく、「目次に戻るのリンク」にしておきます。

次に内容のテキストの部分に先ほどCSSにコピーしたコードをコピーします。

※注意 必ずテキストにコピーするようにしてください。(上の画像の赤丸

保存をクリック。これで準備完了です。

[temp id=2]

使ってみよう!

Cocoon設定→テンプレート でつくったテンプレートがあると思います。

ショートコードの部分をコピーして自分の記事に貼り付けます。貼り付けるとしたの画像のようになります。

記事で見るとこのショートカットの部分が「目次に戻る」になっています。

[temp id=2]

まとめ

できましたでしょうか?目次に戻るがあると読者はとても便利です。

最後までご覧いただきありがとうございました。

>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております! 日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。

日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。

CTR IMG