JS CMSガイド / アセット

- カスタマイズ関連のファイル - UIエリアのHTMLカスタマイズ - UIエリアのCSSカスタマイズ

⽬次

制作者向けガイド

アセットディレクトリ構成

公開ページ

⼀般的にウェブサイトは、 共通エリアと、ページごとのエリアから構成されています

公開ページ

ヘッダやナビ、フッダなどのUIエリア

公開ページ

このエリアは、 HTMLとCSSのコードを、

直接記述しカスタマイズします

公開ページ

次に、ページごとのコンテンツエリアです

公開ページ

このエリアは、 管理画⾯のページ編集で

作成・編集します

公開ページ

このスライドでは、UIエリアのカスタマイズに重要な

アセットディレクトリについて説明します

カスタマイズ関連のファイル

カスタマイズ関連のファイル

サイトルート

images

index.html

sitemap.html

_cms

html

カスタマイズ関連のファイル

サイトルート

images

index.html

sitemap.html

_cms

html

カスタマイズに必要なファイルは、アセットディレクトリに配置されてます

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css site.css

parts

footer.html head.htmlheader_sp.htmlheader.html

アセットディレクトリの中で、カスタマイズに重要なファイルを

みていきます

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

このファイルが、UIエリアのカスタマイズに

必要なファイルです

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

_template直下のHTMLファイルは、テンプレHTMLと呼び、

ページのテンプレートになります。

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

初期状態では、複数のテンプレHTMLが⽤意されています

例えば、

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

デフォルト⽤

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

フルワイド⽤などです

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

各テンプレで共通のHTMLは、外部化しています

ｖ

カスタマイズ関連のファイル

html/_template/default.html

具体的に、テンプレHTMLを⾒てみましょう

ｖ

カスタマイズ関連のファイル

html/_template/default.html

HEADタグやヘッダエリアなどが主に外部化している部分で、

複数のテンプレHTMLで共有してます

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

外部化したファイルは、parts以下に配置されています

※parts以外でも問題ありません

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

これらテンプレHTMLを編集し、 ヘッダ、ナビ、フッダなどUIの⼤まかなHTMLを定義します。

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csscms.css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css

⼤まかなHTMLを定義したあとは、 具体的にコード記述していきますが、

複数の⽅法で記述・定義できます

UIエリアのHTMLカスタマイズ

UIエリアのカスタマイズ

UIエリアのカスタマイズヘッダエリアを例として

説明します

ｖ

テンプレHTML

UIエリアのカスタマイズ

まずは、このように⼤枠のヘッダのHTMLを記述したとしましょう

ｖ

テンプレHTML

UIエリアのカスタマイズ

次に、⾚枠部分のHTMLを記述しますが、JS CMSでは2つの⽅法があります

ｖ

テンプレHTML

UIエリアのカスタマイズ

⼀つ⽬は、シンプルに直接HTMLを記述する⽅法です

ｖ

テンプレHTML

UIエリアのカスタマイズ

凝ったデザインの場合など、⾃分できちんと定義したい場合は、

このように直接記述します

ｖ

テンプレHTML

UIエリアのカスタマイズ

2つ⽬は、Myタグを使う場合です

ｖ

テンプレHTML

UIエリアのカスタマイズ

Myタグ機能を使えば、管理画⾯上でブロックを使⽤して、HTMLを出⼒することができます

ｖ

管理画⾯テンプレHTML

UIエリアのカスタマイズ

Myタグの具体例を、みていきましょう

ｖ

管理画⾯テンプレHTML

UIエリアのカスタマイズ

{{HEADER}}というMyタグIDを記述した場合、管理画⾯で同名のMyタグを定義し、ブロックを配置しレイアウトします

ｖ

ｖ

管理画⾯テンプレHTML

公開ページのHTML

UIエリアのカスタマイズ

ページを公開したとき、Myタグは、HTMLに変換され、テンプレHTMLに出⼒されます

ｖ

ｖ

管理画⾯テンプレHTML

公開ページのHTML

UIエリアのカスタマイズ

これにより、⼿軽にUIエリアを作成することができます

UIエリアのカスタマイズこのようにヘッダエリアを

定義できました

UIエリアのカスタマイズ

次にナビゲーションを例として説明します

UIエリアのカスタマイズ

ヘッダは、すべてのページで共通の内容ですが、 ナビの場合は、そう簡単ではありません

UIエリアのカスタマイズ

ナビの場合、現在地表⽰や、

UIエリアのカスタマイズ

ナビの場合、現在地表⽰や、階層ごとに項⽬が変化します

UIエリアのカスタマイズこのように、基本構造は同じだけど、

ページごとに表⽰内容が違う場合があります。

UIエリアのカスタマイズこれは、複数のテンプレを作成し、

それぞれHTMLを⽤意すれば実現でしょう

UIエリアのカスタマイズしかし、JS CMSでは、もっと汎⽤的に

定義する⽅法があります

UIエリアのカスタマイズナビゲーションブロックという

特別なブロックがあります

UIエリアのカスタマイズプリセットから設定を選択し、

タグを調整するだけで設定できます

UIエリアのカスタマイズ

グローバルナビ、ローカルナビ、サイトマップまで、

ほぼすべてのメニュを定義できます。

UIエリアのカスタマイズ

Mｙタグや、ナビゲーションブロックの

具体的な使い⽅は、別ページで解説しています

UIエリアのCSSカスタマイズ

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css cms.css free.cms

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

css

parts

footer.html head.htmlheader_sp.htmlheader.html

site.css cms.css free.cms

次は、アセットディレクトリ内の CSSファイルについて説明します

カスタマイズ関連のファイル

html

_template

default.html full.html simple.htmlwide.html

csssite.css cms.css free.cms

parts

footer.html head.htmlheader_sp.htmlheader.html

アセットディレクトリでは、 いくつかCSSファイルが

⽤意されています

site.css

初期CSSファイルの役割

cms.css

free.css

管理画⾯ 公開ページ

css

3つとも、公開ページからロードされていますが、

それぞれ役割が違います。

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

UIエリア

free.css

css

site.cssは、UIエリアのCSS定義で、公開ページからのみロードされています

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

UIエリア

free.css

css

UIエリアのCSSは、基本的にこのファイルへ

記述してください

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

ブロック

free.css

ブロック

css

cms.cssは、各ブロック⽤のCSSで、管理画⾯と、公開ページ、

どちらからもロードされます

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

ブロック

free.css

ブロック

css

ブロックのプリセットCSSをカスタマイズする際、

編集してください

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

css

free.cssは、管理画⾯と、公開ページ、

どちらからもロードされます

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

css

汎⽤的な⽤途のCSSなので、UIエリアでも、ブロックでもないその他なCSSを記述してください

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

css注意点として、

ページ全体を定義するクラスをcms.cssや、free.cssに追加しないでください。

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

css例えば、body{color:red}をcms.cssに

追加した場合、管理画⾯でもロードされるので、

管理画⾯の⽂字が真っ⾚になるためです

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

css

この場合、管理画⾯でロードされない、site.cssへ追加するのが正解です

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

cssこのように、初期状態では、

3つのCSSファイルが⽤意されています。

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

cssこれらは、CMSの動作には必須ではなく、

サイトに応じて、⾃由にファイルの追加・編集・削除してください

site.css

初期CSSファイルの役割

cms.css

管理画⾯ 公開ページ

free.css

csscms.css や free.css のように、

管理画⾯でもロードさせる場合は、CMS設定ファイルで変更できます