WordPressの詳細ブロックは、見出しを押したときだけ補足内容を開く、折りたたみ表示を作る機能です。長い注意事項、用語の補足、よくある質問を本文へ置きながら、最初の表示を短くできます。この記事では追加、見出しと内容の入力、初期状態、削除、スマートフォン確認まで説明します。
詳細ブロックとは
詳細ブロックは、クリックやタップで開閉できる見出しと内容を一組にするブロックです。編集画面では「詳細」「Details」などの名前で表示される場合があります。公開画面では見出しの横に三角形などが付き、押すと内側の文章が表示されます。
一つの見出しに一つの補足を対応させられます。FAQ、用語説明、長い前提条件、手順の追加情報などに向きます。読者が必ず読むべき警告や申込み条件は閉じた部分へ隠さず、通常の本文でも示してください。
まずは実物を開閉してみる
下の見出しをクリックまたはタップしてください。閉じた状態では要約だけが見え、開くと補足が表示されます。これがWordPressの詳細ブロックを公開したときの基本的な動きです。
詳細ブロックを使うときの基本ルールを見る
結論や必須手順は隠さず、読者によって必要性が分かれる補足だけを入れます。要約には「詳しくはこちら」ではなく、開くと何が分かるかを書きましょう。
- 閉じた状態でも内容を予測できる要約にする
- 一つの詳細ブロックで一つの疑問を解決する
- 公開URLをスマートフォンで開閉確認する
次は、最初から開いた状態の例です。重要だから常時表示するのではなく、初期状態の違いを確認する見本として掲載しています。
最初から開いた詳細ブロックの例
ブロック設定の「デフォルトで開く」を有効にすると、このように内容が開いた状態で表示されます。必須情報は詳細ブロックへ入れず、通常の本文に置く方が安全です。
詳細ブロックに向く内容
読者によって必要かどうかが分かれる補足へ使います。たとえば「旧エディターの場合」「エラーコードが表示された場合」「詳しい料金条件」のように、対象を見出しで判断できる内容です。
本文の結論、最初に行う操作、料金の総額、解約条件、安全上の注意など、読まないと誤った判断になる情報には向きません。ページを短く見せることより、必要な情報へ確実に到達できることを優先します。
詳細ブロックを追加する手順
- 投稿または固定ページの編集画面を開きます。
- 折りたたみを置きたい場所の「＋」を押します。
- 検索欄へ「詳細」と入力します。
- 「詳細」ブロックを選びます。
- 上側の要約欄へ、閉じた状態で表示する見出しを入力します。
- 下側の内容欄へ、開いたときに読む説明を入力します。
- 右上の「下書き保存」を押します。
見出しは「詳しくはこちら」だけにせず、「旧エディターでの確認方法」のように内容を具体的にします。読者は開く前に、自分に必要な情報か判断できます。
開いた中へ文章や画像を追加する
詳細ブロックの内容部分では、段落だけでなく、箇条書き、画像、リンクなどを追加できる環境があります。内容欄の「＋」を押し、必要なブロックを選びます。操作手順なら番号付きリスト、条件の列挙なら箇条書きが読みやすくなります。
画像や表を多く入れると、開いた後の高さが大きくなります。補足が長すぎる場合は、独立した見出しや別記事へ分けることも検討します。折りたたみは情報を隠す場所ではなく、選んで読むための入口です。
見出しに「詳細」とだけ書いていましたが、何が出るか分からないですね。
「エラーが出たときの確認」に変えてみます。
とても良い修正です。
閉じた状態でも内容と対象が分かると、必要な読者が迷わず開けます。
開いた中には手順を番号付きで入れます。
長くなりすぎたら、無理に折りたたまず別の節へ分ければいいんですね！
はい。
一つの詳細ブロックでは、一つの質問や補足だけを解決するようにしましょう。
最初から開いた状態にする
詳細ブロックを選び、右側の設定欄に「デフォルトで開く」「初期状態で開く」などの項目があれば有効にできます。名称はWordPressのバージョンや画面によって異なります。
最初から開くと内容を見落としにくくなりますが、折りたたみで短く見せる目的は弱くなります。重要な内容なら、そもそも詳細ブロックを使わず通常の本文へ出す方が自然です。プレビューで閉じる・開くの両方を試します。
複数の詳細ブロックを並べる
FAQのように複数を置く場合は、質問ごとに一つずつ詳細ブロックを追加します。「料金について」「解約について」のように粒度をそろえ、同じ質問を別の言い方で重複させません。
10個以上連続すると、読者が目的の項目を探しにくくなります。テーマ別に見出しで分ける、よく使う3件だけ本文へ置く、詳しいFAQページへ案内する方法を検討します。
FAQとして使うときの書き方
要約欄へ読者が実際に抱く短い質問を書き、内容欄の最初の一文で答えを示します。その後に条件、例外、手順を続けます。答えを最後まで引き延ばさないことが大切です。
「できますか？」への答えが条件付きなら、「はい。ただし○○の場合に限ります」のように先に示します。詳細ブロックを使っただけで検索向けのFAQ構造化データになるとは限りません。見た目と意味を分けて考えます。
詳細ブロックの見た目を整える
ブロックまたは内側の要素を選び、右側のスタイルから文字色、背景色、余白などを変更できる場合があります。テーマの標準表示をまず確認し、見出しがリンクや普通の文章と区別できることを確かめます。
開閉を示す三角形や見出しを小さくしすぎないでください。色だけで開ける場所を示さず、見出し文から操作できると分かる状態を保ちます。独自CSSを追加する前に、標準のままスマホで使えるか確認します。
スマートフォンで確認する手順
- 編集画面右上のプレビューを押します。
- モバイル表示を選びます。
- 見出しが不自然に折り返していないか確認します。
- 見出しをタップして内容が開くか試します。
- もう一度タップして閉じられるか確認します。
- 内側の画像、表、リンクが横にはみ出していないか見ます。
- ページ全体に横スクロールがないか確認します。
編集画面では選択操作が優先され、開閉の挙動を確かめにくい場合があります。プレビューまたは公開URLで実際にタップします。開いた後に次の見出しへ進めるかも読みます。
内容を通常の本文へ戻す方法
重要度が上がり、常に見せたい内容になった場合は、内側の段落やリストを詳細ブロックの外へ移動します。リスト表示を開き、子ブロックを目的の位置へドラッグすると階層を確認しやすくなります。
移動後に空になった詳細ブロックを選び、三点メニューから削除します。誤って別の内容まで動かした直後は「元に戻す」を押します。見出しの文言も通常のH2・H3として適切か見直します。
詳細ブロックを削除する
リスト表示で対象の詳細ブロックを選び、三点メニューの「削除」を押します。親ブロックを削除すると、中の文章や画像も一緒に消えるため、必要な内容は先に外へ移します。
削除直後なら「元に戻す」で復元できます。保存後に気づいた場合はリビジョンから確認できますが、ほかの変更も戻る可能性があります。
開閉できない・表示が崩れるとき
編集画面で開閉できない
編集画面では文字入力やブロック選択が優先されます。新しいタブのプレビューで確認してください。
詳細ブロックが検索に出ない
WordPress本体のバージョンや利用中の編集環境を確認します。更新前にはサイトの保守手順に従い、検証環境で互換性を確認します。
内側の表や画像がはみ出す
固定幅や長いURLを確認します。問題の要素を詳細ブロックの外へ一時移動し、どのブロックが原因か切り分けます。
公開画面が古い内容のまま
右上の更新を押したか確認し、公開URLを再読み込みします。別ブラウザでも開き、キャッシュの影響を切り分けます。
詳細ブロックを使わない方がよい例
記事の結論、操作の必須手順、契約条件、料金総額、エラーからの復帰など、読者全員が必要な情報は通常の本文へ出します。「ページが長く見える」という理由だけで内容を次々に閉じると、読者が重要情報を見落とします。
補足が一文だけなら括弧や注記で十分な場合があります。長い独立テーマなら別見出し、別記事、目次を使う方が見つけやすくなります。
ページを短くするために、何でも閉じればいいわけではないんですね。
必須手順は見せたまま、対象が限られる補足だけに使います！
その判断が大切です。
閉じたままでも質問が分かり、開けば一つの答えが完了する形にしましょう。
スマホで開く、閉じる、内側のリンクまで試します。
重要になった内容は外へ移せるので、後から見直すときも安心ですね！
はい。
読者が必要な情報を隠さず、選びやすく整理するために使ってください。
WordPressをこれから始める方へ
詳細ブロックを使って記事を作るには、WordPressを動かす環境が必要です。これからサイトを用意する方や、現在の管理環境を見直したい方は、WordPress導入機能があるサーバーを候補にできます。すでに現在の環境で安定して運用できている方は、この記事を理由に乗り換える必要はありません。
エックスサーバー
エックスサーバー株式会社
WordPressクイックスタートで、契約からサイト開設までまとめて進めたい初心者向け
向いている人 WordPressを初めて用意する人、国内サービスの情報量やサポートを重視する人。
- WordPressクイックスタート対応
- 無料SSLとサポートをまとめて利用可能
- 料金・キャンペーンは契約期間で変動するため公式ページで要確認
注意点： すでに現在のサーバーで問題なく運用できている方は、詳細ブロックを使うためだけに乗り換える必要はありません。
エックスサーバーの最新条件を確認するまとめ
詳細ブロックは、見出しを押して補足を開閉する機能です。要約欄へ内容が分かる見出しを入れ、内側で一つの質問や補足を完了させます。必須情報は通常の本文へ出し、公開前にはスマートフォンで開閉、内側のリンク、横幅を確認してください。
よくある質問
詳細ブロックはアコーディオンと同じですか？
一つずつ開閉する点は似ています。複数項目が連動して一つだけ開くなどの動きは、テーマや別機能によって異なります。
開いた状態で表示できますか？
設定欄に初期状態の項目がある場合は可能です。ただし、必須情報なら通常の本文へ出す方が分かりやすいことがあります。
詳細ブロックを使うとFAQ構造化データになりますか？
見た目の折りたたみと構造化データは別です。サイトのSEO出力を確認し、詳細ブロックだけで自動出力されると決めつけないでください。