こんにちは。Kouです。今回はWordPressテーマTwentyTwentyで、以下の部分を作成したいと思います。

ABOUTとWORK欄

画像、見出し、段落が横並びで配置されていますね。この配置はどうやって設定するかというと、「カラム」というブロックを使っていきます。

「カラム」とは?

通常、TwentyTwentyのデフォルト設定だと、1カラムレイアウトです。(横が1列のレイアウトのこと。例えば画像や段落を配置しようとすると、2列3列と横に並べることができない。)それを、この「カラム」ブロックでレイアウトを2カラム、3カラムと変更することができます。上にある図は2カラムになります。

「カラム」ブロックを配置する

レイアウトを変更したい箇所に「カラム」ブロックを入れます。

「カラム」ブロック

すると、以下のような表示になります。ここでは、カラムの種類を簡易的に決定できます。今回は2列で左右均等にしたいので、「50/50」を選択します。

「カラム」の種類の選択

すると、下図のようになります。これで「カラム」ブロックの配置が完了しました。

種類選択後

「カラム」ブロックを配置した後は?

配置完了後は、それぞれのカラムに「見出し」や「段落」、「図」を配置していきましょう。ここからは、今までやってきたブロックエディタの編集方法と同じです。下の図は、片方にのみもろもろ配置してみたものです。

左側に様々な要素を配置。

これを、プレビューで表示して確認すると以下のようになります。

プレビューで確認。

横幅が狭いときの対処法

カラムを配置後、どうも幅が狭い場合があります。例えば下の図のような感じ。

カラム自体の幅が狭い。

この場合は、カラム全体のブロックを選択し、幅の設定を行います。まず、片方のカラムをクリックします。

片方のカラムをクリックした状態。

上の図の状態で、ツールバーの左端のボタンにカーソルを当てます。すると、上に真ん中が白く塗られたカラムのマークが出ます。

カーソルをあてたとき。

このマークをクリックすると、カラム全体を選択できます。

全体選択時。

この状態で、真ん中にあるマークにカーソルを当て、「幅広」を選択します。

幅広を選択。

これで横幅を広くできます。

おわりに

いかがでしたか?カラムは使い方によってはかなり動きのある見た目を作ることができます!今回は左右均等でしたが、割合を変えてみたり、3カラム、4カラムなども設定できるので試してみてください!

デモサイト
Twenty Twenty Sample


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP