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

AFFINGER6 スライドブロックの使い方!長い記事の内容を保ったまま、短くシンプルに表示

2023年4月28日

AFFINGER6 スライドブロックの使い方!長い記事もポイントを押さえてスッキリ表示

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

Question

記事を丁寧に書いていくと長くなってしまう…丁寧に書いた部分を消すのは勿体無い!
記事をスマートにする方法は??

\\ このような「疑問を解決する」お手伝いをします!//

「通常は、補助的要素を隠しておいて 必要に応じで開ける→スライドブロック」っていう便利な機能が AFFINGER6 にはあるよ!

osaboo

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


こんな方におすすめ!

  • WordPressテーマAFFINGER6を使いこなしたい。
  • 長い記事が読み難くなってしまう。
  • 記事をシンプルかつ内容の濃いものにまとめたい。

この記事でわかること!

  • スライドブロックとは?
  • スライドブロックの使用例(参考)
  • スライドブロックの使い方

今回の記事では…

スライドブロックの基本的な使い方をご紹介します。

長い記事を見やすくするためには、便利な機能です。長い記事は制作はもちろん読むのも大変ですよね。
長い記事を「見やすく・シンプル」にするために活躍してくれる機能が!『スライドブロック』です。

使い勝手も簡単なので是非!…\ おすすめの機能です。^^/

それではご覧ください!

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

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

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

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

スライドブロックとは?

スライドブロックとは?

スライドブロックとは…

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

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

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

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

※ ちなみに…SWELLでは、「アコーディオン」に相当します。

スライドブロックの使用例(参考)

スライドブロックの使用例(参考)

この章では、スライドブロックの使用例(参考)をご紹介します。

当サイトで主に使用しているパターンは以下の2つです。

  • 細かすぎる?詳細説明や画像のコンテンツをスライドブロックに収納
  • 興味を持つ読者への導線にスライドボックスを使う

まだまだ…たくさん使える方法はあるので工夫してね!

osaboo

細かすぎる?詳細説明や画像のコンテンツをスライドブロックに収納

当サイトでは、操作メニューをテキストでガイドしています…が、合わせて初心者さん用に「詳細説明や画像」等も添付する場合が多々あります。この細かすぎる?「詳細説明や画像」等をスライドブロックに入れて必要な方はクリックしてね!(笑)みたいな感じにしています。

こんな感じです!

『WordPress管理>ダッシュボード>プラグイン>新規追加』をクリックします。

参考にしてみてください。^^/

興味を持つ読者への導線にスライドボックスを使う

記事の本筋から少し外れる内容がある場合等、読者の興味が振れた場合に導線として使用するのも有効かと…

こんな感じです。

ちなみに…MacでWindowsを動かすことができます!

参考にしてみてください。^^/

スライドブロックの使用例(参考)は以上です。使い方のイメージは掴めましたか?!

スライドブロックの使い方

スライドブロックの使い方

この章では、スライドブロックの使い方をご紹介します。

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

スライドブロックの使い方

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

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

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

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

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

スライドブロックの挿入手順

AFFINGER:スライドブロックを投稿に挿入します。

スライドブロックの挿入手順

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

❶ ❷ を処理します。

投稿画面メニュー:スライドブロック

記事編集エリアに『スライドブロック』が表示されます。

デフォルトでは、以下のように表示されます。

投稿画面:スライドブロックのプレビュー

スライドブロックのコンテンツ作成

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

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

+ クリックして下さい の部分はスライドブロックのタイトルです。常表示(詳細は後述します)

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

投稿画面挿入:スライドブロック-コンテンツ無し

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

投稿画面挿入:スライドブロック-コンテンツ有り

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

スライドブロックのカスタマイズ

スライドブロックが閉じている状態の表示をカスタマイズ(装飾)します。

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

スライドブロックのカスタマイズ手順「メニューopen」

  1. スライドブロックのエリアをクリックします。
    • 下画面のようにスライドブロック全体が青枠で囲まれた状態にします。
  2. 右上の『設定』アイコンをクリックしてドロップダウンメニューを開きます。
  3. 『ブロック』タブを選択します。

❶の操作で スライドブロックエリアを選択しても青枠が表示されない時は、上カーソルで移動していくと選択できます。

❶ ❷ ❸ を処理します。

投稿画面:スライドブロック-カスタマイズ-1

上画面の『❸ ブロック』タブメニューで色々なカスタマイズ(装飾)ができます。

主にアイコンの変更と表示位置、テキストの内容です。「以下の画面で❶と❷です。」

投稿画面:スライドブロックのプレビュー2

それでは、カスタマイズできる内容を順番に説明します。

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

ブロックタブメニュー詳細

ブロックタブメニュー:スライドブロック

全般

  • 太字(タイトルのテキストが対象)

アイコンクラス

  • クラス名を入力してアイコン変更

枠線

  枠線:ドロップダウンメニュー
  ※ ドロップダウンメニューより選択

アイコンの位置

  • 『左・右』選択

配置

  • 『左寄せ・中央揃え・右寄せ』選択

  • テキスト

  カラーパレット
  ※ ドロップダウンメニューより選択

  • 背景

  カラーパレット
  ※ ドロップダウンメニューより選択

高度な設定

  • 追加 CSS クラス

参考までに…カスタマイズのサンプルをご紹介!

デフォルト

枠線(基本)・アイコン位置(右)・色(背景)

枠線(太め)・配置(中央揃え)・色(背景)

色(テキスト)・色(背景)

あわせて読みたい!

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

WordPress ver6.3 から実装された 詳細ブロックの使い方をご紹介。長い記事の内容を保ったまま、短くシンプルに表示!」WordPressの詳細ブロックとAFFONGER6のスライドブロックとの違いも解説しています。初心者必見!

まとめ!AFFINGER6 スライドブロックの使い方!長い記事の内容を保ったまま、短くシンプルに表示

AFFINGER6を使ったスライドブロックの使い方をご紹介しました。読者(ユーザー)が読みやすいように工夫する!って難しいですよね。記事の中で「あると邪魔?ないと寂しい?」というコンテンツは多々出てくるかと…そんな時に今回ご紹介した「スライドブロック」を使ってはいかがでしょう。簡単操作で優れものだと思います。是非、使ってみて下さい!!

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