SMタグの書式と構成要素

SMタグはスマートモードでのパーツ情報を記述するためのもので、これを編集することによって既存のスマートモードブロックをカスタマイズしたり、オリジナルのブロックを作成したりすることができます。 ここでは、SMタグの書式とその構成要素を解説します。

SMタグの基本書式

SMタグは大きく分けて「コンテントタグ」と「入力フィールドタグ」の2種類に分けられます。

コンテントタグ

HTMLの<html>や<body>に相当するタグです。ブロック全体の設定を記述します。このタグの内側に記述するか外側に記述するかによって、その内容を表示するタブが変わります。

[SM:content:type=VALUE,title=VALUE,desc=VALUE]
ブロックのメイン要素(内側の内容は、「A」または「1」から始まるメインタブに表示されます)
[SM:content_end]
ブロックのオプション要素(外側の内容は、「オプション」タブに表示されます。メイン要素の前後どちらに表示されるかは、コンテントタグの前後どちらに記述したかによって決まります)

各属性(赤文字部分)の値(VALUE部分)の内容については、下記をご覧ください。なお、「title」「desc」属性は省略可能です。

属性 説明
type SINGLE タブ数が固定のブロックを作成する場合に使用します。「[SM:sep]」を記述すると、それ以降の内容が次のタブに表示されます。タブ名はアルファベットの大文字で、「A」から始まります(「Z」の次は「AA」となります)。
MULTI タブ数が可変のブロックを作成する場合に使用します。タブの〈複製〉〈削除〉ボタンが表示されるようになります。タブ名は数字で、「1」から始まります。
title 任意の文字列 ブロック名を記述します。
desc 任意の文字列 ブロックの説明文を記述します。

入力フィールドタグ

HTMLの<form>や<object>、<a>等に相当するタグです。ブロック内に配置する各パーツの設定を記述します。

[SM:tag:id=VALUE,type=VALUE,title=VALUE,desc=VALUE,hiddenable=VALUE]
DEFAULT_VALUE
[SM:tag_end]

各属性(赤文字部分)の値(VALUE部分)およびDEFAULT_VALUEの内容については、下記をご覧ください。なお、「title」「desc」「hiddenable」属性は省略可能です。

属性 説明
id 任意の文字列 タグのIDを記述します。同一ブロック内で重複することは許されません。
type INPUT 一行のテキスト入力フィールドを定義します。
TEXTAREA 複数行のテキスト入力フィールドを定義します。
RICHTEXT リッチテキスト形式のテキスト入力フィールドを定義します。
OBJECT 画像、SiGNパーツ、リンクパーツなど、上記3タイプ以外の全ての入力フィールドを定義します。パーツの種類は、DEFAULT_VALUEの部分に挿入したパーツによって決まります。
title 任意の文字列 パーツ名を記述します。
desc 任意の文字列 パーツの説明文を記述します。
hiddenable 1 or 空欄 パーツの表示/非表示を設定するための〈ON〉/〈OFF〉スイッチを表示するかどうかのフラグを記述します。「1」でスイッチが表示されます。この値を空欄にするか「hiddenable」属性自体を省略すると、スイッチは表示されません。
DEFAULT_VALUE 任意の文字列/パーツ 初期テキストを記述、または初期パーツを挿入します。

type=OBJECTの場合、パーツの種類を変更した後はidも変更しなければ、パーツの変更が反映されません。idは直前の状態から変更されていれば、過去に使用していたidを再使用しても構いません。

 

段落のスタイルとCSS詳細設定

「段落のスタイル」や「分割」、テキストの書式設定など、ブロックエディタの機能はそのまま使用できます。なお、「段落のスタイル」の種類はCSS詳細設定でのカテゴリーに対応します。つまり「本文」以外に対するCSS詳細設定を適用するには、該当箇所の「段落のスタイル」を適宜設定しておく必要があります。
段落のスタイルとCSS詳細設定

ブロックの画像パーツを設定する

ブロックエディタで、画像パーツをクリックし[1]、〈画像変更〉をクリックします[2]。
ブロックの画像パーツを設定する

画像選択のダイアログが表示されます。画像のフォルダを選択したら[1]、使用する画像パーツを選び[2]、[選択]をクリックします[3]。

ブロックの画像パーツを設定する-2
画像パーツが設定されました。
ブロックの画像パーツを設定する-3

スマートモードブロックの作成例

実際の作成例を下記画像で示します。あらかじめブロックレイアウトのオプションを〈2段〉に設定してあります。
なお、この例は構成要素を見せる目的で作成しており、あまり実用的ではありません。

・SMタグ編集モードのソースコード

SMタグ編集モードのソースコード

・スマートモードの〈A〉

スマートモードの〈A


・スマートモードの〈B〉

スマートモードの〈B〉

・スマートモードの〈オプション〉

スマートモードの〈オプション〉

・結果