第3章 ページの構造を知る（ブロックとパーツ）
ここでは、まず実際の編集画面を開いて全体の見た目を確認したあと、その画面が「どんな部品でできているか」を説明します。 このしくみがわかると、あとの編集がぐっと楽になります。
まず編集画面を開いてみよう
左側のメニュー（Pages）から、編集したいページの名前をクリックします。 すると、そのページの編集画面が開きます。
編集画面の構成
編集画面は、上から次のようになっています。
| 場所 | 内容 |
|---|---|
| 一番上（ヘッダー） | ページ名・状態バッジ・操作ボタン（保存・プレビュー・反映など） |
| 中央 | このページに積まれたブロックの一覧。ここで編集します |
| 設定パネル | ページのタイトルやURLなどの設定 |
状態バッジの意味
ページ名のとなりに、今の状態を示すバッジが表示されます。
| バッジ | 意味 |
|---|---|
| 公開中（緑） | 実際のサイトに公開されている状態 |
| 下書き（グレー） | まだ公開していない、作業中の状態 |
| 未反映（オレンジ） | 編集したけれど、まだ実際のサイトに反映していない状態 |
「未反映」が出ているときは、編集内容がまだ本番サイトに出ていません。あとで説明する「ページに反映」で反映します。
ワンポイント 実際に文字や画像を書きかえる操作は 👉 4. ページを編集する でくわしく説明します。ここでは、まず編集画面の中央に「箱のようなもの」が並んでいることを覚えておいてください。
3つの言葉を覚えよう
さきほど開いた編集画面の中央には、箱のようなものが積み重なっていましたね。 FineCMSのページは、大きく 3つの部品 を組み合わせてできています。
| 部品 | イメージ | 役割 |
|---|---|---|
| ページ | 1枚の紙 | ホームページの1画面（例：トップ、会社案内） |
| ブロック | 大きな箱 | ページの中に上から積み重ねる「区切り」（さきほどの画面の中央に並んでいたものです） |
| パーツ | 箱の中の部品 | 文章・画像・ボタンなど、実際の中身 |
言いかえると――
ページという紙の上に、ブロックという箱を上から順番に積んでいき、 それぞれの箱の中に パーツという中身を入れていく。
これがFineCMSのページの作り方です。
ブロック＝大きな箱
ブロック は、ページを横に区切る「大きな箱」です。 ページは、このブロックを上から下へ積み重ねてできています。
┌─────────────────────────┐
│ ブロック①（ヘッダー） │
├─────────────────────────┤
│ ブロック②（メインビジュアル）│
├─────────────────────────┤
│ ブロック③（サービス紹介） │
├─────────────────────────┤
│ ブロック④（フッター） │
└─────────────────────────┘
ブロックにはいくつか種類がある
箱にもいろいろな形があります。おもなものは次のとおりです。
| 種類 | どんな箱か |
|---|---|
| 通常 | いちばん基本の箱。中のパーツを縦に積みます |
| 全幅 | 左右いっぱいに広がる箱。メインビジュアルなど迫力を出したいときに |
| カラム（段組み） | 中を2〜5列に分けて、パーツを横に並べる箱 |
| 左／右 | ページの脇に置くサイドバー用の箱 |
| ヘッダー／フッター | ページの一番上・一番下に置く、ロゴやメニュー・会社情報などの箱 |
| ヒーロー | ページ冒頭の大きなメインビジュアル専用の箱。キャッチコピーやボタンを重ねられます |
| 記事一覧 | 「お知らせ」「ブログ」などの記事を一覧表示する専用の箱 |
| カテゴリ一覧 | 記事のカテゴリ（分類）を一覧表示する専用の箱 |
| フォーム | お問い合わせフォームなどを設置する専用の箱 |
ワンポイント 「ヒーロー」「記事一覧」「カテゴリ一覧」「フォーム」の箱は、中にパーツを入れるのではなく、箱そのものに専用の設定をして使います。くわしい使い方は、それぞれ関連する章（7. お知らせ・ブログを書く、9. フォームを作る）でご案内します。
ブロックには設定がある（ブロック設定）
箱（ブロック）にはそれぞれ 「ブロック設定」 という設定があり、見た目などをカスタマイズできます。 ※ブロック設定は歯車アイコンをクリックすると開きます。 代表的な設定が 背景色 です。箱ごとに背景色をつけられるので、例えば「サービス紹介の箱だけ薄い色をつけて目立たせる」といった使い方ができます。
ワンポイント ブロック設定のくわしい操作方法は 👉 4. ページを編集する の「ブロックの設定（背景色など）」でご案内します。
パーツ＝箱の中の部品
パーツ は、ブロック（箱）の中に入れる「中身」です。 文章や画像など、ページに表示される実際のコンテンツはすべてパーツです。
パーツにはいろいろな型（レイアウトの形）があります。たとえば――
| パーツの例 | どんな中身か |
|---|---|
| テキストのみ | 文章だけを表示する |
| 画像のみ | 画像だけを表示する |
| テキスト＋画像 | 文章と画像を上下に並べる |
| 画像左・テキスト右 | 画像を左、文章を右に並べる |
| メニュー／ロゴ | ヘッダーの中で使うナビゲーションやロゴ |
| スライダー | 複数の画像を切りかえて表示する（バナーやギャラリーに便利） |
| 完全HTML | 外部サービスの地図・動画などのコードを貼り付けて表示する |
ワンポイント パーツは「型（形）」が決まっているだけで、中に入れる文章や画像は自由に差しかえられます。 同じ「テキスト＋画像」パーツでも、入れる内容しだいで見た目はまったく変わります。
パーツは必ずブロックの中に入る
大事なルールがひとつあります。
パーツは、かならずブロック（箱）の中に入れて使います。 パーツを直接ページに置くことはできません。
「まず箱（ブロック）を置く → その中に部品（パーツ）を入れる」という順番になります。 このルールのおかげで、レイアウトがくずれにくく、あとから並べ替えるのも簡単になっています。
左右に分けるレイアウト（3カラム）
「左（サイドバー）」や「右（サイドバー）」の箱を置くと、 ページが3つの列（左・中央・右）に分かれるレイアウトになります。
┌──────┬───────────────┬──────┐
│ 左 │ 中央（本文） │ 右 │
│ メニュー│ │ 広告 │
└──────┴───────────────┴──────┘
ブログの記事ページなどで、本文の脇にメニューや関連情報を置きたいときに便利です。
全ページで共通の箱（共通ブロック）
ヘッダーやフッターのように「どのページでも同じもの」は、 共通ブロック というしくみで全ページに共有できます。
- 共通ブロックを 1か所直すだけで、それを使っている全ページにいっぺんに反映 されます。
- 例：フッターの電話番号を変えたいとき、1回直せば全ページが更新されます。
ワンポイント 最初はそのページ専用として作ったブロックも、あとから 「共通ブロックにする」 ことができます（設定方法は 👉 4. ページを編集する の「ブロックの設定」）。中身はそのまま引き継がれるので、「同じ内容を複数ページで使い回したくなった」ときに作り直す必要はありません。
まとめ
- まずは 編集画面 を開いて、中央にブロックが並んでいる様子を確認する
- ページは ブロック（箱） を上から積んでできている
- ブロックの中に パーツ（部品） を入れて中身を作る
- パーツはかならずブロックの中に入れる
- ヘッダー・フッターは 共通ブロックで全ページ共通にできる
この「箱と部品」のイメージを持っておけば、次の「ページを編集する」がスムーズに進みます。
← 目次にもどる ／ 次は 👉 4. ページを編集する