こんにちは。Kouです。今回はWordPressテーマTwentyTwentyで、以下の部分を作成したいと思います。
画像、見出し、段落が横並びで配置されていますね。この配置はどうやって設定するかというと、「カラム」というブロックを使っていきます。
「カラム」とは？
通常、TwentyTwentyのデフォルト設定だと、1カラムレイアウトです。（横が1列のレイアウトのこと。例えば画像や段落を配置しようとすると、2列3列と横に並べることができない。）それを、この「カラム」ブロックでレイアウトを2カラム、3カラムと変更することができます。上にある図は2カラムになります。
「カラム」ブロックを配置する
レイアウトを変更したい箇所に「カラム」ブロックを入れます。
すると、以下のような表示になります。ここでは、カラムの種類を簡易的に決定できます。今回は2列で左右均等にしたいので、「50/50」を選択します。
すると、下図のようになります。これで「カラム」ブロックの配置が完了しました。
「カラム」ブロックを配置した後は？
配置完了後は、それぞれのカラムに「見出し」や「段落」、「図」を配置していきましょう。ここからは、今までやってきたブロックエディタの編集方法と同じです。下の図は、片方にのみもろもろ配置してみたものです。
これを、プレビューで表示して確認すると以下のようになります。
横幅が狭いときの対処法
カラムを配置後、どうも幅が狭い場合があります。例えば下の図のような感じ。
この場合は、カラム全体のブロックを選択し、幅の設定を行います。まず、片方のカラムをクリックします。
上の図の状態で、ツールバーの左端のボタンにカーソルを当てます。すると、上に真ん中が白く塗られたカラムのマークが出ます。
このマークをクリックすると、カラム全体を選択できます。
この状態で、真ん中にあるマークにカーソルを当て、「幅広」を選択します。
これで横幅を広くできます。
おわりに
いかがでしたか？カラムは使い方によってはかなり動きのある見た目を作ることができます！今回は左右均等でしたが、割合を変えてみたり、3カラム、4カラムなども設定できるので試してみてください！
デモサイト
Twenty Twenty Sample
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
