LAB

ナビ・構造ブロック

NAVIGATION BLOCKS

ナビ・構造ブロック

サイトの回遊性や記事の読みやすさを高める3つのブロックです。パンくずナビ・目次・スマホ固定フッターをコンテンツとして自由に配置できます。

breadcrumb（パンくずナビ）

現在のページ位置を階層形式で示すパンくずナビを表示するブロックです。プラグイン設定からすべての投稿・固定ページに自動挿入することもできます。構造化データ（JSON-LD）も自動出力されるため、SEOと相性が良いです。

デモ

プラグイン設定の「自動挿入」を有効にすると、このブロックを個別に配置しなくてもすべてのページにパンくずナビが表示されます。手動配置と自動挿入を組み合わせることも可能です。

カスタマイズ

separator
区切り文字を指定します（例：› / / > など）
showHome
true にするとトップページへのリンクを先頭に表示します
homeLabel
トップページリンクのラベルテキストを指定します

こんなシーンで使える

  • カテゴリ階層が深いブログやECサイトでの回遊性向上に向いています
  • 構造化データを自動出力するためSEO対策として便利です
  • テンプレートに組み込まず、特定ページのみに配置したいときに使いやすいです

toc（目次）

記事内の見出しを自動収集してリンク付き目次を生成するブロックです。長文記事やランディングページの読み進めやすさを高めるのに向いています。

デモ（デフォルト開き・深さ3・番号なし）

デモ（デフォルト閉じ・深さ2・番号あり）

カスタマイズ

defaultOpen
true にするとページ読み込み時に目次を開いた状態で表示します
depth
収集する見出しの深さを指定します（2〜4。H2のみなら2、H2〜H4なら4）
title
目次ブロックのタイトルテキストを指定します
ordered
true にすると番号付きリスト（ol）で表示します。false では箇条書き（ul）になります

こんなシーンで使える

  • 見出しが5つ以上ある長文記事に配置すると読者の離脱防止に向いています
  • ランディングページのセクションナビゲーションとして使いやすいです
  • ドキュメントサイトや手順書のページ内リンクと相性が良いです

float-footer（固定フッター）

モバイル表示時に画面下部に固定されるフッターエリアブロックです。スマホユーザーへのCTA設置や電話リンク・LINE誘導に向いています。

デモ

お問い合わせ

このブロックはモバイル閲覧時に画面下部に固定表示されます。PC版では showOnDesktop: true にしない限り非表示です。エディター上では通常のブロックとして表示されますが、フロントエンドではposition: fixedで動作します。

カスタマイズ

enabled
true にすると固定フッターが有効になります
showOnDesktop
true にするとPC表示でも固定フッターを表示します（デフォルトはモバイルのみ）
bgColor
固定フッターの背景色を指定できます
shadow
true にすると上辺に影を追加してコンテンツとの境界を強調します
padding
sm / md / lg — フッター内の余白を調整できます

こんなシーンで使える

  • スマホユーザーへのCTAボタンを常に画面内に置きたいときに便利です
  • 電話番号のタップリンクをモバイルで常に表示したいときに向いています
  • LINE友だち追加ボタンをスマホ画面に固定するのと相性が良いです
  • 申し込みフォームへのスクロールリンクをモバイルで目立たせたいときにも使いやすいです