当ページのリンクには広告が含まれています。

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

2023年10月20日

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

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

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

  • テキスト:詳細

WordPress標準のブロックエディター機能です。
詳細ブロックは、AFFINGER6のスライドブロックと同様の機能で…「通常は、補助的要素を隠しておいて 必要に応じで開く」という機能です。

\ 詳細ブロックの使い方とスライドブロックとの違いをご紹介します。/

※ WordPress6.3から追加されたブロックです。

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

+「これは、詳細ブロックのサンプルです」「クリックするとテキストと画像が出ます。

\ サンプルテキストと画像です。/

詳細ブロックをクリックすると出てくる文字です。

詳細ブロックをクリックすると出てくる画像です。

WordPress:グレーロゴ

この記事でわかること!

  • 詳細ブロックとは?
  • 詳細ブロックの使い方
  • 詳細ブロックとスライドブロックの違い

それではご覧ください!

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

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

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

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

詳細ブロックとは?

イラストはてな

詳細ブロックとは?

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

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

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

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

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

詳細ブロックの使い方

イラスト主張

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

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

詳細ブロックの使い方

  • 詳細ブロックの挿入手順
  • 詳細ブロックのコンテンツ作成
  • 詳細ブロックのカスタマイズ

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

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

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

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

詳細ブロックの挿入手順

テキスト:詳細ブロック を投稿(記事)に挿入します。

詳細ブロックの挿入手順

  • ブロック挿入ツールを切り替え:『+』をクリックすると『x』に変わり、メニュータブが表示されます。
  • ブロックタブのメニューから『テキスト:詳細』をクリックします。

❶❷を処理します。

ブロック挿入ツール:ブロックタブ|詳細

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

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

投稿(記事編集)画面:詳細ブロック

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

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

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

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

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

投稿(記事編集)画面:詳細ブロック|挿入説明

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

投稿(記事編集)画面:詳細ブロック|挿入説明2

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

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

詳細ブロックのタイトル

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

WordPress:グレーロゴ

詳細ブロック内の画像

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

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

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

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

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

  1. 詳細ブロックをクリックします。(タイトル部分をクリックします)
  2. 右上の『設定』アイコンをクリックしてドロップダウンメニューを開きます。
  3. 『ブロック』タブを選択します。
投稿(記事編集)画面:詳細ブロック|設定|ブロックタブ

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

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

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

投稿画面:詳細メニュー|設定タブ

設定

 デフォルトで開く『ON / OFF』

高度な設定

 追加 CSS クラス
 ※ 割愛します。

最初の状態を『開・閉』どちらにするかの設定だけ!

osaboo

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

投稿画面:詳細メニュー|スタイルタブ

 テキスト
 テキストカラー:ドロップダウンメニュー
 ※ ドロップダウンメニューより選択

 背景
 背景カラー:ドロップダウンメニュー 背景カラー:ドロップダウンメニュー2
 ※ ドロップダウンメニューより選択

タイポグラフィ
 ※ 割愛します。

サイズ
 ※ 割愛します。

 

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

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

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

\ クリックしてみて!/

詳細ブロック

詳細ブロック

テキスト(詳細ブロック)

テキスト(詳細ブロック)

テキスト(詳細ブロック)

スライドブロック

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

あわせて読みたい!

AFFINGER6 スライドブロックの使い方!長い記事もポイントを押さえてスッキリ表示
AFFINGER6 スライドブロックの使い方!長い記事の内容を保ったまま、短くシンプルに表示

AFFINGER6の便利機能!スライドブロックの使い方をご紹介。「長い記事の内容を保ったまま、短くシンプルに表示!」スライドブロックへのコンテンツの入れ方からブロックのカスタマイズまで参考例(サンプル)を多数使用して解説しています。初心者必見!

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

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

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