JS CMSガイド / 埋込Myタグ

1. - Myタグブロック
- Myタグブロック / リスト定義
- Myタグブロック / コンテナ定義
- グローバルなMyタグ
- ローカルなMyタグと上書き
- Myタグ使⽤例
- Myタグの注意点
⽬次
埋込みタグ
制作者向けガイド
{{Myタグ}}

2. Myタグは、⾃由に作成できる埋込みタグで、
JS CMSをカスタマイズするにあたって、
⼀番重要な機能です。

3. Myタグは、ヘッダやメニューといった、
サイトUIを定義し利⽤できるほか、
ページをまたいで利⽤する
共通パーツの定義も⾏えます。

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

5. Myタグブロック

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

7. ガジェットブロックの設定
Myタグを定義するには、
Myタグブロックをページに配置します。

8. Myタグブロックは、コンテナ定義と、
リスト定義があります。
ガジェットブロックの設定

9. リスト定義は、
テキストや、画像、ボタンを、
複数登録できます。
ガジェットブロックの設定

10. コンテナ定義は、コンテナを作成し、
⽂書やイメージなどのブロックを、
内部に配置できます。
ガジェットブロックの設定

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

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

13. 通常のブロックと同様に、
ページに配置されます。
Myタグブロック リスト定義

14. 次に、編集画⾯を開きます。
Myタグブロック リスト定義

15. この画⾯で、Myタグを設定します。
⼀度に複数のMyタグが設定できます。
Myタグブロック リスト定義

16. このセルは、MyタグIDとなります。
TESTと登録した場合、
{{TEST}}という表記で利⽤できます。
ID名は、⽇本語でも問題ありません。
Myタグブロック リスト定義

17. このセルは、
出⼒される値を⼊⼒します。
Myタグブロック リスト定義

18. ここでは、ページタグを
埋め込むことができます
Myタグブロック リスト定義

19. このセルは、メモ⽤です。
出⼒には関係ないので、
設定したタグのついてのメモを⼊れてください。
Myタグブロック リスト定義

20. 追加・編集・削除⽅法は、
その他のブロックでのグリッド編集と
まったく同様です。
Myタグブロック リスト定義

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

22. テキスト以外に、イメージや、
ボタンも設定できます

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

24. Myタグブロック リスト定義
ちなみに、複数ブロックを追加し、
おおまかな役割ごとに
管理することもできます。

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

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

27. 次は、Myブロック / コンテナ定義です。
Myタグブロック リスト定義

28. ｖ
リスト定義とは違い、
コンテナ定義では、ひとつのブロックにつき、
ひとつのMyタグを設定します。
Myタグブロック リスト定義

29. ｖ
コンテナタイプは、⾚枠部分の内容が、
Myタグの値になります。
Myタグブロック リスト定義

30. MyタグIDと説明(メモ)は、
このエリアで設定します。
Myタグブロック リスト定義

31. コンテナブロック同様に、
⽂書やイメージブロックなど、
ほぼすべてのブロックを、
⾃由に配置できます。
Myタグブロック リスト定義

32. ⽂書ブロックのほかにも、
イメージブロックや、
Myタグブロック リスト定義

33. 表組みブロックなど、
基本ブロックはもちろん
Myタグブロック リスト定義

34. HTMLブロックを配置すれば、
直接HTMLコードを登録することができます。
Myタグブロック リスト定義

35. 単独のテキストや画像、ボタンの場合はリスト定義、
それ以外は、コンテナ定義として、
使い分けしてください。

36. グローバルなMyタグ

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

38. サイト全体で有効なグローバルなMyタグと、
定義したページのみで有効なローカルなMyタグ。
そして、グローバルなMyタグは、
ローカルなMyタグで上書きできます。

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

40. このページは、グローバルな
Myタグブロックを定義する
専⽤のページです。
管理画⾯ Myタグ設定ページ

41. Myタグブロック以外のブロックも配置できます
が、Myタグの出⼒には影響しません。
管理画⾯ Myタグ設定ページ

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

43. 各ページ編集の各ブロックにおいても、
普通に利⽤出来ます。
管理画⾯ Myタグ設定ページ

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

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

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

47. {{Myタグ設定}}ページ以外の、
個々のページ編集で追加した
Myタグブロックは、
管理画⾯ ローカルなMyタグ

48. そのページ内でのみ有効です。
ページ内で同じ要素が
繰り返される場合などに使えます
管理画⾯ ローカルなMyタグ

49. ローカルな設定の重要な機能として、
グローバルな設定値の
上書き機能があります。

50. {{TITLE}}
グローバル
サイトタイトル
これは、グローバルなMyタグ例です
出⼒内容 このページタイトル

51. {{TITLE}}
グローバル
サイトタイトル
{{TITLE}}
ローカル
このページタイトル
ページ編集で、
Myタグブロックを配置し、
同じIDで設定した場合は、

52. {{TITLE}}
グローバル
サイトタイトル
{{TITLE}}
ローカル
このページタイトル
出⼒内容 このページタイトル
ローカルな値に、上書きされます。

53. これにより、サイト共通の値を定義しつつ、
個々のページの任意の値にするといった、
柔軟な利⽤が可能です。

54. Myタグ使⽤例

55. Myタグは、とても汎⽤的な機能なので、
さまざまな利⽤⽅があります。
具体的な使⽤例を⾒ていきます。

56. 1.共通UIパーツ
ヘッダやフッダなど、サイト内で
共通したUIパーツとして利⽤できます。
Myタグ使⽤例

57. UIパーツは、テンプレートにHTMLを
直接コーディングしても、問題ありませんが、
イメージブロックやリンクリストなど、
直感的に編集できます。

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

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

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

61. サイト内で、いくつか共通して表⽰される
パーツを登録し、使⽤できます。
UIパーツは、テンプレート内に記述しますが、
個々のページ編集においても、
Myタグを利⽤することができます。
3.共通パーツ
Myタグ使⽤例

62. ひながたブロックは、
たとえば、商品紹介のように、
基本フォーマットは同じだけど、
ページごとに値を変更したい場合に利⽤します。
4.ひながたブロック
Myタグ使⽤例

63. Myタグの注意点

64. JS CMSは、静的にページを⽣成するので、
グローバルなMyタグの設定を変更した場合、
そのタグを利⽤してるページは、
すべて公開しなおす必要があります。