AFFINGER6「詳細ブロック」の使い方を完全解説｜設定手順・カスタマイズ・スライドブロックとの違いまで

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「詳細ブロック」の使い方を、初心者さん向けに解説します。

それではご覧ください。

AFFINGER6「詳細ブロック」とは？

詳細ブロックのサンプル

• 内容を見やすくするため、背景や枠の装飾を加えて表示を整えています。

詳細ブロックの特徴と役割

AFFINGER6の「詳細ブロック」は、文章を折りたたんでコンパクトに表示できるブロックです。
クリックすると内容が開く仕組みになっており、記事が長くなる時に便利です。

• 補足説明を隠して読みやすくできる
• 長文を整理してユーザーが読みやすい
• FAQなどの「開く / 閉じる」形式も簡単に作れる

追加プラグインは不要で、AFFINGER6の標準ブロックとして使える点もメリットです。

どんな場面で使えるの？（活用シーン）

• 注意点・補足事項を折りたたみたい時
• よくある質問（FAQ）の作成
• 長い説明を隠したい商品紹介
• ステップ解説でサブ情報を分けたい時
• 読み手の邪魔にならない形で情報を追加したい時

記事の読みやすさを大幅にアップできる、万能ブロックです。

AFFINGER6 詳細ブロックの使い方【基本操作】

ここでは、AFFINGER6「詳細ブロック」の基本的な使い方を解説します。

記事への挿入手順から、タイトル・コンテンツの編集方法、さらにデザイン装飾によるカスタマイズまで、初心者でも迷わず使えるよう丁寧に説明していきます。

それでは順番に見ていきましょう。

詳細ブロックの挿入手順

• 投稿（エディター）画面での作業になります。

基本的な詳細ブロックの挿入手順をご紹介します。

投稿（エディター）画面を準備

Menu 『WordPress管理＞ダッシュボード＞投稿＞投稿を追加』をクリックします。

投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）

詳細ブロックを挿入する箇所をクリックします。

ブロック挿入ツール（ブロックインサーター）を切り替え

ブロック挿入ツール（ブロックインサーター）『＋』をクリックします。

ブロックタブメニューから『詳細』を選択

ブロック挿入ツール（ブロックインサーター）が『ｘ』切り替わり 以下の画面が表示されます。

ブロックタブのメニューから『詳細』を選択して投稿画面に設置します。

『詳細』をクリックします。

詳細ブロック挿入完了

投稿（エディター）画面に『詳細ブロック』が表示されます。

• この画面では、「テキスト」「リンク」「スタイル」「色」などの設定ができます。

詳細ブロックのコンテンツ作成

タイトルの下にあるスペースが本文部分です。
ここに自由にテキストや画像を入れることができます。

ほとんどの一般ブロックを利用できるため、自由度は高いです。

▼ 要約を書く ... の部分（赤矢印）は、詳細ブロックのタイトルです。

「/」を入力して非表示ブロックを追加する の部分にテキストや画像を使ってコンテンツを作ります。

「テキスト・リスト・画像」をコンテンツエリアに作成したサンプルです。

以上で、「詳細無ロック」内に隠れるコンテンツができました。

実際に作成した詳細ブロックのサンプルです。（クリックしてみてください）

プレビューでは、タイトルの ▼ マークは付きません。
また、ブロック下の余白量（行間）が通常よ通常より狭くなります。

前の詳細ブロックと同じ内容を、スライドブロックで作成したサンプルです。（クリックしてみてください）

詳細ブロックの基本設定

ここでは、投稿（エディター）画面の右側に表示される「ブロックタブメニュー」の概略をご紹介します。
（基本）

設定メニューの場所は、投稿（エディター）画面の右側に表示される『設定＞ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

詳細ブロックの設定は、❸「設定」と「スタイル」2つのタブを切り替えることで調整できます。

「設定」タブ

• 詳細ブロックを選択します。
• 右サイドバーで 『ブロック』タブを開きます。
• 表示された項目から 『設定』タブをクリックします。

ブロックタブメニュー「設定タブ」詳細

「スタイル」タブ

• 詳細ブロックを選択します。
• 右サイドバーで 『ブロック』タブを開きます。
• 表示された項目から 『スタイル』タブをクリックします。

ブロックタブメニュー「スタイルタブ」詳細

詳細ブロックとスライドブロックの違い

ここでは、詳細ブロックとスライドブロックの違いをご紹介します。

• ザックリとした違い（1）
  • 詳細ブロック：装飾の自由度は控えめ
  • スライドブロック：装飾を細かくカスタマイズできる
• ザックリとした違い（2）
  • 詳細ブロック：シンプル構造で軽く表示が速い
  • スライドブロック：機能が多く、やや表示が重い

詳細ブロックとスライドブロックの構造の違い

機能	詳細ブロック	スライドブロック
タイトルの装飾（デザイン）	不可（テキスト編集可）	太字・色・アイコンの表示と位置
ボックスの装飾（デザイン）	テキスト色・背景	テキスト色・背景・枠
デザイン	シンプル	カード型風の表現が可能
デフォルト時の開閉	開閉選択可	閉
主な用途	均一なテキスト向け	商品・画像・説明向け
見た目	単純な折りたたみ	ポップアップ風スライド

スライドブロックは視覚的に目立つ作りで、「レビュー・おすすめ商品紹介」に向いています。

操作性・デザイン性の違い

• 詳細ブロック…控えめで読みやすい。文章整理向き。
• スライドブロック…視覚的にアピールできる。商品紹介向き。

使い分けのコツ（どっちを使うべき？）

• 補足説明・FAQ → 詳細ブロック
• 画像＋説明をセットで見せたい → スライドブロック
• 記事をすっきりさせたい → 詳細ブロック

使う目的に合わせて使い分けると、見やすさが大幅にアップします。

スライドブロックについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。

詳細ブロックの便利な活用例5選

ここでは、詳細ブロックを使ってすぐに実践できる、便利な活用例を5つ紹介します。

FAQ（よくある質問）

「Q：〜」「A：〜」形式でよく使われます。
読者が必要な質問だけ開けるので便利です。

補足説明・注意点の折りたたみ

本文の流れを邪魔せず、必要な人だけ開ける形式にできます。
SEO記事でよく使われる方法です。

長文の情報整理

文章が多くなるレビュー記事などで活用できます。
読みやすさに直結します。

アフィリエイト商品の詳細スペックまとめ

スペックや説明書きを折りたたむことで、スマホ表示もスッキリします。

ステップ解説のサブ情報

手順記事で「補足情報」や「注意点」をまとめるのに最適です。

まとめ！AFFINGER6「詳細ブロック」の使い方を完全解説｜設定手順・カスタマイズ・スライドブロックとの違いまで

AFFINGER6の「詳細ブロック」は、クリックで開閉できる「情報の折りたたみ」をシンプルに実現できる便利な機能です。設定項目も簡単で、初心者さんでも読みやすい記事レイアウトを作れます。

また「スライドブロック」との違いを理解しておくと、

• ちょっとした補足をまとめたい場合 → 詳細ブロック
• 情報量が多く、滑らかなスライド表示を使いたい場合 → スライドブロック

というように、記事の内容に合わせて最適な使い分けができます。

記事の構成をスッキリ保ちながら、読者のストレスなく情報を届けられるので、ぜひ記事制作に積極的に取り入れてみてください。この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／