HOME > ガイド > 制作者向けガイド > 一覧エリア

一覧エリア

CMSをカスタマイズしていくうえで、グループとページの理解はとても重要です。このページでは、グループとページについて、詳しく解説していきます。


グループとページについて

ページの基本的な役割

ページを追加し、コンテンツを編集。それを保存・公開すれば、HTMLページを公開できます。
これが、一番シンプルなページの使い方です。

この他に、作成したページの一覧の情報は、サイトのナビゲーションの情報としても利用できます。

グループを利用して、サイト構造を作成

CMS上で追加したページの一覧は、グループを利用して階層構造を組むことができます。この階層構造の情報は、公開サイト側でグローバルナビやローカルナビなどのナビゲーションに利用できます。

ページ公開時に、階層情報からナビゲーションが自動生成されるので、サイト管理者はナビゲーションの管理を意識することなく、コンテンツの管理に集中できます。
※もちろん、ナビゲーションを利用せず、テンプレHTMLに直接タグを書き込んで、ナビゲーションを作成しても、問題ありません。

公開サイトでのページとグループ

公開サイトでは、例えば以下のように、グローバルナビやローカルナビなどの階層構造の情報として利用されます。

ナビゲーションのカスタマイズ

グローバルナビや、ローカルナビなどは、デザインや、フォーマットなど、CMS上で自由にカスタマイズできます。
デザインをカスタマイズする場合は、CSSで行えます。フォーマットなどのカスタマイズや、新規でナビゲーションを作成する場合は、ナビゲーションブロックを使用して定義します。
詳しくは、ナビゲーションブロックのページで確認してください。

CMS上でのページとグループ

CMS上での表示

ページ

HTMLページです。自由に追加・編集削除ができます。ページをクリックすると、編集エリアで、コンテンツ部の編集が行えます。

グループ

グループを作成し、その中にページを追加すれば、第1階層、第2階層、第3階層...といったサイト内でのナビゲーション構造を作成できます。

グループには、ページのほかに、さらにサブグループを配置することにより、深い階層構造を作成できます。
※サブグループの中に、さらに、サブグループを配置することもできます。

ちょうど、WindowsやMacにおけるフォルダとファイルの関係のようなものですが、実際のOS上のディレクトリ構造と区別するため、CMS上での階層構造は、グループと呼んでいます。

なお、グループで定義するのは、サイトのナビゲーション上での階層構造であって、公開されるHTMLのディレクトリ構造は関係ありません。

公開されるHTMLのディレクトリについて

公開されるHTMLページのディレクトリについては、ページごとに設定できます。
サイトルート以下であれば、自由にディレクトリを作成し、指定することができます。

ただ、通常はデフォルトディレクトリ (/html/以下)に設定されているので、小規模サイトであれば、特に意識する必要はありません。

中規模サイトであれば、/company/ , /product/ など、コンテンツの内容に応じて、サイトルート以下にディレクトリを作成し、公開してください。
(もちろん、すべてデフォルトディレクトリに公開しても、問題ありません。)

一覧エリアでの操作

ページや、グループの管理は、主に一覧エリアで管理します。

一覧エリアの役割

一覧エリアの、並び順や、グループの階層は、そのままサイトのナビゲーション上での階層になります。

一覧エリアでできること
ページ、グループの追加 グループやページを、ページリストに追加できます。
メタ情報の編集 ページや、グループの、名称やIDなどといったメタ情報を編集できます。
並び替え グループやページの並び順を、ドラッグ&ドロップで並び替えできます。
階層化 ページや、グループを、ドラッグ&ドロップでグループ内へ配置することができます。
削除 ページ単位で削除したり、グループまるごと削除することができます。

一覧エリアの通常表示と、ワイド表示

一覧エリアは、ワイド表示にすることができ、グループやページ関連の追加の操作が行えます。

通常表示時の機能

グループの開閉や、並び替え、ページの追加ができます。

ワイド表示時の機能

ページやグループの追加ボタンや、まとめて設定・公開などを表示できます。

まとめて設定 ページ名やページIDなどをまとめて設定するウィンドウを開きます。
サイト全体をまとめて設定したり、グループ単位で設定したりできます。
まとめて公開 まとめてページを公開するときに便利なボタンです。
ナビゲーションリンクなどを更新したい場合などに、使います。
サイト全体をまとめて公開したり、グループ単位で公開したりできます。
ページごとに保存・公開 保存・公開は、通常は編集エリアでおこないますが、一覧からページごとに保存公開できます。
ページやグループの追加 ページやグループを追加できます。グループ内の先頭に追加したり、最後に追加したりできます。

ページ・グループの追加

以下のボタンから追加できます。リストの先頭か、最後かを選択できます。

ページ設定画面

ページ設定では、ページの名称やIDなどのメタ情報を設定できます。

ページ設定画面の表示方法

ページ設定画面

基本情報タブ


ページ名

入力した値は、公開ページのナビゲーションのラベル名で使用します。
ページ名では、簡単なHTMLタグも使用できます。改行を入れたい場合は、場合は<br>と入力してください。


ファイル名

●ディレクトリの選択
CMS上では、グループで階層管理しますが、その階層情報は、HTMLページが公開されるディレクトリ先とは関係ありません。ページごとに公開ページのディレクトリを指定する必要があります。
デフォルトでは/html/が選択されていますが、CMSルート以下の別のディレクトリを指定することもできます。

●ページIDの入力
ページIDは、公開されるHTMLページのファイル名として利用されるので、簡素で分かりやすい名前をつけてください。デフォルトでは、親グループのID+今日の日付+ランダムな英数字が指定されています。

ファイルIDを利用した、カスタマイズのアイデア

テンプレHTMLでの利用
ファイルIDは、CSS用のID名、クラス名として利用できます。
テンプレートHTMLに PAGE_ID と記述すれば、ページ公開時に、ページごとのファイルIDに置き換えられます。

例えば、bodyタグのid属性に使用すれば、共通のテンプレートHTMLを使いつつ、ページごとにCSSでページデザインをカスタマイズすることができます。

例:公開ページのファイルパスが、html/company.htmlの場合

↓ テンプレHTML
<body id="{-{PAGE_ID}-}">
↓ 公開ページ
<body id="company">

この場合、CSS側で以下のように記述すれば、このページだけカスタマイズできます。

body#company{
...CSSを記述
}

公開 / 非表示にする

チェックをいれると、公開サイトのナビゲーションに項目を表示しません。
ページが編集中のため、ページを公開したくない場合などに選択します。他のナビゲーションからもリンクされません。
ファイルを削除する代わりに、一時的に非表示にする場合などにも利用できます。
なお、非公開であっても、公開していれば、直接URLを指定すれば、表示されるので、注意してください。


公開 / メニューに表示しない

チェックをいれると、公開サイトのナビゲーションに項目を表示しません。
「非公開にする」と似ていますが、他のページからリンクされる事があります。

例えば、特定のグループやページは、UIには表示したくない場合など、細かいUIの調整に使います。
具体的には、グローバルナビで、グループを選択した場合、ローカルナビでは、グループの先頭のページをアクティブ表示しますが、そのページを表示したくない場合に使います。


公開 / 工事中にする

チェックをいれると、公開サイトのナビゲーションに項目を表示するが、リンクは設定しません。
工事中的な用途で仕様します。


外部URL

CMS管理外のページや、外部サイトにリンクを設定する場合に入力します。相対パスも利用できます。
ナビゲーションにボタンは表示したいが、別のページやサイトにリンクさせたい場合に利用します。

使用例

例:yahooへリンクする場合
http://www.yahoo.co.jp
例:別ウィンドウで表示(カンマで区切り、_blank指定)
http://www.yahoo.co.jp,_blank

強調表示

チェックを入れると、CMSのページ一覧において、強調マークを表示。
更新頻度が高いページや、重要なページなどに設定して、ページリストのなかで目立たせることができます。
強調表示を行っても、公開サイト側には影響ありません。

ブロクエントリー情報タブ

ブログ機能を利用するときに使用するタブです。現状は、ブログ機能は、実装途中の機能です。
入力した値は、ナビゲーションブロックで使用できます。
後日、ガイドを作成予定です。

追加情報タブ

ナビゲーションブロックで設定を行うときに、ページ名やページIDの他に、自由にページごとに値を設定できます。
設定した値は、ナビゲーションブロックの設定で使用でき、複雑なナビゲーション設定が行えます。
後日、ガイドを作成予定です。

グループ設定画面

グループ設定では、グループの名称やIDなどのメタ情報を設定できます。

グループ設定画面の表示

グループ設定画面


グループ名

入力した値は、公開ページのナビゲーション部分で、グループ名(階層名)として使用します。
グループ名では、簡単なHTMLタグも使用できます。改行を入れたい場合は、場合は<br>と入力してください。


グループID

グループIDは、主にCMS内部で利用する値で、初期作成時に、ランダムな値が割り振られます。

グループIDは、直接的には、サイトやページに影響しませんが、グループ内でページを新規追加した時に、ページ名称の元として利用されます。
なので、companyや、productなど、簡素な値を指定しましょう。

グループIDを利用した、カスタマイズのアイデア

HTMLぺージが、どのグループに属しているのかを、グループIDで特定できるので、共通のテンプレートHTMLを使いつつ、グループ(階層)ごとにデザイン(CSS)や動作(JS)をカスタマイズすることができます。

↓ テンプレHTML
<body class="gloup_{-{PAGE_GROUP_IDS}-}">
↓ 公開ページ
<body class="gloup_company">

「はじめに」ページは、現在「company」というIDのグループに属してるので、このように出力されます。

body.gloup_company{
...CSSを記述
}

所属するグループが、複数の場合は、以下のように書き出すことができます。

例:複数グループに所属している場合

↓ テンプレートHTML
<body class="gloup_{{PAGE_GROUP_IDS[0]}} gloup_{{PAGE_GROUP_IDS[1]}}">
↓ テンプレートHTML
<body class="gloup_company gloup_company_news">

このように、サブグループでカスタマイズする際のフックとして利用できます。


公開 / 非表示にする

チェックをいれると、公開サイトのナビゲーションに項目を表示しません。
ページが編集中のため、ページを公開したくない場合などに選択します。他のナビゲーションからもリンクされません。
ファイルを削除する代わりに、一時的に非表示にする場合などにも利用できます。
なお、非公開であっても、公開していれば、直接URLを指定すれば、表示されるので、注意してください。


公開 / メニューに表示しない

チェックをいれると、公開サイトのナビゲーションに項目を表示しません。
「非公開にする」と似ていますが、他のページからリンクされる事があります。

例えば、特定のグループやページは、UIには表示したくない場合など、細かいUIの調整に使います。
具体的には、グローバルナビで、グループを選択した場合、ローカルナビでは、グループの先頭のページをアクティブ表示しますが、そのページを表示したくない場合に使います。


公開 / 工事中にする

チェックをいれると、公開サイトのナビゲーションに項目を表示するが、リンクは設定しません。
工事中的な用途で仕様します。


外部URL

CMS管理外のページや、外部サイトにリンクを設定する場合に入力します。相対パスも利用できます。
ナビゲーションにボタンは表示したいが、別のページやサイトにリンクさせたい場合に利用します。

使用例

例:yahooへリンクする場合
http://www.yahoo.co.jp
例:別ウィンドウで表示(カンマで区切り、_blank指定)
http://www.yahoo.co.jp,_blank

強調表示

チェックを入れると、CMSのページ一覧において、強調マークを表示。
更新頻度が高いページや、重要なページなどに設定して、ページリストのなかで目立たせることができます。
強調表示を行っても、公開サイト側には影響ありません。

見出しについて

ページやグループ以外にも、見出しを追加することができます。
公開サイトのナビゲーションの表示を調整したい場合に利用します。

見出しの表示例

画面のように、ページやグループの一覧の中に、見出しとして、表示を追加できます。
HTMLを入力するので、見出し以外にも、IMGタグやAタグを直接記述して、バナー用の画像を表示したりと、汎用的に利用できます。

質問・問い合わせなどについて

不具合や不明点などあれば、ページ右下のチャットで聞いてもらうか、
開発者のピクセルイメージ田中 ( tanaka@pixelimage.jp ) にメール下さい。
CMSには未反映の不具合と対処方などもあるので、お気軽に質問いただければと思います。

使用した感想などあれば、TwitterやFacebookなどでシェアしてもらえるとうれしいです!
あと、JS CMS開発者日記のサイトもはじめました。こっちはユルめのサイトです。
ピクセルイメージ | JS CMSの導入、カスタマイズの依頼は...