こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7「詳細ブロック」とは？
AFFINGER7の「詳細ブロック」は、クリック（タップ）で中身を開閉できる折りたたみ式のブロックです。
表示されるのはタイトル（見出し）部分のみで、本文は折りたたまれた状態になるため、長い記事でもスッキリ整理できます。
詳細ブロックは、読み手が「必要な部分だけ読む」しくみを作れるため、補足説明や注意事項など、通常は隠しておきたいコンテンツを表示するのに便利です。
詳細ブロックのサンプル
+「詳細ブロック」のサンプルです。「ここをクリックしてサンプルを確認」
詳細ブロックは、タイトル部分をクリックすると内容が開き、テキストや画像などのサンプルコンテンツを自由に入れることができます。
例
テキストサンプル
テキストサンプル
テキストサンプル
テキストの装飾なども自由に…
- リストのサンプル
- リストのサンプル
- リストのサンプル
画像のサンプル
- 内容を見やすくするため、背景や枠の装飾を加えて表示を整えています。
詳細ブロックとスライドブロックの違い（詳細は後述）
詳細ブロックとスライドブロックは、どちらもクリック（タップ）で中身を開閉できるブロックです。
大きな違いは、詳細ブロックはWordPress標準の「詳細」ブロック、スライドブロックはAFFINGER7独自のブロックという点です。
シンプルにコンテンツを折りたたみたい場合は詳細ブロック、デザインや開閉動作を細かく設定したい場合はスライドブロックが向いています。
どんな場面で使うと効果的？
詳細ブロックは、次のような場面で効果を発揮します。
- 長い説明や補足情報を折りたたみたい
- 専門用語や設定項目の解説を整理したい
- Q&Aの回答部分を折りたたみたい
- 注意事項や詳細情報を必要なときだけ表示したい
情報量が多い記事でも、詳細ブロックを活用することで、必要な情報を残しながら記事をスッキリ見せることができます。
関連記事 スライドブロックについて こちらの記事で詳しくご紹介しています。
-
-
AFFINGER7スライドブロックの使い方｜記事を見やすくまとめる方法
AFFINGER7のスライドブロックの使い方を解説。記事を見やすくまとめる方法や設定手順、効果的な使い方のポイントまでわかりやすく紹介します。
AFFINGER7 詳細ブロックの使い方
ここでは、詳細ブロックの挿入方法から、コンテンツの作成手順、挿入後に変更できる表示設定やカスタマイズ方法まで順番に解説します。
それでは順番に見ていきましょう。
❶ 詳細ブロックの挿入手順
- 投稿（エディター）画面での作業になります。
基本的な詳細ブロックの挿入手順をご紹介します。
投稿（エディター）画面を準備
Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）
詳細ブロックを挿入する箇所をクリックします。
ブロック挿入ツール（ブロックインサーター）を切り替え
『＋（ブロックインサーター）』をクリックします。
ブロックタブメニューから『詳細』を選択
ブロック挿入ツール（ブロックインサーター）が『ｘ』切り替わり 以下の画面が表示されます。
ブロックタブのメニューから『詳細』を選択して投稿（エディター）画面に追加します。
『詳細』をクリックします。
詳細ブロック挿入完了
投稿（エディター）画面に『詳細ブロック』が表示されます。
- この画面では、「テキスト」「リンク」「スタイル」「色」などの設定ができます。
❷ 詳細ブロックのコンテンツ作成
タイトルの下にあるスペースが本文部分です。
ここに自由にテキストや画像を入れることができます。
ほとんどの一般ブロックを利用できるため、自由度は高いです。
▼ 要約を書く ... の部分（赤矢印）は、詳細ブロックのタイトルです。
「/」を入力して非表示ブロックを追加する の部分にテキストや画像を使ってコンテンツを作ります。
「テキスト・リスト・画像」をコンテンツエリアに作成したサンプルです。
実際に作成した詳細ブロックのサンプルです。（クリックしてみてください）
『詳細ブロックのタイトル』をここに入力
詳細ブロックのコンテンツ『テキスト・リスト・画像』など、自由に入力
例
テキストサンプル
テキストサンプル
テキストサンプル
テキストの装飾なども自由に…
- リストのサンプル
- リストのサンプル
- リストのサンプル
画像のサンプル
プレビューでは、タイトルの ▼ マークは付きません。
また、ブロック下の余白量（行間）が通常よ通常より狭くなります。
前の詳細ブロックと同じ内容を、スライドブロックで作成したサンプルです。（クリックしてみてください）
詳細ブロックのコンテンツ『テキスト・リスト・画像』など、自由に入力
例
テキストサンプル
テキストサンプル
テキストサンプル
テキストの装飾なども自由に…
- リストのサンプル
- リストのサンプル
- リストのサンプル
画像のサンプル
❹ 詳細ブロックの設定
まずは、投稿（エディター）画面右側に表示される「設定 ＞ ブロック」タブの設定項目を確認していきましょう。
各設定は、投稿（エディター）画面右側の「設定 ＞ ブロック」タブから確認できます。
設定パネルが表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
詳細ブロックの設定は、❸「設定」と「スタイル」2つのタブを切り替えることで調整できます。
詳細の設定方法（設定）
- 詳細ブロックを選択します。
- 右サイドバーで 『ブロック』タブを開きます。
- 表示された項目から 『設定』タブをクリックします。
詳細設定項目（設定）
詳細（設定）
設定
- デフォルトで開く
- ラジオボタン切り替え（ON / OFF）
高度な設定
- HTMLアンカー
- 今回は省略します。
- 追加 CSS クラス
- 今回は省略します。
- NAME 属性
- 今回は省略します。
詳細の設定方法（スタイル）
- 詳細ブロックを選択します。
- 右サイドバーで 『ブロック』タブを開きます。
- 表示された項目から 『スタイル』タブをクリックします。
詳細設定項目（スタイル）
色
- テキスト（カラーパレット設定）
- 背景（カラーパレット設定）
タイポグラフィ（︙）
- サイズ
- 『S・M・L・XL』から選択
- 行の高さ
- 1.5（デフォルト）
サイズ（+）→（︙）
- パディング
- 縦・横
- パディングは個別に指定することもできます。
※ ここをクリックすると
ドロップダウンメニューを確認できます。
詳細ブロックとスライドブロックの違い
ここでは、詳細ブロックとスライドブロックの違いをご紹介します。
- ザックリとした違い（1）
- 詳細ブロック：装飾の自由度は控えめ
- スライドブロック：装飾を細かくカスタマイズできる
- ザックリとした違い（2）
- 詳細ブロック：シンプル構造で軽く表示が速い
- スライドブロック：機能が多く、やや表示が重い
詳細ブロック
詳細ブロック
テキスト（詳細ブロック）
テキスト（詳細ブロック）
テキスト（詳細ブロック）
- エディタ上でも「開く／閉じる」を切り替えて確認できる
スライドブロック
詳細ブロックとスライドブロックの構造の違い
| 機能 | 詳細ブロック | スライドブロック |
|---|---|---|
| タイトルの装飾（デザイン） | 不可（テキスト編集可） | 太字・色・アイコンの表示と位置 |
| ボックスの装飾（デザイン） | テキスト色・背景 | テキスト色・背景・枠 |
| デザイン | シンプル | カード型風の表現が可能 |
| デフォルト時の開閉 | 開閉選択可 | 閉 |
| 主な用途 | 均一なテキスト向け | 商品・画像・説明向け |
| 見た目 | 単純な折りたたみ | ポップアップ風スライド |
スライドブロックは視覚的に目立つ作りで、「レビュー・おすすめ商品紹介」に向いています。
操作性・デザイン性の違い
- 詳細ブロック…控えめで読みやすい。文章整理向き。
- スライドブロック…視覚的にアピールできる。商品紹介向き。
使い分けのコツ（どっちを使うべき？）
- 補足説明・FAQ → 詳細ブロック
- 画像＋説明をセットで見せたい → スライドブロック
- 記事をすっきりさせたい → 詳細ブロック
使う目的に合わせて使い分けると、見やすさが大幅にアップします。
スライドブロックについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。
関連記事
-
-
AFFINGER7スライドブロックの使い方｜記事を見やすくまとめる方法
AFFINGER7のスライドブロックの使い方を解説。記事を見やすくまとめる方法や設定手順、効果的な使い方のポイントまでわかりやすく紹介します。
詳細ブロックの便利な活用例5選
ここでは、詳細ブロックを使ってすぐに実践できる、便利な活用例を5つ紹介します。
FAQ（よくある質問）
「Q：〜」「A：〜」形式でよく使われます。
読者が必要な質問だけ開けるので便利です。
補足説明・注意点の折りたたみ
本文の流れを邪魔せず、必要な人だけ開ける形式にできます。
SEO記事でよく使われる方法です。
長文の情報整理
文章が多くなるレビュー記事などで活用できます。
読みやすさに直結します。
アフィリエイト商品の詳細スペックまとめ
スペックや説明書きを折りたたむことで、スマホ表示もスッキリします。
ステップ解説のサブ情報
手順記事で「補足情報」や「注意点」をまとめるのに最適です。
関連記事 AFFINGER7のブロックエディター関連の記事は、以下の一覧ページからご覧いただけます。
まとめ！AFFINGER7の詳細ブロックの使い方｜設定方法とカスタマイズ・スライドブロックとの違い
AFFINGER7の「詳細ブロック」は、クリックで開閉できる「情報の折りたたみ」をシンプルに実現できる便利な機能です。設定項目も簡単で、初心者さんでも読みやすい記事レイアウトを作れます。
また「スライドブロック」との違いを理解しておくと、
- ちょっとした補足をまとめたい場合 → 詳細ブロック
- 情報量が多く、滑らかなスライド表示を使いたい場合 → スライドブロック
というように、記事の内容に合わせて最適な使い分けができます。
記事の構成をスッキリ保ちながら、読者のストレスなく情報を届けられるので、ぜひ記事制作に積極的に取り入れてみてください。
