ページの流れをわかりやすく!Webサイト制作所のマイパターン「目次ブロック」紹介

ページの流れをわかりやすく!Webサイト制作所のマイパターン「目次ブロック」紹介

Webサイト制作所のWordPressテーマには、コンテンツ作成をサポートする便利なマイパターンが多数搭載されています。その中でも「目次ブロック」は、訪問者が目的の項目へスムーズに移動できるようになります。コード不要で設置でき、誰でも手軽に使えるのが魅力です。

shareお願いします!

マイパターン「目次リスト」

目次リスト

ボーダーカラーピッカーでカスタム可能
背景色カラーピッカーでカスタム可能
タイトル文字色・背景色をカラーピッカーでカスタム可能
リスト文字色をカラーピッカーでカスタム可能
カスタム条件

目次リストのサンプル

目次の必要性について

Webサイトやブログで記事を公開する際、「目次」は単なる飾りではなく、読みやすさとユーザー体験を大きく左右する重要な要素です。
特に、情報量が多い記事や複数のテーマを扱うページでは、訪問者がどこに何が書かれているのかをすぐに把握できるようにすることが大切です。
目次があることで、読者は記事全体の構成をひと目で理解し、興味のある項目へスムーズに移動できます。
これにより、「今どの部分を読んでいるのか」「次にどんな内容があるのか」が明確になり、ストレスなく記事を読み進められます。
これは滞在時間の向上や離脱率の低下にもつながり、SEO(検索エンジン最適化)においてもプラスの効果をもたらします。
また、Googleなどの検索結果で目次内リンク(アンカーリンク)が表示されることもあり、ユーザーは自分が求める情報へ直接アクセスできます。
つまり、目次は検索エンジンと読者の両方に優しいナビゲーションツールなのです。
さらに、スマートフォンのような縦長の画面で閲覧する場合にも、目次は特に役立ちます。
小さな画面で長文をスクロールし続けるより、必要な箇所をタップしてジャンプできる方が圧倒的に便利です。
ユーザーの操作負担を減らすことは、読みやすく信頼されるサイトづくりに欠かせません。

目次(1)のコンテンツ

フリーランス主夫のWebサイト制作所の娘アイコン(トラ)
とらいち

ブロックエディターのブロック「グループ」のカスタムブロック「目次用ボックス」の中に目次(1)のコンテンツを作成します。

目次(2)のコンテンツ

フリーランス主夫のWebサイト制作所の娘アイコン(ぞうさん)
ぞういち

ブロックエディターのブロック「グループ」のカスタムブロック「目次用ボックス」の中に目次(2)のコンテンツを作成します。

目次(3)のコンテンツ

フリーランス主夫のWebサイト制作所の娘アイコン(ワニ)
わにいち

ブロックエディターのブロック「グループ」のカスタムブロック「目次用ボックス」の中に目次(3)のコンテンツを作成します。

マイパターン「目次リスト」の作成方法

STEP 1 目次リストを呼び出す 挿入したいところにマイパターン「目次リスト」を呼び出す

  • 「ブロックを追加」を選択
  • 「すべて表示」を選択
  • 「パターン」を選択
  • 「マイパターン」を選択
  • 「目次リスト」を選択

STEP 2 ページ内リンクを設定 目次リストにページ内リンクの設定をする

ページ内リンクとは?

ページ内リンク(アンカーリンク)とは、WEBページを閲覧しているとき、クリックするとページ内の指定の場所へ移動できるリンクのことです。 ページ内リンクとも呼ばれます。 アンカーとは英語でいかりをおろす、固定するという意味です。 指定したい場所にアンカーリンクを設置して固定し、ユーザーが欲しい情報に辿り着けるようになります

  • リスト項目を選択するとポップアップが表示
  • ペンアイコン「編集」を選択
  • 「テキスト」の入力フォームにテキストを入力
  • 「リンク」の入力フォームにIDを入力

IDを設定する際の注意点!

同一ページ内で同じid値を持つ要素が二つ以上存在してはならない。IDによる参照の際、値が2つ以上あると正常に動作しないので気をつけましょう。IDは必ず#から始まる半角英数で入力してください。

例 )#mokuzi1

STEP 3 移動先の設定 目次リストの項目を選択した時に移動するグループを設定

  • 移動先を設定したい場所で「ブロックを追加」を選択
  • ブロック「グループ」を選択
  • レイアウトを選択
  • ブロック「グループ」のスタイル「目次用ボックス」を選択
  • 高度な設定にある「HTMLアンカー」に目次リストのリンクで設定したIDを入力
    例 )mokuzi1 ※#は付けない

目次リストは色々なカラーカスタマイズができます!

ボーダーカラーをカスタマイズ

  • 目次リストを選択し「グループを選択」ボタンで親グループを探す
    追加CSSクラスにmokuzi_wrapperが設定してあるグループが目次リストの親グループです
  • 目次リストの親グループ(mokuzi_wrapperが設定してあるグループ)の背景で設定したカラーがボーダーカラーに反映されます

背景カラーをカスタマイズ

  • 目次リストを選択し「グループを選択」ボタンで親グループを探す
    追加CSSクラスにmokuzi_wrapperが設定してあるグループが目次リストの親グループです
  • 目次リストの親グループ(mokuzi_wrapperが設定してあるグループ)の背景で設定したカラーがボーダーカラーに反映されます

shareお願いします!