JS CMSガイド / 埋込Myタグ

- Myタグブロック - Myタグブロック / リスト定義 - Myタグブロック / コンテナ定義 - グローバルなMyタグ - ローカルなMyタグと上書き - Myタグ使⽤例 - Myタグの注意点

⽬次

埋込みタグ

制作者向けガイド

{{Myタグ}}

Myタグは、⾃由に作成できる埋込みタグで、JS CMSをカスタマイズするにあたって、

⼀番重要な機能です。

Myタグは、ヘッダやメニューといった、サイトUIを定義し利⽤できるほか、

ページをまたいで利⽤する共通パーツの定義も⾏えます。

まずは、設定⽅法から紹介します。

Myタグブロック

管理画⾯ガジェットブロック

ガジェットブロックの設定

Myタグを定義するには、Myタグブロックをページに配置します。

Myタグブロックは、コンテナ定義と、リスト定義があります。


リスト定義は、テキストや、画像、ボタンを、

複数登録できます。


コンテナ定義は、コンテナを作成し、⽂書やイメージなどのブロックを、

内部に配置できます。


Myタグブロックリスト定義


はじめに、Myブロック / リスト定義を配置してみましょう。

通常のブロックと同様に、ページに配置されます。


次に、編集画⾯を開きます。


この画⾯で、Myタグを設定します。⼀度に複数のMyタグが設定できます。


このセルは、MyタグIDとなります。TESTと登録した場合、

{{TEST}}という表記で利⽤できます。ID名は、⽇本語でも問題ありません。


このセルは、出⼒される値を⼊⼒します。


ここでは、ページタグを埋め込むことができます


このセルは、メモ⽤です。出⼒には関係ないので、

設定したタグのついてのメモを⼊れてください。


追加・編集・削除⽅法は、その他のブロックでのグリッド編集と

まったく同様です。


テキスト以外に、イメージや、

テキスト以外に、イメージや、

ボタンも設定できます

以上が、Myブロック / リスト定義です



ちなみに、複数ブロックを追加し、おおまかな役割ごとに

管理することもできます。

Myタグブロックコンテナ定義

次は、Myブロック / コンテナ定義です。


ｖ

リスト定義とは違い、コンテナ定義では、ひとつのブロックにつき、

ひとつのMyタグを設定します。


ｖ

コンテナタイプは、⾚枠部分の内容が、Myタグの値になります。


MyタグIDと説明(メモ)は、このエリアで設定します。


コンテナブロック同様に、⽂書やイメージブロックなど、

ほぼすべてのブロックを、⾃由に配置できます。


⽂書ブロックのほかにも、イメージブロックや、


表組みブロックなど、基本ブロックはもちろん


HTMLブロックを配置すれば、直接HTMLコードを登録することができます。


単独のテキストや画像、ボタンの場合はリスト定義、それ以外は、コンテナ定義として、

使い分けしてください。

グローバルなMyタグ

Myタグブロックは、配置するページによって、動作が違ってきます。

サイト全体で有効なグローバルなMyタグと、定義したページのみで有効なローカルなMyタグ。

そして、グローバルなMyタグは、

ローカルなMyタグで上書きできます。

グローバルに設定する場合は、{{Myタグ設定}}ページに配置します。

管理画⾯ Myタグ設定ページ

このページは、グローバルなMyタグブロックを定義する

専⽤のページです。


Myタグブロック以外のブロックも配置できますが、Myタグの出⼒には影響しません。


{{Myタグ設定}}ページで定義したMyタグは、テンプレHTMLで利⽤できるほか、


各ページ編集の各ブロックにおいても、普通に利⽤出来ます。


以上が、グローバルなMyタグです。

ローカルなMyタグと上書き

管理画⾯ローカルなMyタグ

{{Myタグ設定}}ページ以外の、個々のページ編集で追加した

Myタグブロックは、


そのページ内でのみ有効です。ページ内で同じ要素が

繰り返される場合などに使えます


ローカルな設定の重要な機能として、グローバルな設定値の

上書き機能があります。

{{TITLE}}

グローバル

サイトタイトル

これは、グローバルなMyタグ例です

出⼒内容このページタイトル

{{TITLE}}

グローバル


{{TITLE}}

ローカル

このページタイトル

ページ編集で、Myタグブロックを配置し、同じIDで設定した場合は、

{{TITLE}}

グローバル


{{TITLE}}

ローカル

このページタイトル

出⼒内容このページタイトル

ローカルな値に、上書きされます。

これにより、サイト共通の値を定義しつつ、個々のページの任意の値にするといった、

柔軟な利⽤が可能です。

Myタグ使⽤例

Myタグは、とても汎⽤的な機能なので、さまざまな利⽤⽅があります。

具体的な使⽤例を⾒ていきます。

1.共通UIパーツヘッダやフッダなど、サイト内で

共通したUIパーツとして利⽤できます。

Myタグ使⽤例

UIパーツは、テンプレートにHTMLを直接コーディングしても、問題ありませんが、

イメージブロックやリンクリストなど、直感的に編集できます。

シンプルなグローバルメニューや、階層構造をもったローカルメニューで利⽤できます。

2.メニューMyタグ使⽤例

ナビゲーションブロックを利⽤すれば、ページごとに、メニューの現在地表⽰や、ローカルメニュの開閉などが⾏えます。

ナビゲーションブロックの詳細については、ナビゲーションブロックのガイドを確認してください。

サイト内で、いくつか共通して表⽰されるパーツを登録し、使⽤できます。

UIパーツは、テンプレート内に記述しますが、

個々のページ編集においても、Myタグを利⽤することができます。

3.共通パーツMyタグ使⽤例

ひながたブロックは、たとえば、商品紹介のように、

基本フォーマットは同じだけど、ページごとに値を変更したい場合に利⽤します。

4.ひながたブロックMyタグ使⽤例

Myタグの注意点

JS CMSは、静的にページを⽣成するので、グローバルなMyタグの設定を変更した場合、

そのタグを利⽤してるページは、すべて公開しなおす必要があります。

JS CMSガイド / 埋込Myタグ

Internet

Transcript of JS CMSガイド / 埋込Myタグ