このページでは、Webサイト機能の「コンポーネント」を使って各ページで共通する要素を保存し、すでに作成済みのページを例に別のページでも利用できる状態にする流れを説明しています。
🔰コンポーネントとは？
Webサイトを制作していると、ヘッダーやフッター、お問い合わせへの導線など、 複数のページで同じ内容を使いたい場面が出てきます。
同じ内容をページごとに作成すると、あとから修正するときにすべてのページを個別に更新しなければなりません。
Hirameki 7の「コンポーネント」を使うと、こうした共通パーツをひとつの部品として管理できます。
コンポーネントにしたいもの
コンポーネントは、複数のページで共通して使用し、あとからまとめて更新したい要素に向いています。
- サイト共通のヘッダー
- サイト共通のフッター
- お問い合わせへの導線
- 複数ページで共通して表示する案内
- キャンペーンや申し込みへの共通導線
| 比較項目 | お気に入り | コンポーネント |
|---|---|---|
| 主な目的 | 会社概要、サービス紹介、店舗・拠点ページなどよく使うパーツやセクションを保存し、あとで再利用する | 複数のページやテンプレートで使う共通部品を一元管理する |
| 配置したあとの扱い | 配置先では通常のパーツ・セクションとして扱う | コンポーネントとして配置され、共通部品との関係を保つ |
| 元の内容を変更したとき | すでに配置済みの内容をまとめて変更する用途ではない | コンポーネントを更新・公開することで、利用先へ変更を反映できる |
| 向いているもの | よく使うレイアウト、装飾ブロック、再利用したい部品 | ヘッダー、フッター、共通CTAなど、複数ページで同じ状態を保ちたい部品 |
| 選び方の目安 | 「同じ形をもう一度使いたい」 | 「同じものを使い続け、あとからまとめて直したい」 |
ポイント
「別のページでも同じものを使うか」「あとから一括で変更したいか」を基準にすると、 コンポーネント化する範囲を判断しやすくなります。
「お気に入り」と「コンポーネント」はどちらも一度作った内容を再利用するための機能ですが、使いどころが異なります。
大きな違いは、配置したあとも元の部品とのつながりを持たせておきたいかです。
既存ページのヘッダーをコンポーネント化する
🔻ページ編集画面で、ヘッダー内のパーツを選択し、階層を示す表示から「セクション」を選び、ヘッダー全体を操作対象にします。
🔻セクションの操作メニューからコンポーネント登録を選び、コンポーネント名を入力して登録します。
今回の例では、コンポーネント名を「ヘッダー」とします。
登録が完了すると、選択していたヘッダーがコンポーネントとして管理されます。
💡コンポーネント名は、あとから一覧を見たときに用途が分かる名前にしておくと管理しやすくなります。
「ヘッダー」「フッター」のように役割が明確な名前がおすすめです。
フッターもコンポーネント化する
ページ下部のフッターについても、ヘッダーと同じ手順でコンポーネント化します。
作成した「ヘッダー」「フッター」は、コンポーネント一覧から確認できます。
作成したコンポーネントを別ページで利用する
作成したコンポーネントは、別のページやテンプレートでも利用できます。
新しいページを作成するときに、ヘッダーやフッターを毎回作り直すのではなく、 コンポーネントとして登録済みのものを配置します。
これにより、ページごとの内容はそれぞれ作り分けながら、 サイト共通部分だけを同じ部品として管理できます。
コンポーネントは「共通する部品」を管理する機能です。
ページ全体の構成を共通化して、同じ構成のページを増やしたい場合は 「ページテンプレート」を利用します。
コンポーネントを編集し、反映を確認する
共通部分を変更したい場合は、配置先の各ページを個別に編集するのではなく、 コンポーネント一覧から対象のコンポーネントを開いて編集します。
たとえばヘッダーの案内文やリンクなどを変更し、コンポーネントを更新します。
更新後、コンポーネントを使用しているページを確認し、変更内容が反映されていることを確認します。
注意
コンポーネントの反映方法は、配置されている場所によって挙動が異なる場合があります。
特に、記事テンプレート内に配置したコンポーネントは、 通常のページに配置した場合と同じ感覚で運用すると、公開済みの記事へ変更が反映されない場合がありますのでご注意ください。
💡コンポーネントを使うと、複数ページで共通して使う部品をまとめて管理できます。
とくにヘッダーやフッターのように、サイト全体で共通して使う部分をコンポーネント化しておくと、 ページごとに同じ修正を繰り返す必要がなくなります。