ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス 段組みレイアウトを作成しよう!(カラムブロック Gutenbergエディター使用)

段組みというのは、2列や3列など複数準備した枠の中に、文字や画像などのコンテンツを並べるレイアウトのことです。ワードプレスのブロックエディター(Gutenbergエディター)カラムブロックを使えば、段組みレイアウトが簡単にできあがります。

段組みレイアウト(カラム化)は従来のクラシックエディターならばカスタムCSSを使う必要がありましたが、ブロックエディターでは、それが簡単にできるようになったのです。

本記事では、その方法について紹介します。

※この記事は、2020年8月のワードプレスversion5.5へのアップデートにより、2020年9月にリライトしました。

 

前提条件

テーマはブロックエディターが使えればなんでもよいのですが、本記事ではTwenty Seventeenを使用、エディターの編集機能に影響を与えるTinyMCE Advancedなどは何も有効化していない状態としています。

ようは、ワードプレスとして、プレーンな状態ですね。当然ですが、WordPressはversion5.0以降でブロックエディター(Gutenberg)が使用できる設定が大前提です。

 

また、ブロックエディターの基本的な使い方については、次の記事を参考にしてください。

参考記事:ワードプレス 初めてのブロックエディター(編集画面の各機能)

参考記事:ワードプレス Gutenberg(ブロックエディター)で記事作成

 

 

段組みレイアウト(カラム化)とは?

段組みレイアウト(カラム化)というのは、2カラムや3カラムなど、コンテンツを2列や3列でレイアウトすることをいいます。

例えば次のようなものです。

段組レイアウトできあがり例

ちょっとテキストがシンプル過ぎました(笑)

この段組みレイアウトは、3カラム(3列)の枠の中に、それぞれ1番上に画像、その下にテキスト(段落)を配置しています。

もちろん、テキストはもっと長くできますし、画像も段落ももっと多く、順番も任意に配置することができます。

 

もうひとつ例をあげると、こんな感じです。

段組レイアウト例2

これは、後述するように、ブロックエディターの中で、カラムブロックのプレビュー機能で表示されるものです。

 

”カラム”ブロックを使用して段組みレイアウトをつくる手順

手順の概要

①ブロック一覧から、”カラム”要素を選択する

②カラム数を指定する

③それぞれのカラムの中にコンテンツを入力する(ブロック要素はいろいろ選択できる)

と簡単です。以下に詳細手順を解説します。

 

 

カラムブロックを選択する

下記画像の通り、①画面左上の+マークをクリック③”カラム”をクリック まで進めます。

カラムブロックの選択方法

 

ちなみに、上記③のカラムを選択するときにマウスオーバーすると、下記のようにプレビューが表示されます。

カラムブロックのプレビュー

 

これはワードプレスのversion5.5から加わった機能で、各ブロックにマウスオーバーすると、どんなコンテンツを作成できるかの例を表示してくれるわけです。カラムブロックの例では、次のような構成のコンテンツになっています。

カラムブロックのプレビューの解説

少し脱線しましたが、手順に戻って、ブロック一覧から”カラム”をクリックしたところから進めましょう。

 

カラムブロックが設置される(”カラム”のクリック直後)

カラムブロックを選択すると、エディター画面は次のようになっています。

カラムを選択直後

 

画面右側のブロックパネルには”カラム”と表示されて、今選択されているブロックがカラムブロックであることを示しています。

※もし画面右側にブロックパネルが表示されていない場合は、画面右上の設定(歯車マーク)をクリックして表示させましょう。

情報パネルの表示・非表示切り替え

 

本文入力欄にはカラムブロックが配置されています。ブロックの中には、大きく2通りの進め方が表示されています。

  • 開始時のパターン
  • スキップ

作業を簡単に進めるためには、”開始時のパターン”の中から、自分が作成したカラム数とその幅の比率のものをクリックすれば、自動的に設置されます。

 

でも、とりあえず今回は、カラムブロックの設定方法を知るために、”スキップ”の方をクリックしましょう。

 

2カラムレイアウトが表示(”スキップ”直後)

次のように表示されます。

スキップすると表示される2カラムレイアウト

2カラムのレイアウトが表示され、まずは左側のカラムが選択されている(青で囲まれている)状態です。

 

この状態で、パソコンの矢印キーで左矢印(→)をクリックすると、右側のカラムに移ります

右側のカラムに移動

このレイアウトでよければ、それぞれのカラムの中にコンテンツを配置していけばよいのですが、

その前に、レイアウト(カラム数やカラム幅)の変更方法を紹介しましょう。

 

カラム幅を変更する

カラム幅は、画面右のブロックパネル内の”カラム設定”で変更します。

左側のカラムが選択された状態で、カラム設定を30にしてみましょう。

カラム幅の変更(30%)

すると、左側のカラム幅が全体の30%になって、”左:右=30:70”となりました。

すごい簡単ですね。

 

カラム数を変更する

カラム数を変更するときは、左、右どちらかのカラムではなく、カラム全体が選択されている必要があります。マウスを左と右の各カラムの間にもってきてクリックしてみましょう。

すると、次のように、カラム全体が青く囲まれます。

カラム全体を選択した状態

この状態だと、画面右のブロックパネルの中に、”カラム”の数が表示されるようになります。これを変えればカラム数を変更できるわけです。

試しに3カラムにしてみましょう。

3カラムにしてみる

 

3カラムの一番左のカラムを選択して、カラム幅を変えてみましょう60%にしてみます。

3カラムでカラム幅を変更する

このように、60:20:20の3カラムレイアウトとなりました。

 

以上のように、

  • 個々のカラムを選択するとカラム幅
  • カラム全体を選択するとカラム数

が画面右のブロックパネルで操作できるようになる、ということが理解できまたでしょうか。

 

でも、結構手間ですよね。

だから特異なカラムレイアウトを使わなければ、カラムブロック設置直後の状態から、パターンを選択するのがよいでしょう。

 

カラムブロックを設置した直後に戻って、

(先ほど”スキップ”を選択しましたが)3カラムを選択してみましょう。

カラムブロック設置後から3カラムを選択

 

すると一気に次の表示となるわけですね。

3カラムにしてみる

 

では、次にコンテンツを入力していきましょう。

 

左カラムにコンテンツを入力

カラム内のコンテンツ入力は、通常の入力方法(カラムブロックでない場合)と基本的には同じです。

  • +マークをクリックして新しいブロックの要素を選択して入力する。
  • 入力が終われば、カラム内で次のブロックに移りますので、また+マークをクリックして・・と繰り返します。

段落ブロックとして入力の場合は、+マークをクリックせず、直接文字入力していけばよい、という点も、カラム外の通常の入力方法と同じです。

 

ここで示す例では、一番左のカラムに、1つ目に画像ブロック、その下に段落ブロックで文字入力をしていきます。

①左カラムの+マークをクリック

カラム内+マークをクリック

 

②画像ブロックを選択する

画像ブロックを選択する

 

③メディアライブラリを選択して画像を挿入する

メディアライブラリを選択して画像を挿入

 

④画像を挿入後

画像を挿入後

画像を挿入すると、次のブロック用の+マークが表示されます。

もちろん、通常の画像ブロックと同様、画像のスタイルを画面右のブロックパネルで設定したり、ブロック内ツールバーで画像の編集をすることもできます。

 

⑤段落ブロックをして文字を入力

段落ブロックへ入力

 

⑥一旦カラムブロックから抜けてみます

一旦カラムブロックから抜けて表示

このように、左のカラムにコンテンツが入りました。

 

⑦中央と右のカラムも同様に作成して仕上げる

3カラム仕上がり

こんな感じで仕上がりました。

 

カラムの移動

ちなみに、カラムのツールバーの移動を使えば、左右にカラムを入れ替えることができます

カラムの移動

 

移動すると次のようにできたりします。

段組レイアウトできあがり例

 

 

スマホ表示だと縦に並ぶ

以上でカラムの作成の解説は終了ですが、スマホ表示だとカラムは縦に並びます

スマホ表示ではカラムが縦に並ぶ

 

 

ブロックナビゲーターで確認する

カラムブロックのように、ブロックの中にカラムがあり、さらにカラムの中に別のブロックがある・・・と構成が複雑になると、思った部分を選択できなくて編集がうまく進まない場合があります

そんなときには、画面左上のブロックナビゲーターが便利です。ブロックナビゲーターでは、ブロックの内部構造が階層的に表示されます。選択したい部分をクリックすると、その場所を選択してくれます

ブロックナビゲーターでカラムブロックを見てみる

覚えておくとよいでしょう。

 

まとめ

ブロックエディターで、2カラム以上の段組みレイアウトが簡単にできる”カラム”ブロック使う手順を紹介してきました。

従来カスタムCSSでしかできなかったレイアウトが簡単に作成できますので、投稿や固定ページの中で、コンテンツを充実させるのに便利ではないでしょうか。

 

ブログ記事の中でも使えるようにしておくと、少し見栄えで差をつけれるかもしれませんよ。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる