新属性値を使った「かんたんデザイン編集」の実装方法3パターン

hayase

2025.06.24

機能紹介

新属性値を使った「かんたんデザイン編集」の実装方法3パターン

2025年6月19日に「かんたんデザイン編集機能を改善、シンプルな記述で実装できるようになりました」というニュースを発表しました。「かんたんデザイン編集」機能は、サイトの一部をノーコード編集領域として設定できるものです。

ノーコード編集領域を指定する記述方法として新たに追加したのは、次の3つです。

editor:button:selector（テンプレート側にボタンを設置する場所をセレクタで指定できる属性）を追加
editor:button:placement（テンプレート側にボタンを設置する場所を設定する属性）を追加
editor:type で "button" を、新たに指定できるようになった

従来の記述方法では、かんたんデザイン編集画面のプレビューエリアにある「編集ボタン（下のスクリーンショット画像左側にある鉛筆ボタン）」とサイドバーの「設定パネル（下のスクリーンショット画像右側の枠内）」の2カ所で編集可能な領域を指定をする場合、テンプレート内の2カ所にほぼ同じソースコードを記述する必要がありました。

今回追加した新属性値を使うと、テンプレート側は空もしくはボタン表示のみを指定し設定パネル側に詳細を記述する、といった分離した記述ができるようになりました。ノーコード対応領域の設定をより短いコードで実現できるようになり、テンプレートのメンテナンスもしやすくなります。
※なお、これまで通り2カ所に記述する方法も引き続き利用できます。

Stylish Corporate テーマのかんたんデザイン編集画面
Stylish Corporate テーマにおける「メイン画像」の記述例で設定方法をご紹介します

この活用ブログ記事では、これまでのやり方に加えて、editor:button:selector と editor:type="button" を使った新たな記述方法について、テーマ「StylishCorporate」のメイン画像（トップページ上部の背景にある大きな画像）の編集を例に詳しく解説していきます。

従来の記述方法：テンプレート・設定パネルの2カ所で重複した内容を指定

まず、従来の記述方法を紹介します。

メイン画像をノーコード編集可能にする際、プレビュー画面内の鉛筆ボタンと設定パネルの両方から画像を指定できるようにするには、テンプレート編集画面内のテンプレートと設定パネルの2カ所にソースコードを記述する必要がありました。

これまではこの両方の項目に、重複する内容のソースコードを記述していました。

テンプレート内

<$mt:Var
    name="asset_id"
    editor:type="image"
    editor:mode="editor"
    editor:update:selector=".jumbotron__indexImg"
    editor:update:attribute="style:backgroundImage"
    editor:label="メイン画像"
    editor:button:position="-270,5"
$>

設定パネル内

<$mt:Var
    name="asset_id"
    editor:type="image"
    editor:mode="editor"
    editor:update:selector=".jumbotron__indexImg"
    editor:update:attribute="style:backgroundImage"
    editor:label="メイン画像"
    editor:description="トップページのメイン画像を設定します。横長の画像がおすすめです。"
    editor:register="0"
$>

今後、編集ボタンと設定パネルで同じタイプのエディタを利用する場合は、後述する「新しい記述方法1」もしくは「2」の方法を利用する方がより短いコードで実装できます。

一方で、編集ボタンと設定パネルで異なるタイプのエディタを利用する場合（片方でテンプレート上で直接編集できる contenteditable を利用する場合）には、引き続き2カ所にそれぞれ記述が必要です。

新しい記述方法1：設定パネル側の記述のみで編集ボタンも表示

新たに追加した editor:button:selectorという属性値を使うと、テンプレートはそのまま（コードの追加不要）で設定パネル内の記述のみで、かんたんデザイン編集画面の編集ボタンと設定パネルの2カ所からノーコード編集できるよう指定できます。

editor:button:selector: テンプレート側にボタンを設置する場所をセレクタで指定することができます。指定がない場合 editor:update:selector で指定されている箇所に設置します。

この属性値を利用した記述方法を紹介します。

設定パネル内

<$mt:Var
    name="asset_id"
    editor:type="image"
    editor:mode="editor"
    editor:update:selector=".jumbotron__indexImg"
    editor:update:attribute="style:backgroundImage"
    editor:label="メイン画像"
    editor:description="トップページのメイン画像を設定します。横長の画像がおすすめです。" 
   editor:button:selector=".jumbotron__indexImg"
    editor:button:position="-270,5"
$>

設定パネル内の属性値設定のポイント

editor:register="0" を削除する　※editor:register のデフォルト値である 1 に設定される
editor:button:selector を追加する（今回は .jumbotron__indexImg という class を指定）
editor:button:position="-270,5" を追加する

かんたんデザイン編集対応を設定パネル側のコード追加だけで実現できるため、コードのメンテナンス性の観点からも新しい記述方法がオススメです。

新しい記述方法2：テンプレート側はボタンを呼び出すだけの短いコード＋設定パネル側で詳しく記述

同様の実装を行なうための、もうひとつの実装方法があります。新たに追加した属性 editor:type="button" を使う方法です。かんたんデザイン編集画面の任意の場所に編集ボタン（鉛筆マーク）を挿入したいけれど、セレクタだと指定できない場合などに利用できます。

テンプレート内にもコードを追加する必要がありますがボタンを呼び出す部分のみなので、従来の方法と比べてコードが短くなります。

テンプレート内

<$mt:Var
    name="asset_id"
    editor:type="button"
    editor:label="メイン画像"
    editor:button:position="-270,5"
$>

テンプレート内の属性値設定のポイント

name は設定パネルと同じにする
editor:type="button" にする
その他最低減の指定として、labelとposition（ボタンの位置）だけを記載する

設定パネル内

<$mt:Var
    name="asset_id"
    editor:type="image"
    editor:mode="editor"
    editor:update:selector=".jumbotron__indexImg"
    editor:update:attribute="style:backgroundImage"
    editor:label="メイン画像"
    editor:description="トップページのメイン画像を設定します。横長の画像がおすすめです。"
$>