段組み(カラム)を作りたい

文章が左から右に流れるのではなく、左右に個別にレイアウトする段組み(カラム)をしたい場合の説明です。

具体的には下のように、左と右で個別に文章が分かれて表示されます。

左側の文章です。
この文章は段組み(カラム)によってレイアウトされています。
もう少し文章を書いてみましょう。
もう少し。もう少し。

右側の文章です。
こちらも、段組み(カラム)によってレイアウトされています。

こちらは、文章だけでなく、画像も載せてみましょう。

この段組みは、スマートフォンのようなg面の横幅が狭いときは、横に並ぶのではなく縦に並び、文字が小さくなるのを防いでくれます。
試しにブラウザの横幅を狭くしてみてください。段組みが横並びから、縦になっているのがお分かりいただけると思います。

この段組みについてご説明します。

段組み(カラム)の追加

段組みをしたいところのブロックで、プラス記号をクリック。ブロック選択メニューを開きます。

開いたメニューの上部「検索」と書かれたところに「カラム」と入力します。

そうすると、カラムと書かれたアイコンが表示されます。これをクリックします。

そうすると、カラムのレイアウトを選ぶ画面が現れます。
この中から、設定したレイアウトを選択します。この説明では、日在から2番目の 50/50で2つの段組みになっているものを選択して説明します。

レイアウトを選択すると、段組みになっているレイアウトにブロックを追加する + 記号が表示されます。
ここにいつものようにブロックを追加していきます。

下の例のように、左側に画像、右にその説明という使い方も可能です。

この画像はその昔、1973年以来、画像処理を行う機器やソフトの性能を測定するために使用されていたテスト画像です。

レナという名前のこの女性。実はプレイボーイ(米国版)に掲載されていた画像の一部です。

アイディア次第で目をひくデザインに

カラムは、内容をそれぞれ上下方向の上端、中央、下端にそろえて配置することができます。

まず配置したカラム全体を選択します。
ちょっと選択にはコツがりますが、画像の「このあたりをクリック」と書いてあるところをクリックします。
全体が選択されると、カラムの外枠全体が青い線で囲まれます。

この状態で、左上にあるメニューの中から、高さ調節のアイコンをクリックします。
下の図のように、上揃え、中央揃え、下揃えから選ぶことができます。

下の例は、カラムを下揃えにした例です。

この画像はその昔、1973年以来、画像処理を行う機器やソフトの性能を測定するために使用されていたテスト画像です。

レナという名前のこの女性。実はプレイボーイ(米国版)に掲載されていた画像の一部です。

カラムの個数や色を変更できる

先ほど同様カラム全体を選択した状態で画面右のメニューを見ると、色と書かれたメニューとカラムと書かれたメニューがあります。

まずカラムの数を変える操作をしてみます。これはカラム 2 個で作成してみたものの、やはり3つにしたいというときに使用できます。
カラムと書かれている下のスライダーを動かすと、右側の数値が変わります。
その数値分だけカラムが増えます。

メニューでカラム数を3にしたので、あらたにもう一つカラムが作成されました。

カラムの色を変えるのも簡単です。

色メニューから、文字の色、背景色を変更できます。

メニューに表示されている色以外の色を使用したい場合は、カスタムカラーを選択してお好みの色を選択してください。

問題が解決しない場合、またはご要望などございましたら、
アトリエKW へお問い合わせください。

お問い合わせ先

TEL:070-8582-4877
受付時間: 9:00 - 20:00 (土日祝休み)

または、アトリエKW LINE 公式アカウントを友達登録してメッセージをお送りください。

友だち追加