テンプレートの任意の箇所をノーコードで編集できる「かんたんデザイン編集」機能を改善し、よりシンプルに実装できるようにしました。

新しいエディタタイプと属性値の追加で、テンプレートの記述がシンプルに

かんたんデザイン編集は、<mt:var> タグに editor:type モディファイアを適用することで、ページ内の任意の要素をかんたんデザイン編集画面上でノーコード編集可能にする機能です。

ノーコード編集の実装方法として、ページ内に配置した編集ボタンをクリックしてその要素を直接編集できるようにテンプレートに記述する方法と、画面の右側に表示される設定パネルを作成する方法の2つがあります。

これまで、編集ボタンによる直接編集と設定パネルからの編集の両方を可能にする場合、そのページのテンプレートと、その下にある設定パネルの両方にほぼ同じ内容を記述する必要があり、冗長になっていました。

そこで今回、editor:type で指定できるエディタのタイプに button を追加し、設定パネルに編集ボタンに関する属性を追加しておくことで、テンプレート側には editor:type="button" を記述するだけで、設定パネルにある設定項目を呼び出して編集ボタンとして設置できるようにしました。

次のいずれかの属性が設定パネルにある場合、テンプレート側に button エディタが呼び出され、編集ボタンを表示できます。

• editor:button:mode (beforeが設定されている場合のみ)
• editor:button:selector
• editor:button:position (0,0でない場合)
• editor:button:placement

editor:button:selector（テンプレート側にボタンを設置する場所をセレクタで指定できる属性）と editor:button:placement（テンプレート側にボタンを設置する場所を設定する属性）は、今回新しく追加した属性です。

editor:button:selector は、設定パネルにこれを設定しておくことで、テンプレート側のセレクタで指定した場所に editor:type="button" を配置できる属性です。これによって、テンプレート側には <mt:var> などの記述をしなくても編集ボタンを表示させることが可能になりました。

Stylish Corporate テーマにおける「メイン画像」の記述例

Stylish Corporate テーマのトップページのメイン画像（トップページ上部の背景にある大きな画像）を、かんたんデザイン機能で編集可能にするには、どのように記述するかを説明します。

これまでの記述方法も継続して使用できますが、新しく追加した editor:type の button と、editor:button:selector 属性を使って、よりシンプルな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：テンプレート側ではボタンを呼び出す記述のみに

テンプレート側（編集ボタン）

<$mt:Var name="asset_id" editor:type="button" 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="トップページのメイン画像を設定します。横長の画像がおすすめです。"$>

新しい記述方法２：設定パネルのみの記述で編集ボタンを表示させる

テンプレート側（編集ボタン）

なし（編集ボタンを表示させるための記述不要）

設定パネル側

<$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"$>

詳細はマニュアルをご覧ください。

かんたんデザイン編集仕様詳細 - マニュアル | MovableType.net

編集ボタンにツールチップでラベルを表示

editor:label に設定されたラベルを、編集ボタンにマウスオーバーしたときにツールチップとして表示するようにしました。

ツールチップは、自動的に適切な位置に表示されます。ソースコード上で表示位置の指定は不要です。

ノーコード編集を可能にすることで、サイト運用を格段に効率化できます。より実装しやすくなったかんたんデザイン編集機能を、ぜひご活用ください