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

AFFINGER6 カラムブロックの使い方!コンテンツを縦割りにして見やすく表示!!

AFFINGER6 カラムブロックの使い方

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

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

  • デザイン:カラム

WordPress標準のブロックエディター機能です。
コンテンツ(記事)を縦割りにするつまり「列」を作成する機能です。

見出しブロック・段落(P)ブロック・画像ブロック等を「2列・3列 等」で表示したいときに使います。
極端に表現するとテーブル(表)ブロックの枠なし版みたいな感じですかね。^^"

執筆表現が豊かになり、読みやすく見やすいコンテンツ(記事)作りに役立ちます。

この記事でわかること!

  • デザイン:カラムとは…
  • カラムブロックの使い方
    1. カラムブロックの挿入手順
    2. カラムブロック内の1つのカラム設定(子カラム)
    3. カラムブロックの全体設定(親カラム)
  • カラムブロックのカスタマイズイメージ
  • まとめ!

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

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

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

デザイン:カラムとは…

カラムブロックとは、コンテンツを複数列に分けてページに表示する機能です。WordPressのコアブロックで「比較や対比」などの表現に適しています。

ブロック挿入メニューでは、ブロックタブの『デザイン:カラム』です。

ブロックタブメニュー:デザイン|カラム

カラムブロックの使い方

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

基本的な記事へのカラムブロック挿入手順やカラムのスタイル設定とカラム項目の設定についてご紹介します。

カラムブロックの使い方

  • カラムブロックの挿入手順
  • カラムブロック内の1つのカラム設定(子カラム)
  • カラムブロックの全体設定(親カラム)

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

カラムブロック挿入手順

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

この章では、基本的なカラムブロックの挿入手順をご紹介します。

STEP1投稿(記事編集)画面を準備

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

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

リッチカラムブロックを挿入する箇所をクリックします。

ブロック挿入ツール『+』を切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

『+』をクリックします。

投稿画面:ブロック挿入ツールを切り替え

STEP3ブロックタブメニューから『カラム』を選択

ブロック挿入ツールが『x』切り替わり 以下の画面が表示されます。

デザインから『カラム』を選択して投稿画面に設置します。

『カラム』をクリックします。

ブロックタブメニュー:デザイン|カラム

STEP4カラムブロック挿入完了

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

以下のように表示されるので 『開始時のパターン』を選択します。

投稿(記事編集)画面:カラムブロック挿入直後|詳細

※ カラムパターンは後で変更ができます。

ここではサンプルとして『50/50』2列の開始時のパターンを選択します。

2カラム:等分をクリックします。

投稿(記事編集)画面:カラムブロック挿入直後|詳細2

画面が切り替わり パターンが表示されます。

カラムブロック内の1つのカラムが選択された状態で表示されます。(対象カラムは青枠で囲まれます)
選択したカラムに「段落や画像等のブロック」を挿入できます。この状態で対象カラムの設定ができます。(詳しくは後述します。)

投稿(記事編集)画面:カラムブロック挿入直後|詳細3

『カラムを選択』アイコンをクリックするとカラム全体が選択され青枠で囲まれます。この状態でカラム全体の設定ができます。(詳しくは後述します。)

投稿(記事編集)画面:カラムブロック挿入直後|詳細4

カラムブロック内の1つのカラム設定(子カラム)

カラムブロック内の1つのカラム設定をご紹介します。

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

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

投稿画面:設定
カラムブロック内の1つのカラム設定

カラム設定(子カラム):Settings

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

カラム設定:Settings

カラム設定

   カラム幅:ドロップダウンメニュー
   ※ ドロップダウンメニューより選択

幅設定は『%』がおすすめ!
カスタマイズイメージはこちら!

高度な設定

  • HTML アンカー
  • 追加 CSS クラス

※ 『高度な設定:HTML アンカー・追加 CSS クラス』の設定は、中級の為 割愛します。

カラム設定(子カラム):Styles

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

カラム設定:Styles

  • テキスト

   リストブロック:テキスト|ドロップダウンメニュー
   ※ ドロップダウンメニューより選択

  • 背景

   リストブロック:背景|ドロップダウンメニュー
   ※ ドロップダウンメニューより選択

色が変更される場所!
カスタマイズイメージはこちら!

タイポグラフィ

  • サイズ →『S・M・L・XL』を選択

   ※ 行の高さ設定が可能

サイズ

  • パディング → マーク移動

カラムブロックの全体設定(親カラム)

カラムブロックの全体設定をご紹介します。

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

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

投稿画面:設定
カラムブロックの全体設定

カラム全体設定(親カラム):Settings

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

カラム全体設定:Settings

カラム

  • カラムの数を設定
  • モバイルでは縦に並べる →『ON/OFF』

gap

  • gapを0にする →『ON/OFF』

高度な設定

  • HTML アンカー
  • 追加 CSS クラス

※ 『高度な設定:HTML アンカー・追加 CSS クラス』の設定は、中級の為 割愛します。

カラム全体設定(親カラム):Styles

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

カラム全体設定:Styles

  • テキスト

   リストブロック:テキスト|ドロップダウンメニュー
   ※ ドロップダウンメニューより選択

  • 背景

   リストブロック:背景|ドロップダウンメニュー
   ※ ドロップダウンメニューより選択

色が変更される場所!
カスタマイズイメージはこちら!

タイポグラフィ

  • サイズ → 『S・M・L・XL』を選択

   ※ 詳細メニューで行の高さ設定が可能

サイズ

  • パディング → マーク移動

   ※ 詳細メニューで個別設定が可能

カラムブロックのカスタマイズイメージ

この章では、利便性が高い「カラムブロックのカスタマイズイメージ」をピックアップしてご紹介します。

カラムの幅は『%』を使って割り振ると簡単です。
100%を「カラム数と割り振り量」の兼ね合いで直感的に配置します。(サイスを意識しなくても感覚で配置が決めれます)

カラム設定:幅(%)

カラムブロックのカスタマイズイメージ:幅%

カラムブロックの色設定ではカラムごとのテキストと背景をまとめて設定できます。
このとき、カラム全体設定(親)よりカラム設定(子)の方が優先されます。

色:設定で変更される場所

カラムブロックのカスタマイズイメージ:色

※ テキストの色は カラム設定が優先されます。(サンプル青色)

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

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

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

まとめ!AFFINGER6 カラムブロックの使い方!コンテンツを縦割りにして見やすく表示!!

コンテンツ(記事)を縦割りにする!「列」を作成する機能:カラムブロックの使い方をご紹介しました。「列」を作ることで画像に対する説明や比較等の表現が容易になると思います。当サイトでも頻繁に使っている 便利なブロックエディター機能なので是非お試しください。

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

-機能紹介(使い方)AFFINGER
-