レイアウトを設定する
二列や三列にする
基本的に、テキストや画像は端から端まで一列に配置されます。PC版でテキストや画像を二列、三列の複数の列（カラム）で配置したい場合は、「カラム」ブロックを使用します。
SP版は、基本的には上から下に配置されますが、「SP版表示時にカラム維持」を「維持する」に設定することで、PC版と同じカラム数にすることもできます。（但しどのパターンでも、左右均等幅で二列になります。）場面に応じて使い分けてください。
【カラムブロック使用時の注意】
一度カラムブロックを指定して内容を入力すると、後から1カラムに変更することはできません。
一列表示に戻す場合は、「カラム」ブロックを選択せずに、内容を入力し直してください。
※「リンクボタン」ブロックを列数指定する目的で、「カラム」ブロックは使用しません。
二列にする
二列で表示する場合は、レイアウトの種類を複数の中から選択できます。場面に応じて使い分けてください。
次の例はすべて、「SP版表示時にカラム維持」を「維持する」に設定しています。SP版では、どのパターンでも、左右均等幅で二列になります。
左右均等幅で二列にする
「レイアウト」オプションで、「1:1」を選択すると、左と右の列の幅が均等になります。
左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。
右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。
幅の狭い左右均等幅で二列にする
「レイアウト」オプションで、「1:1（幅狭）」を選択すると、一列の幅が3分の1サイズになった列を2つ表示します。
左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。
右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。
左列が狭くて右列が広い二列にする
「レイアウト」オプションで、「1:2」を選択すると、一列の幅が3分の1サイズになった列を左側に、3分の2サイズになった列を右側に表示します。
左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。
右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。
左列が広くて右列が狭い二列にする
「レイアウト」オプションで、「2:1」を選択すると、一列の幅が3分の2サイズになった列を左側に、3分の1サイズになった列を右側に表示します。
左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。
右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。
三列にする
三列にする場合は、「レイアウト」オプションで、「1:1:1」を選択し、さらに「ブロックを追加」欄の左上あたりをクリックして表示されるカラム数の「編集」を選択肢し、ラジオボタンで「3カラム」を選択します。次の例は、「SP版表示時にカラム維持」を「維持する」に設定しています。
左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。左のテキスト。
真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。真ん中のテキスト。
右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。右のテキスト。
選択すると内容が表示される見出しを配置する（アコーディオン）
「アコーディオン」ブロックを使用すると、画面上に見出しのみを表示し、選択すると内容が表示されるようにすることができます。ページが長くなる場合や、Q＆Aなどを表示する際に使用してください。
【注意事項】
アコーディオンに設定される見出しは「見出し3」となります。使用する際は、見出しの階層構造の順序に従って使用してください。
アクセシビリティ上、アコーディオンの中に、「見出し3」を設定しないでください。アコーディオンの中に、見出しを設定する場合は、「見出し4」と「見出し5」のみ使用可能です。
見出し4
内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。
見出し5
内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。内容テキスト。
「アコーディオン開閉ボタン」ブロック
複数のアコーディオンを並べて配置する際、「アコーディオン開閉ボタン」ブロックを使用すると、ページ内のすべてのアコーディオンの開閉動作を同時に行うことができます。「アコーディオン開閉ボタン」は、すべてのアコーディオンの一番上に配置するようにしてください。
【注意事項】
「アコーディオン開閉ボタン」ブロックは、1ページに1つのみ配置可能です。2つ以上配置した場合、最初のボタン以外は、動作しません。
内容を枠で囲む
「囲み枠」ブロックを使用すると、テキストや画像を囲み枠の中に表示します。本文の文字量が多い場合など、視覚的に差別化したい場合に使用します。
【注意事項】
アクセシビリティ上、囲み枠があるなしに関わらず、見出しの順序は一定にしてください。
例えば、囲み枠の外に「見出し3」を配置してその下に、囲み枠を配置した場合、囲み枠の中の見出しは、「見出し4」からはじまります。
一度「囲み枠」ブロックを指定して内容を入力すると、後から「囲み枠」のみを削除することはできません。「囲み枠」を表示しない場合は、「囲み枠」ブロックを選択せずに、内容を入力し直してください。
囲み枠の例1（見出し3が囲み枠の中にある場合）
見出し4
本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。
囲み枠の例2（見出し3が囲み枠の外にある場合）
見出し4
本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。
内容を区切る
「罫線」ブロックを使用すると、罫線を表示します。基本的に罫線は、テキストの内容を区切る場合にのみ使用してください。
【注意事項】
アクセシビリティ上の観点から、見た目のデザインで線を表示する目的のみで使用しないでください。
「罫線」ブロックは、ページ読み上げソフトでは、「区切り」と読み上げられます。
「罫線」ブロックの使用例
本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。
本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。本文テキスト。
レイアウトの参考例
イベント告知の表示例
- 日程
-
◯月◯日（◯曜）
- 時間
-
00時から
- 概要
-
〇〇〇〇〇〇〇〇〇〇〇〇
Q&Aの表示例
質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。
質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。
質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。
記者会見の表示例
見出し3をタイトルに設定した場合の表示例です。