こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6の「スライドブロックの使い方」を初心者さん向けに解説します。
AFFINGER6の「スライドブロック」…って、なに？
それではご覧ください。
AFFINGER6のスライドブロックとは？
AFFINGER6の「スライドブロック」とは、クリック（タップ）で中身を開閉できるコンパクトなボックスのことです。
表示されるのはタイトル（見出し）部分のみで、本文は折りたたまれた状態になるため、長い記事でもスッキリ整理できます。
スライドブロックは、読み手が「必要な部分だけ読む」しくみを作れるため、特にスマホ表示での読みやすさが大きく向上します。
また、通常のコンテンツを隠さず、内容をそのまま保持できる点も魅力です。
スライドブロックのサンプル
詳細ブロックは、タイトル部分をクリックすると内容が開き、テキストや画像などのサンプルコンテンツを自由に入れることができます。
例
テキストサンプル
テキストサンプル
テキストサンプル
テキストの装飾なども自由に…
- リストのサンプル
- リストのサンプル
- リストのサンプル
画像のサンプル
詳細ブロックとの違い
AFFINGER6には、スライドブロックと似た「詳細ブロック」もあります。
大きな違いは以下のとおりです。
- スライドブロック：タイトルが強調され、視認性が高いデザイン
- 詳細ブロック：よりシンプルで、補足説明向け
スライドブロックはデザイン性が高く、重要な情報や目立たせたい内容の整理に向いています。
詳細ブロックのサンプル
「詳細ブロック」のサンプルです。「ここをクリックしてサンプルを確認」
詳細ブロックのコンテンツ『テキスト・リスト・画像』など、自由に入力
例
テキストサンプル
テキストサンプル
テキストサンプル
テキストの装飾なども自由に…
- リストのサンプル
- リストのサンプル
- リストのサンプル
画像のサンプル
どんな場面で使うと効果的？
スライドブロックは、次のような場面で効果を発揮します。
- 長い設定手順や補足説明をまとめたい
- 専門用語の解説を隠して読みやすくしたい
- Q&Aの回答部分だけ折りたたみたい
- 商品スペックや注意事項など、詳細情報を整理したい
情報量が多い記事ほど、スライドブロックを入れるだけで読みやすさが一気に向上します。
詳細ブロックについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
AFFINGER6「詳細ブロック」の使い方を完全解説｜設定手順・カスタマイズ・スライドブロックとの違いまで
AFFINGER6の「詳細ブロック」の使い方を初心者向けにわかりやすく解説。挿入手順、設定方法、デザインカスタマイズ、スライドブロックとの違いまで詳しく紹介。どこから設定するか迷う方にも最適なガイドです。
AFFINGER6 スライドブロックの使い方（基本操作）
AFFINGER6のスライドブロックは、Gutenberg（ブロックエディター）から簡単に追加できます。
ここでは、AFFINGER6のスライドブロックの基本的な使い方を解説します。
記事への挿入方法からタイトルの設定、コンテンツ（中身）の編集まで、初心者さんでも迷わないように順番に解説します。
それでは順番に見ていきましょう。
スライドブロックの挿入手順
- 投稿（エディター）画面での作業になります。
基本的な詳細ブロックの挿入手順をご紹介します。
投稿（エディター）画面を準備
Menu 『WordPress管理＞ダッシュボード＞投稿＞投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）
詳細ブロックを挿入する箇所をクリックします。
ブロック挿入ツール（ブロックインサーター）を切り替え
ブロック挿入ツール（ブロックインサーター）『＋』をクリックします。
ブロックタブメニューから『スライド』を選択
ブロック挿入ツール（ブロックインサーター）が『ｘ』切り替わり 以下の画面が表示されます。
ブロックタブのメニューから『スライド』を選択して投稿画面に設置します。
『AFFINGER: スライド』をクリックします。
スライドブロック挿入完了
投稿（エディター）画面に『スライドブロック』が挿入されます。
挿入直後では、以下のように表示されます。
スライドブロックのコンテンツ作成
タイトルの下にあるスペースが本文部分です。
ここに自由にテキストや画像を入れることができます。
ほとんどの一般ブロックを利用できるため、自由度は高いです。
+ クリックして下さい の部分（赤矢印）は、スライドブロックのタイトルです。
ブロックを選択するには「/」を入力 の部分にテキストや画像を使ってコンテンツを作ります。
「テキスト・リスト・画像」をコンテンツエリアに作成したサンプルです。
実際に作成したスライドブロックのサンプルです。（クリックしてみてください）
詳細ブロックのコンテンツ『テキスト・リスト・画像』など、自由に入力
例
テキストサンプル
テキストサンプル
テキストサンプル
テキストの装飾なども自由に…
- リストのサンプル
- リストのサンプル
- リストのサンプル
画像のサンプル
スライドブロックの基本設定
スライドブロックは、まず「タイトル（見出し）」部分だけが表示され、クリック（タップ）すると本文が開く仕組みです。そのため、閉じた状態でどう見えるかを意識してタイトルを設定することが重要です。
ここでは、投稿（エディター）画面の右側に表示される「ブロックタブメニュー」の概略をご紹介します。
（基本）
設定メニューの場所は、投稿（エディター）画面の右側に表示される『設定＞ブロック』タブメニューです。
表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。
- スライドブロックエリアをクリックします。
- ブロック（タブ）の設定項目で「タイトル（見出し部分）や背景色」などの設定ができます。
ブロックタブメニュー詳細
全般
- 太字
- ラジオボタン切り替え『ON/OFF』
（タイトルのテキストが対象）
- ラジオボタン切り替え『ON/OFF』
- アイコンクラス
- 『クラス名』を入力
- 枠線
- ドロップダウンメニューより選択
アイコン位置
- 『左・右』を選択
配置
- 『左寄せ・中央揃え・右寄せ』を選択
色
- テキスト（カラーパレット設定）
- 背景（カラーパレット設定）
高度な設定
- 追加 CSS クラス
- 省略します。
AFFINGER6 スライドブロックの表示スタイル
ここでは、スライドブロックで設定できる基本的な表示スタイルを、わかりやすくまとめて紹介します。デザインの違いを比較しながら、自分の記事に合ったスタイル選びの参考にしてください。
デフォルト
太字（タイトル）・アイコンクラス変更
枠線（基本）・アイコン位置（右）・色（背景）
枠線（太め）・配置（中央揃え）・色（背景）
色（テキスト）・色（背景）
まとめ！AFFINGER6 スライドブロックの使い方｜長い記事を短くまとめて読みやすくする方法
AFFINGER6のスライドブロックは、長い記事の情報量を保ったまま、読者が必要な部分だけを開いて読めるようにできる非常に便利な機能です。特に、設定手順・Q&A・補足説明など、本文にそのまま書くと長くなってしまう内容をスッキリ整理できます。
使い方もシンプルで、ブロックを追加してタイトルと本文を入力するだけ。デザイン性も高く、スマホでも見やすいため、読みやすさを重視したいブログには相性抜群です。
スライドブロックを活用すれば、「伝えたい情報はそのまま」「見た目はスッキリ」という両立が簡単にできます。
ぜひこの記事を参考に、あなたのブログにも取り入れてみてください。記事の質がぐっと上がり、読者のストレスも大きく減らせます。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
