コンテンツを横並びに配置できるカラムブロックの使い方(ブロックエディタ)

カラムブロックの配置

1. まずは、ブロックを追加をクリックします。

   

2. 「カラム」をクリックします。

   もし一覧に無い場合は「全て表示」をクリックしてください。

   

   

3. 配置したいカラムをクリックします。

   ブロックを追加した部分に、選択した横並び用のブロックグループが配置されます。

   

4. 配置したら、横並びのカラムの中の1つのカラムをクリック

   配置した横並びのカラムの中の1つのカラムをクリックすると以下の様な表示となります。この状態で右メニューのブロックをクリックします。続いて幅の単位(初期はpx)をクリックします。

   

   

   

5. 単位を「％」にします。

   

    

   何故「％」なのか

   ここで「％」を使う理由は以下の通りです。

   • 「％」が一番問題(体裁崩れ)が起こりにくい
   • pxは、そのコンテンツ幅のpxを知っている必要がある。また、レスポンシブに向いていない
   • それ以外の単位は、意味を理解している必要がある。また、ウェブサイトの仕様によって体裁崩れする場合がある。

6. 横並びのカラムの中の選択したカラムの幅を入力。全てのカラムで手順4～6を設定する。

   選択したカラムの幅を入力します。この時重要なのは、横並びのカラムの中の全てのカラムの幅の合計を100%以内にする事です。

   もし、合計値が100%を超えると一番右側のブロックが次の段に段ズレします。

   33/66、66/33、25/50/55　は予め数値が入っています。変更しても構いませんが合計100%以内を守ってください。

   50/50、33/33/33 はご自身で数値を入れてください。

    

   • 均等2分割の場合は、両方50%。
   • 均等3分割の場合は、全て33.3%。

    

   

    

7. 各ブロックに配置したいブロックを追加

   全てのカラムの幅を設定したら、各カラムにコンテンツを配置します。

   

   

   

レスポンシブ時のカラムブロックの見え方(当社の仕様)

当社制作のウェブサイトでカラムブロックを利用した場合、PC(画面幅が900px以上^※1の画面)ではそのまま横並びですが、それ以下の画面ではスマートフォンサイズとなりますので、カラムブロックに対してスマートフォン用の指定をしています。

※1 レスポンシブのブレイクポイントは制作時期によります。

※2 お客様によっては、異なる指定をしている場合もございます。

スマートフォンを縦にした時の横並びカラム

ほとんどのスマートフォンユーザーは、縦にして閲覧していると思われます。

この時、横並びカラムで配置したコンテンツは画面幅が狭いので横並びで表示される様にはしていません。

スマートフォンを横にした時の横並びカラム

スマートフォンを横にした時は、PCサイズ同様に横に並びます。