01　見出しと本文で、記事の流れをつくる

使用クラス：entry_content_box、mt-2xl。罫線付き見出しは「縦積み」グループに置いています。グループごと複製すると、設定も引き継げます。

吉祥寺のまちを歩くと、ふと足を止めたくなる場所に出会います。いつもの通りに置かれたテーブルや、店先で交わされる会話。身近な風景から、まちの魅力を伝える記事を始めてみましょう。

記事の導入では、何について伝えるのかを短くまとめます。そのあとに写真や具体的な情報を添えると、読み手が内容を追いやすくなります。段落どうしの余白は自動で付きます。

小見出しは、話題が変わるところに

H2は28px、H3は24px、H4は20px。見出しそのものにはサイズ指定のクラスを付けず、記事全体でそろえて使えます。本文の基本サイズは18pxです。

補足する内容は、もう一段小さな見出しで

場所の特徴や取り組みの背景など、ひとつの話題を掘り下げるときに使います。見出しの前には mt-lg や mt-md で余白を付けられます。

02　写真とキャプションで、現場の様子を伝える

使用クラス：wide_max、caption、mt-2xs。写真と説明の間は8pxです。

画像にリンクを付けると、ホバー時に不透明度が0.5になります。この写真はクリックすると元画像が開くサンプルです。

03　写真と文章を並べる

カラムの使い方について
左右に画像と文章を並べたり、2列・3列にしたりする場合は、特に指定がなければグーテンベルク標準の「カラム」ブロックを使ってください。編集画面で見た目を確認しながら、配置や幅を調整できるため、編集がしやすくなります。

既存の col_box・col_2・col_3 などのクラスは引き続き使用できます。以下にクラスを使った例も残していますが、今後、新しく記事を作成・変更するときは、グーテンベルク標準のブロックを優先してください。

使用クラス：親に col_box、子に col_2 sp_col_1。外側のグループは「横並び」、ブロック間隔は0に設定しています。スマホでは縦に並び、2つ目には sp-mt-sm で余白を付けています。

グーテンベルク標準の左右2カラム

ここからは標準の「カラム」ブロックを使った例です。「カラム → 50 / 50」を選ぶと作れます。左右それぞれのカラムに、画像・見出し・段落などを自由に追加できます。

左に画像、右に文章

左に文章、右に画像

カラム間の余白は既存のスペース設定（medium：30px）、キャプションの上の余白は mt-2xs（8px）を使用しています。「モバイルでは縦に並べる」はオンにしています。

3つのポイントを並べる

使用クラス：col_box、col_3 sp_col_1、card-title。こちらも「横並び」グループを使用しています。

04　箇条書きと手順で、情報を整理する

使用クラス：箇条書きは list、番号付きは number。項目の間には mt-xs を使用しています。

伝えたいポイント

• 記事の最初に、伝えたいことを短くまとめる。
• 写真には、何が写っているかが分かる説明を添える。
• 最後に、関連するページや問い合わせ先を案内する。

記事を組み立てる順番

1. 導入文を書き、見出しで全体の流れを整理する。
2. 写真・リスト・表など、内容に合うパーツを配置する。
3. スマホでの見え方と、リンク先を確認する。

05　表と注意書きで、必要な情報をまとめる

表は既存の building_table の中に配置しています。本文や項目名は通常の表ブロックで編集できます。

使用クラス：notice_box、p-sm、text-base。内側に20pxの余白を付けています。

06　関連ページとお問い合わせにつなげる

通常のテキストリンクと、btn_link を付けたリンクを使い分けます。txt_c で中央に配置できます。

取り組みの背景については、まちづくり事業のページをご覧ください。こちらは通常のテキストリンクです。

お問い合わせ

ボタンはスマホでは横幅いっぱいになります。リンク先とボタンの文言は、ブロック内で変更できます。

07　よく使うクラスの早見表

余白は sm、md、lg などのレベルで指定します。上の余白は mt-、下は mb-、内側は p- です。

新しい記事では、必要なパーツだけを複製して使ってください。クラス名は各ブロックの「高度な設定」から確認できます。