エブリサイトでは『ベースページ』を使用することで、複数のページで共通のヘッダーやメニューを持つページを作成できます。


コーポレートサイトのようなサイトを作成する場合、ヘッダーとフッターのように、全ページに共通のタイルを配置したい場合は、ベースページを使用すると便利です。


この記事では、ベースページの作成と利用手順をご紹介します。


ベースページの概要

今回は、会社ロゴや各ページへのリンクを含むヘッダーと、会社情報を表示するフッター部分のパネルをベースページとして作成し、中央のパネルをベースページを設定したページで編集可能なエリアに設定します。


ベースページの作成

ベースページは、ペースページタブの「新しいベースページを追加」ボタンで追加できます。


ペースページの作成は、ページと基本的に変わりません。


異なる点としては、ベースページには必ず、ページ側の画面デザインをセットできるタイルを設定する必要があります。(下記画像の赤枠で囲んだ、「B5」と書かれたタイル)


ベースページのページ側の画面デザインをセットできるタイルは、タイルの左上の丸(上の画面でいうと、「B5」となっている箇所)をクリックする事で、設定と設定解除を切り替えることができます。


また、このページ側の画面デザインをセットできるタイルの部分が、ベースページを設定したページで編集が可能なエリアになります。

今回は、ヘッダーとフッターに挟まれた真ん中のタイルをページ側の画面デザインをセットできるタイルに設定しました。


おすすめの設定

ヘッダー部分について、上下にスクロールしても画面上部に固定して表示する設定が可能です。

設定したい場合は、固定表示したいパネルの「レイアウト設定」を開き、「垂直位置」の「スクロール時に画面上端で止める」にチェックを入れてください。

ベースページを使用したページの作成

ページを生成する際に、作成したベースページを選択すると、ベースページを使用したページを作成できます。


ページの設定画面では、ベースページのパネルはデフォルトでは非表示になっています。

背景がピンクのパネルを編集して、各ページのデザインを設定してください。


画面右上の「ベースページのタイルも表示する」を選択すると、下記のようにベースページのパネルがグレーの背景で表示されます。

ベースページのパネルはページの設定画面では閲覧のみが可能です。編集したい場合は「ベースページに移動する」ボタンを押してベースページの編集画面で編集してください。


最後に

エブリサイトのドキュメントページサポートページもぜひご活用ください。