スマートモードのオリジナルテンプレートを作る
ここでは、白紙の状態からSMタグを記述して、スマートモードのオリジナルテンプレートを作成する手順の一例を紹介します。
スマートモード用の標準のブロックテンプレートには、「タブ」「アコーディオン」レイアウトを使用したものがありませんので、これを作成してみましょう。各タブには、「大見出し」「画像パーツ」「本文」を配置します。
ブロックを新規作成する
任意の場所に新規ブロックを作成し、ブロックエディタで開きます。ブロックテンプレートでは何も選択せずに〈閉じる〉をクリックします。
白紙のブロックが作成されました。
コンテントタグを記述する
まずは最低限の要素であるコンテントタグを記述します。ここに限りませんが、「title」および「desc」属性の値はこの通りでなくても問題ありません。
タイトルを配置する
「type=INPUT」のSMタグを記述し、段落スタイルを〈タイトル〉に変更します。「タブ」「アコーディオン」レイアウトでは、段落スタイルの〈タイトル〉が、タブ名と各タブを分割する役割とを兼ねます。したがって〈タイトル〉の段落は必須の要素となりますので、「hiddenable」属性は省略し、非表示に出来ないようにしてください（〈タイトル〉を非表示にしても、タブ自体は非表示になりません）。
大見出しを配置する
「type=INPUT」のSMタグを記述し、上と同様に段落スタイルを〈大見出し〉に変更します。これは「タブ」「アコーディオン」レイアウトの書式には関係しませんが、CSS詳細設定を適用できるようにするためにも、適当な段落スタイルを設定しておいた方がよいでしょう。
画像パーツを配置する
「type=OBJECT」のSMタグを記述し、その間に画像パーツを挿入します。読み込む画像は何でも構いません。次に画像パーツをクリックし、「サイズ」を〈160 x 120〉に、「テキストの回り込み」を〈左寄せ〉に変更します。
画像パーツの配置が反映されない場合は、一度SMタグのidを変更して〈適用〉をクリックしてください。その後、元のidに戻しても問題はありません。
本文を配置する
画像パーツのSMタグの後に、改行を入れずに連続して「type=RICHTEXT」のSMタグを記述します。
ここで画像パーツのSMタグとの間に改行を入れると、本文の先頭に余分な改行が入ります。
ブロックレイアウトを変更する
ブロックエディタ上部の〈設定〉をクリックし［1］、「ブロックレイアウト」の〈タブ〉または〈アコーディオン〉を選択します。ここでは〈タブ〉を選択します［2］。オプションは任意に変更してください。ここでは〈左寄せ（クリック）〉に変更します［3］。
プレビューで確認する
スマートモードに切り替えて〈適用〉をクリックし、サイトエディタに戻って確認します。問題なければブロックエディタに戻ります。
テンプレートとして保存する
ブロックエディタで左下の〈ブロックテンプレート〉をクリックします。
開いた画面で〈ユーザ設定〉をクリックし、〈現在の設定を保存〉をクリックします。
〈テンプレート名〉と〈説明〉を入力し［1］、〈OK〉をクリックします［2］。
登録したテンプレートを使用する
新規ブロックなどでブロックテンプレートを開き、〈ユーザ設定〉をクリックして、保存したテンプレートを選択し〈適用〉をクリックします。
タブを増やす
ブロックエディタで〈複製〉アイコンをクリックすると［1］、タブを増やせます。ここでは4つ増やし、〈適用〉をクリックします［2］。
プレビューで確認する
再度プレビューを表示して、動作を確認します。
このテンプレートは「タブ」「アコーディオン」レイアウト兼用ですが、スマートモードではブロックレイアウトを変更できません。ブロックレイアウトを変更するには、一旦SMタグ編集モードに切り替えてレイアウトを変更し、スマートモードに戻してください。