AFFINGER6 詳細ブロックの使い方！スライドブロックとどう違う？！「比較してみた！」

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

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

詳細ブロックのサンプルです。こんな感じ！開閉できますよ。^^

それではご覧ください！

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

詳細ブロックとは？

詳細ブロックとは？

補助的（必要な場合のみ表示する）コンテンツ等を格納しておき、そのブロック領域をクリックすることで 格納されているコンテンツ等を「開 open / 閉 close」させることができるブロックです。

主要コンテンツのみを表示して、補助的なコンテンツを詳細ブロックにまとめると 長い記事も見た目は 短くスッキリした印象になります。

読者にとっても 主要部分を短時間で読め、補助部分を必要に応じて詳細ブロックから把握できるので…読書欲の向上が期待できます。

詳細ブロックを使うことで、長い記事を簡素化した記事とは違い 内容を削ぐこと無くシンプルに見せることができます。

※ 比較詳細は 後述しますが、AFFINGER6専用ブロックの「スライドブロック」と同様の機能をもっています。

詳細ブロックの使い方

この章では、詳細ブロックの使い方をご紹介します。

基本的な記事への詳細ブロック挿入手順やタイトル・コンテンツ範囲の説明、詳細ブロックのカスタマイズ（装飾）の3つのセクション仕分けてご紹介します。

以下の作業は投稿（記事編集）画面での作業になります。

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

それでは、投稿（記事編集）画面での各手順と方法をご紹介していきます。

詳細ブロックの挿入手順

テキスト：詳細ブロック を投稿（記事）に挿入します。

❶❷を処理します。

投稿（記事編集）画面に『詳細ブロック』が表示されます。

詳細ブロックの挿入直後は、以下のように表示されます。

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

詳細ブロックが投稿（記事編集）画面に挿入されたら、コンテンツを作ります。

以下の画面は挿入直後の状態です。

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

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

サンプルでは以下のようなテキストをコンテンツエリアに作成します。

以上で、スライド内に隠れるコンテンツができました。

実際に作った詳細ブロックは以下です。（クリックしてみてください）

詳細ブロックのタイトル

詳細ブロック内のテキスト

詳細ブロック内の画像

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

詳細ブロックのカスタマイズ

詳細ブロックのカスタマイズは デフォルト状態の開閉です。

詳細ブロックをカスタマイズするためにブロックタブメニューを開きます。

---

それでは、カスタマイズの詳細を見ていきましょう。

以下の画面は投稿（記事編集）画面の右側に表示される『設定＞ブロック』タブメニューです。

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

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

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

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

ザックリと違い（1）…詳細ブロックは自由度が低く、スライドブロックは自由度が高い。
ザックリと違い（2）…詳細ブロックは軽い・速い、スライドブロックは重い・遅い。
※ 筆者の操作感です。（あくまで参考）

チェック項目	詳細ブロック	スライドブロック
タイトルのみの装飾	不可	太字・色・アイコンの表示と位置
ボックス全体の装飾	テキスト色・背景	テキスト色・背景・枠
デフォルト時の開閉	開閉選択可	閉

あわせて読みたい！

まとめ！AFFINGER6 詳細ブロックの使い方！スライドブロックとどう違う？！「比較してみた！」

WordPress ver6.3 から実装された 詳細ブロックの使い方とAFFINGER6のスライドブロックとの違いも合わせてご紹介しました。類似している詳細ブロックとスライドブロックを上手に使い分けましょう。

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