WordPressのブロックエディタ、カラムの活用

wordpress

こんにちは。カヨです。
サイトを作っていると、出てくる用語の一つ、
「カラム」ですが、さてこれは、何のことでしょう??

カラムとは?

はい。の事です(*^^*)
wordpressの外観からテーマを検索する時、検索絞り込み条件の中で
レイアウトの所に1カラムという項目がありますよね(*^^*)
その下は、2列、3列、4列と続いておりますが、
それぞれ、2カラム、3カラム、4カラムと同じ事になります✊✨


ほいで、このwordpressでは、
ブロックエディタの
カラムというアイコンを選択する事で、
列のあるレイアウトを作っていく事ができます(*^^*)

まさにこの、左に画像右にテキストを表示させているのは、
カラムから2カラムを選択してレイアウトされています。

カラムという概念はレスポンシブ対応に必要

ところで、レスポンシブデザインって、聞いたことありますか?
これは、カラム落ちというwebのレイアウトの崩れをの特徴を利用した、
ブラウザのウィンドウの幅によってレイアウトが変わる
デザインになっています(*^^*)

上のレイアウトは、下の画像のようにウィンドウの幅によって、
右側に表示されていた部分が下に表示されるようになります。

↑↑ 下に表にされる

このおかげで、スマホで読みやすくなるんだね~(*^^*)

カラムは増やせるの?

さてさて、wordpressでカラムは増やせるのか?
はい。増やせます✨

カラムを選択すると、
左右の幅の割合が違うレイアウトや、3カラムまでなら
選べることが出来ます。
でも、カラムを増やしたい場合は右の設定から増やしていきます。


例えば、2カラムを選んだら、
カラムの間「黄色の丸」の辺りをクリックして、
右上の歯車のマークから設定を開けば、
カラムという項目が出てきます。
ここの数値を増やすことによって、簡単にカラムを増やせます(*^^*)


はい(*^^*)
こんな感じです♪

カラムの幅の設定は?

幅の変更も同様に、「設定」から変更する事が可能です。
今度はカラム同士の間じゃなく、
数値を入れたいカラムの上とか下の辺りをクリックすれば、
設定項目が表示されます。

入れ子まで出来ちゃうwordpressのカラム

wordpressの更に凄い所は、カラムが入れ子構造で設定する事が出来る事です✊✨
つまり、例えば2分割したカラムの片方に、更にカラムを設定する事が出来ちゃうんです。
下の画像は3カラムではなく、
左のカラムに更に、2カラムを設定しています。


カラムの入れ子を使えば、ちょっと複雑なレイアウト設定も
可能です✨

いかがでしょうか(*^^*)

以前勤めていた会社では、自社でCMSを販売しておりました。
その時、この、カラムの入れ子が出来る商品を作りたかったのですが、
複雑になるので断念した経緯があります。
あれから数年たつのですが、
wordpressでここまで出来るようになるなんて。。。感激です✨

ほんと、便利な機能ですね✨

タイトルとURLをコピーしました