共通エリアと共通パーツ

複数のページをまたぎ同じコンテンツを表示できる機能

サイト内で共通しているエリアやパーツは以下の機能を使用して配置することができます。
一度編集を行えば全てのページの同じ部分に対してその変更が反映されるため、非常に効率的なツールだといえます。
名前や目的が似ているツールですが、それぞれ用途が異なりますので、十分に特徴を理解して使用してください。

1. 共通エリアとは?

サイト内で共通している基本的なエリアは「共通エリア」という機能を使って作られています。
エリア内のコンテンツを編集できるほか、このエリアを表示させるかさせないかをページごとに設定することもできます。
サイト構造図
共通エリアで構成されている部分
上の図の通り、共通ナビ・共通ヘッダー・共通サイドバー(左右)・共通フッターが「共通エリア」として作られており、それぞれ編集が可能です。

2. 共通パーツとは?

見出し・テキスト・イメージ・ボタンといったパーツの組み合わせパターン(または単体)を「共通パーツ」として登録し、複数のページに配置することができます。
全く同じコンテンツをいくつかのページに配置したい場合、この共通パーツを使用すると更新を効率的に行うことができるようになります。

共通パーツの使用例

 下層MVの「資料ダウンロード」のボタンと「詳しい資料はこちら」のテキスト
(使用するメリット)

  • ①ボタンのリンク先
    ②ボタンのテキスト
    ③イベント設定
    が共通しているボタンをいくつかのMV内に置くことになります。共通パーツを利用すると一度設定を行うだけで効率的に同じものを配置していくことができます。
  • ボタンの文言やリンク先が後から変更になった場合、対象の共通パーツを編集することによって、全ページに対しても更新を反映させることができます。

 

作業者が複数いる場合
  • 複数の共通エリア・共通パーツに対して同時に作業を行わないでください
    (同時に作業を行うと、作業内容が反映されない恐れがあります)

共通エリアについて

1. 共通エリアはどこから編集できる?

サイト > 共通エリア一覧 から各エリアを編集することができます。
また、ページ編集画面内でエリアを直接クリックすることもできます。

2. 共通エリアをページに設定する方法

編集した共通エリアは
サイト > ページ一覧 > (該当ページ をクリック) > 共通設定 から設定できます。
チェックを入れた状態でページ編集画面に入ると、選択した共通エリアが設定されていることが確認できます。

2.1 - 共通ナビ・ヘッダー・フッターを使用する場合

共通ナビ・ヘッダー・フッターを使用する場合、ページ編集画面内での設定をセットで行う必要があります。
設定 >  エリアの表示切り換え から以下の項目を必要に応じてONにします。
  • ナビゲーションを表示する
  • ヘッダーを表示する
  • フッターを表示する
  • パンくずリストを表示する
旧CMSの場合、
左メニュー >  このページの基本設定 > 表示設定 から必要に応じて項目をONにします。

2.2 - 共通サイドバー(左・右)を使用する場合

共通サイドバー(左・右)を使用する場合、ページ編集画面内での設定をセットで行う必要があります。
設定 >  コンテンツエリアの配置 から必要に応じてサイドバーがついているものを選択します。
旧CMSの場合も左メニュー >  レイアウト設定 > コンテンツエリア から同じように選択できます。
左から1カラム、2カラム(左サイドバー)、2カラム(右サイドバー)、3カラム(左右サイドバー)
共通エリアに関する注意事項
  • ページ設定画面で設定された共通エリアは、設定を外してもページ編集画面上に残ります
    上記の方法で共通エリアにチェックを入れた後に、ページ編集画面に一度でも入ると、設定された共通エリアのパーツの表示はそのまま残された状態になります。後からページ設定画面で共通エリアのチェックを外したとしても表示はそのまま残ります。
  • 一度設定した共通エリアを削除する場合は、ページ設定画面で共通エリアのチェックを外し、ページ編集画面上でパーツごと削除する必要があります
  • 設定を外してもパーツのデザインは残る仕様を利用して、デザインは同じでもテキストが異なる(共通化はさせていない状態)の組み込みを簡単に・効率的に行うこともできます
    (例:共通設定で共通エリアにチェックを入れる → ページ編集画面に入り出る → 共通エリアのチェックボックスを外し、残ったパーツを編集する)

共通パーツについて

1. 共通パーツはどこから編集できる?

サイト > 共通パーツ一覧 からあらかじめ用意されている、(もしくは自分で作成した)共通パーツを表示することができます。
カンプやWFをもとに、デフォルトで設定されているものを編集したり、新たに作成して使用してください。

2. 配置の仕方

ページ編集画面の 単体パーツ > 共通パーツ からパーツ配置し、「共通パーツ一覧」にあるものの中から選んで表示させることができます。
cta

共通パーツは他のパーツとHTML構造が違います

CSSの記述時に注意が必要です。詳細はこちらのページの3. CSSの記述時に注意が必要なcomponentパーツをご確認ください。

pagetop