MovableType.net 活用ブログ

アカウントのログインで多要素認証を利用する方法

2026-03-10T02:00:00Z

MovableType.net の管理画面にログイン（サインイン）する際に、多要素認証を利用できるようになりました。本記事では、多要素認証の設定・利用方法について紹介します。

サポートしている認証アプリ

多要素認証を利用するにはTOTP（時間ベースのワンタイムパスワード）に対応した認証コードの生成アプリケーション (認証アプリ) が必要です。

次の認証コード生成アプリで動作を確認しています。他にも、TOTP規格に準拠した任意のアプリやデバイスを利用できます。

Google Authenticator （ iOS版 / Android版）
Microsoft Authenticator （ iOS版 / Android版）
Twilio Authy （ iOS版 / Android版）
2FA Authenticator (2FAS) （ iOS版 / Android版）
1Password

設定方法

管理画面にログイン後、右上にある人のシルエットのアイコンをクリックし [アカウント] ページへ移動
左メニューから [多要素認証] を選択し、認証デバイスの [設定する] をクリック
管理画面に表示されるQRコードを、認証アプリ等で読み込んで登録
認証アプリに表示された6桁の認証コードを、管理画面に登録
登録完了後に表示される、リカバリーコードを任意の場所に保管する

リカバリーコードの保存

認証コードの登録が完了すると、認証アプリが利用できないときのためのリカバリーコードを表示します。ダウンロードして、任意の場所に保管してください。

設定完了例

Google Authenticator で設定を行った例です。MovableType.net にログインするための6桁の認証コードが表示されます。

Google Authenticator アプリで設定した例

利用方法

ログイン画面で、メールアドレスとパスワードを入力し、[サインイン] を押します。

次に認証コードの入力欄が表示されるので、認証アプリに表示された6桁のコードを入力して [サインイン] を押すとログインできます。

Google / Microsoft 365 のOAuth認証を利用してフォームの自動返信メールのFROMアドレスを設定する方法

2026-02-17T02:00:00Z

MovableType.net のフォーム機能もしくは、単体サービス MovableType.net フォームでは、フォーム送信者に送られる自動返信メールのFromのメールアドレスを独自のものに変更することができます。

これまではSMTP設定を行うことで、Fromのメールアドレス変更が可能でした。これに加えて、Microsoft 365 アカウントならびに Google アカウントの OAuth 認証で、Fromを変更できるよう機能強化を行いました。お持ちの Microsoft もしくは、Google アカウントのメールアドレスを、From に指定できるようになります。

設定は、管理画面から該当のフォームの基本設定に移動し、自動返信メール項目内のメール送信設定から行ないます。

Microsoft 365 アカウントもしくは Google アカウントの OAuth 認証を使った設定方法を解説します。

Microsoft 365 アカウントを設定する方法

メール送信設定で Microsoft 365アカウント (OAuth) を選択して、設定画面最下部の [保存] ボタンで保存します。

次に Microsoft アカウントの認証を実行するというリンクが表示されるのでクリックします。

Microsoft アカウントにサインインすると、要求されているアクセス許可の画面が表示されるので承諾ボタンを押します。

承諾後に戻ってくる MovableType.net の管理画面で、アカウント連携の連携済みアカウントが表示されていれば連携設定が完了です。そのアカウント情報（名前とメールアドレス）が自動返信メールのFromのメールアドレスになります。

アカウント連携に記載されている物と異なるアドレスを指定する場合は、Fromアドレスにメールアドレスを入力する必要があります。ただし、事前に Microsoft 365 のFromアドレスの所有者側で設定を行い、代理人として送信するアクセス許可を連携アカウントに与える必要があります。

設定は Exchange 管理センターの設定のメールボックスから行います。詳しくは Microsoft のドキュメントをご覧ください。

Google アカウントを設定する方法

メール送信設定で Google アカウント (OAuth) を選択して、設定画面最下部の [保存] ボタンで保存します。

次に Google アカウントの認証を実行するというリンクが表示されるのでクリックします。

設定したいアカウントでサインインすると「Google は、あなたに関する情報へのアクセスを MovableType.net フォームに許可します」の画面が表示されるので [次へ] のボタンを押します。

続いて「ユーザー本人に代わってメールを送信」の [許可] を押します。

許可後に戻ってくる MovableType.net の管理画面で、アカウント連携の連携済みアカウントが表示されていれば連携設定が完了です。そのアカウント情報（名前とメールアドレス）が自動返信メールのFromのメールアドレスになります。

アカウントのメールアドレスと異なる送信元を設定する場合には、Fromアドレスにメールアドレスを入力する必要があります。この場合は、事前に Gmail のアカウントに他のメールアドレスを追加しておく必要があります。

設定は Gmail の設定のアカウントページにあります。詳しくは Google のドキュメントをご覧ください。

フォームの自動返信メールのFromを Google / Microsoft 365 で OAuth 認証し独自のメールアドレスに設定する方法でした。ぜひご活用ください！

MovableType.net は 11 周年を迎えました

2026-02-05T02:00:00Z

いつも MovableType.net ならびに、ファミリー製品である MovableType.net フォーム、MovableType.net サイトサーチをご利用いただき、誠にありがとうございます！

1年前、2025年2月5日の10周年の時には、たくさんのお客様やパートナーの皆さまから、応援のメッセージをいただきました。本当にありがとうございました。そのお言葉を胸に、さらなる進化を目指してさまざまな機能強化に取り組み、本日11周年を迎えました。

ここで、直近1年間のアップデートと改善を振り返ってみたいと思います。

直近1年の主な機能強化と改善

MovableType.net（CMS）

MovableType.net フォーム

MovableType.net サイトサーチ

この1年は、特に「かんたんデザイン編集」と「フォーム」の機能強化に注力してきました。これらの中には、皆様からいただいたフィードバックをもとに実現したものも多くあります。「こんな機能が欲しい！」といったご要望がございましたら、ぜひお気軽にサポートまでお寄せください。

プラン体系の変更と料金改定のお知らせ

改めてのご案内となりますが、2026年4月1日より、各サービスのプラン体系変更および料金改定を実施いたします。

今回の改定によりお客様にはご負担をおかけしますが、何卒ご理解いただけますようお願い申し上げます。

新しいプラン体系では、ビジネスプラン以上において「必要な機能を必要な分だけ」オプションで購入いただけるようになります。「プラン全体をアップグレードするほどではないけれど、フォームの数だけ少し増やしたい」といった場合でも、柔軟に対応が可能になります。

12周年に向けて、今後も皆様のサイトの安定運用と成長に貢献できるよう、チーム一同邁進してまいります。引き続き、MovableType.net ファミリーをよろしくお願いいたします！

【お知らせ：Zoom 相談室を開催中！】 毎週水曜17時より「MovableType.net ファミリー Zoom 相談室」を開催しています。「ソフトウェア版から MovableType.net へ効率よく引っ越すには？」といった具体的な手順から、導入前のざっくりとしたご相談まで幅広くお受けしています。ぜひお気軽にご参加ください！

フォーム項目名などを、他の言語で表示するための設定方法

2025-09-12T02:00:00Z

MovableType.net のフォーム機能では、フォーム項目名やメッセージを任意の言語に設定することで多言語に対応したフォームを作成できます。

※ 一部変更できないメッセージがあります。日本語以外の言語でフォームを運用する場合は、フォームの [基本設定] > [使用言語] から英語に設定することをおすすめします。

この記事では、中国語（繁体字）のフォーム作成方法を解説します。

中国語（繁体字）のフォーム設定例

フォーム項目名

フォーム項目名は、項目名の文字列を変更することでカスタマイズできます。同様にプレースホルダー、補足説明文も任意の言語に設定できます。

フォーム項目名に中国語（繁体字）のテキストを設定

送信・確認ボタン

フォーム送信時の確認ボタンと送信ボタンの文言は、フォームの基本設定の確認ボタンの文言と送信ボタンの文言項目から変更することができます。

確認・送信ボタンの文言も任意のテキストに変更可能

必須ラベルや表示されるメッセージの変更

[必須] ラベルを、CSSで中国語に変更

必須項目に表示されるラベルや戻るボタンの文言は、CSSで書き換えることができます。
※CSSによる文言の書き換えは、アクセシビリティの観点から推奨されません。どうしても変更が必要な場合にのみご利用ください。

フォーム用CSSに例えば次のように記述します。contentの部分をそれぞれの言語で指定してください。

.badge-required{
  font-size: 0;
}
.badge-required:before{
  font-size: 14px;
content:"必填";
}

.button-back{
  font-size: 0;
}
.button-back:before{
  font-size: 14px;
content:"返回";
}

フォーム用CSSについてはマニュアルをご覧ください。

フォームの見た目を編集する - マニュアル | MovableType.net

エラーメッセージについて

ブラウザが返す標準的なエラーメッセージは、フォームを閲覧しているブラウザやOSの言語設定によって表示されます（ブラウザやOSの言語設定が英語であれば英語のメッセージが表示されます）。

使用言語とアラート表示の言語について

MovableType.net の固有の機能のエラーメッセージの場合は、カスタムスクリプトで変更することが可能です。詳しくはマニュアルをご覧ください。

フォームのカスタムスクリプト（バリデーション処理の仕様）

受付完了時のメッセージ

受付完了時にメッセージを表示する場合は、基本設定の受付完了時の動作のメッセージで指定できます。

受付完了時のメッセージを中国語で指定

通知メールと自動返信メール

フォーム送信後に、指定したフォーム管理者送られる通知メールと、フォーム送信者への控えとなる自動返信メールのテキストもカスタマイズ可能です。

通知メールの件名や本文を設定

自動返信メールの件名や本文を設定

件名・本文・フッターに任意のテキストを記述できます。入力内容を表示するに設定した場合、本文下に指定した項目名とユーザーが入力した内容がそのまま表示されます。

なお、通知メール内に表示される「送信日時：2025.09.10 17:21:58」の部分はカスタマイズできません。

本記事では中国語（繁体字）を例に説明していますが、基本的な手順はどの言語でも同じです。

これらの方法を活用し、他の言語に対応したフォームを作成してみてください。

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

2025-06-24T02:00:00Z

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

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

editor:register="0" を削除する　※editor:register のデフォルト値である 1 に設定される

この他にも、表示場所の調整のための editor:button:placement という属性値も追加しました。詳しくはマニュアルも合わせてご覧ください。

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

プレビュー環境のページでGA4等のタグを読み込まないようにするための preview 変数活用方法

2025-05-27T02:00:00Z

※2025/06/26 追記：preview 変数は、ステージング環境は対象外だったため、記事を書き換えました。

ウェブサイト内の全てのページに GA4（Google Analytics）のタグを埋め込んでいるけれども、関係者だけが見るプレビューページでは動作させたくないこと、あると思います。

そんな時には preview 変数を使うと、特定のコードをプレビュー環境でのみ出力する／出力しない、といった制御が可能です。この変数は条件分岐タグ（MT:If、MT:Unless）と組み合わせて利用します。

<mt:if name="preview">〜</mt:if>: このように記述すると、プレビュー環境でのみタグの内部のコードが実行されます。つまり、プレビュー時だけに特定の要素やメッセージを表示したい場合に使用します。
<mt:unless name="preview">〜</mt:unless>: こちらは、プレビュー環境以外（＝本番環境）でのみ内部のコードが実行されます。これは例えば、アクセス解析タグなど、プレビュー時には実行せず本番環境だけで動作させたいコードや表示に適しています。

実装例：プレビューページでは、GA4 のコードを読み込まない

<mt:unless name="preview"> を使って、GA4 のコードを読み込まないようにするためのコードサンプルを示します。

<mt:unless name="preview">
  <mt:include module="google_analytics">
</mt:unless>

この <mt:unless name="preview"> タグ内のコードはプレビューページでは出力されません。つまり、上記のコードでは、モジュールテンプレート "google_analytics" 内に記載されているGA4タグは、プレビューページには埋め込まれません。

本番環境のみ34行目に埋め込みコードがあり、プレビューページの34行目は空行

GA4 以外にもA/Bテストやアクセス解析ツール、チャットウィジェットなどプレビューページでは動作不要なタグはまとめて、この中に入れてしまうと便利です。

GTM 利用者へのヒント

複数のタグを埋め込む際に、GTM（Google Tag Manager）を利用しているケースも多いかと思います。プレビュー環境で、GTM で埋め込んでいる全てのタグを発火しなくて良い場合には、GTM の埋め込みコードを <mt:unless name="preview"> に入れてしまうのが最も簡単です。

埋め込みタグごとにプレビュー系ページで発火させるかどうかを制御したい場合には、GTM のトラッカーを使ってタグごとの発火タイミングを調整ください。設定方法の詳細は、GTM の利用方法を参照ください。

まとめ

preview 変数を使うと、プレビュー環境下でのコードの埋め込みを制御することが可能です。これにより、関係者のアクセスやテストのデータが混入するのを防ぎ、より正確な分析を行うことができます。

MTタグを活用することで、さまざまな制御が可能なので、ぜひ使いこなしてみてください。制作者向けの情報は「MovableType.net 制作者向けポータル」をご参照ください。

MovableType.net 制作者向けポータル

テーマ開発を基礎から学べるチュートリアル的なコンテンツ「トフでもできる！？MovableType.net テーマ開発」を、2025年5月15日にアップデートしました。こちらも合わせてご覧ください！

テーマ開発を基礎から学べるウェブサイト・PDF・冊子を全面改訂！「トフでもできる！？MovableType.net テーマ開発」 - MovableType.net 活用ブログ

テーマ開発を基礎から学べるウェブサイト・PDF・冊子を全面改訂！「トフでもできる！？MovableType.net テーマ開発」

2025-05-15T02:11:00Z

はじめまして！デザインチームのさとうです。
今年1月に入社し、現在はウェブサイトの更新やイラストの作成などを担当しています。

本日5月15日、MovableType.net を使って、ウェブサイトを構築する人に役立つコンテンツ「トフでもできる！？MovableType.net テーマ開発」の大幅改訂を行ないました👏
ウェブ版・PDF版・冊子版がすべて最新版の情報になりました！

「トフでもできる！？MovableType.net テーマ開発」とは？

トフでもできる！？MovableType.net テーマ開発

「トフでもできる！？MovableType.net テーマ開発」（以下、トフできテーマ開発）とは、MovableType.net のテーマ開発を学べる学習コンテンツです。シックス・アパートのキャラクター「トフ」が、皆さまの案内役としてお供します。

この「トフでもできる！？MovableType.net テーマ開発」は、MovableType.net でウェブサイトを構築したい制作者の最初の一歩に最適なコンテンツです。
MovableType.net ではHTMLやCSSに加え、「MTタグ」を使って自由なデザインのウェブサイトを作ることができます。これを読みながら手を動かせば、MovableType.net でのウェブサイト制作の基本が一通り理解できます。

「トフできテーマ開発」は「知識編」と「実践編」のふたつの構成でできています。

まず「知識編」で MovableType.net のテーマ制作の流れや仕組みを学び、次の「実践編」ではサンプルサイトを例に各要素を実装するためのコードを詳しく解説していきます。

「トフできテーマ開発」の内容が一通りできるようになったら、あとは制作者向けポータルにあるマニュアルやタグリスト、MTタグ逆引き辞典などを参照していけば、思い通りのウェブサイトが作れるようになります！

トフといっしょにサンプルサイトを作っていきます！

それでは、今回の主な改訂内容をご紹介します！

説明文を更新し、スクリーンショットを一新しました

これまでもたくさんの方にご活用いただいてきた「トフできテーマ開発」ですが、親しみやすさとわかりやすさはそのままに、コンテンツ全体を見直しました。

説明文の追加更新、誤字脱字の修正に加えて、スクリーンショット画像も一新しています。2025年5月時点の MovableType.net の画面になっているので、迷わずスムーズに学習することができます。

画像のサイズも大きくなって見やすくなりました。

サンプルサイトを更新しました

「トフできテーマ開発」では、テーマを作成していくうえでの完成目標となるサンプルサイトを用意しています。このサンプルサイトのコード内容を更新しました。

ヘッダーのロゴ画像も刷新しています。

サンプルコードを見直しました

サンプルサイトの更新に伴い、掲載されているサンプルコードの見直し、および修正を行ないました。
以前よりも効率の良い記述になっていますので、以前学習したことのある方もぜひ内容を確認してみてくださいね。

本文テキストが読みやすくなりました

（※こちらはPDF版、冊子版のみの改訂です。）

今回の改訂に合わせて、PDF版、冊子版の本文テキストに「UDフォント」を採用しました。
適度な太さと視認性の高いデザインにより、可読性が向上しました。

どこで手に入れられるの？

「トフでもできる！？MovableType.net テーマ開発」は3種類の形式で公開しています。

ウェブ版

下記のリンクからアクセスすることができます。
PDF版、冊子版には掲載されていない解説や、サンプルサイトなどを確認することができます。

ウェブ版「トフでもできる！？MovableType.net テーマ開発」

PDF版

下記のリンク、もしくはウェブ版の最下部にあるダウンロードボタンから入手できます。
冊子版と同じ内容が掲載されています。

PDF版「トフでもできる！？MovableType.net テーマ開発」をダウンロード

冊子版

各地で開催されるオフラインセミナーやイベントブースなどで配布しています。

トフ「わーい、冊子が新しくなったよ〜！」

トフ「ふむふむ、なるほど」

ここまで、主な改訂内容についてご紹介してきました。

よりわかりやすくなった「トフでもできる！？MovableType.net テーマ開発」を活用して、ぜひテーマ開発をはじめてみてくださいね！

トフといっしょにテーマ開発について学びましょう♪

チェックボックスで選択できる上限数を指定する【MovableType.net フォーム】

2025-05-12T01:00:00Z

はじめまして！デザイナーのさいとうです。
今回初めて活用ブログを書かせていただきます🙌

お問い合わせやアンケートのフォームで「該当する項目を、3つ選択してください」と、選択できる個数の上限を指定したい時、あると思います。

CMSサービス「MovableType.net」のフォーム機能ならびに、フォームサービス「MovableType.net フォーム」では、複数アイテムを選択できるチェックボックスを利用できます。

この記事では、そのチェックボックスで選択できるアイテムの最大数を指定するためのカスタマイズ方法についてご紹介します！

この方法を使えば、もしユーザーが上限数以上に選択したとしても、アラートのメッセージが表示されるので安心です😌

さっそくやっていきましょう✊

window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("validator", {
  id: "foo",
  validator: function(value) {
    if (value.length < 1) {
      return "1つ以上選択してください";
    }
    if (value.length > 3) {
      return "選択できる項目は最大3つまでです";
    }
  },
});

テンプレートの名前は フォーム選択数の上限指定、出力ファイルは form_multiple_selection_limiter.js などにしておきましょう

カスタムスクリプト用のテンプレートを作成

再度、先ほど作成したフォームの管理画面に戻り [項目変更] タブの中にある、チェックボックスの項目を開き [項目名] の内容をコピーします。

フォーム [項目変更] 画面のチェックボックスの [項目名] をコピー

フォーム用のカスタムスクリプトの4行目のidにある、fooをコピーした内容に書き換えます。
このスクリーンショットの例で言えば、id = 今回の作品でよかった点を選択してください（最大3つまで）になります。

9行目のif (value.length > 3)の3を変更すると、選択できる上限数を設定できます。

コード10行目のreturnに書かれている選択できる項目は最大3つまでですの3の部分も必ず同じ数字に変えてください。アラート時に表示されるメッセージになります。

id の値や選択上限数、アラートメッセージを書き換え

書き換えが完了したら [公開] または [更新] を押します。

4. カスタムスクリプトのテンプレートを読み込ませる

最後に、設定したバリデーションの設定を、作成したフォームに反映させる作業を行います。

フォームを設置したページのテンプレートを開きます。

今回はウェブページに設置したので、ウェブページのアーカイブ・テンプレートを開きます。

<head> 内に、下記のコードを貼り付けます。

<script src="<mt:BlogURL>form_multiple_selection_limiter.js" defer></script>

ウェブページのテンプレートに、今回作ったカスタムスクリプトのjsを埋め込む

form_multiple_selection_limiter.jsと書かれている箇所は、カスタムスクリプトのテンプレートで設定した [出力ファイル] 名を記載してください。

このコードを埋め込むことで、カスタムスクリプトのテンプレートの内容とフォームを紐づけることができます。

貼り付けが完了したら、[更新] を押します。

これで、チェックボックスで選択できる項目の数が制限されているはずです！

5. 正常に動くか動作確認する

さっそくウェブページを更新し、動作確認してみましょう！

指定した数より多く選択して送信すると、アラートメッセージが表示され、送信できない状態になればカスタマイズ成功です！

4項目チェックして送信したら「最大3つまで」のアラートが表示されました

この方法でフォームのチェックボックスの選択数に上限を設けることができます。ぜひお試し下さい！

かんたんデザイン編集の新機能「画像のリストタイプ」を使ったスライドショーの実装例

2025-04-10T02:00:00Z

サイトの一部をノーコード編集領域として設定できる「かんたんデザイン編集」機能のアップデートです。リストタイプ編集の選択肢として、画像とファイルが利用できるようになりました。

これまで、editor:resource:type ではウェブページ（page）と記事（entry）の２種類が利用可能でした。今回、新たに画像（image）とファイル（file）を指定できるようになりました。

この記事では、新機能を利用してスライドショーに並べる画像をノーコードで指定できるように実装する方法を紹介します。

かんたんデザイン編集機能については、マニュアルもあわせてご覧ください。

設定パネル側の記述

まずは、かんたんデザイン編集画面の右側に表示される設定パネルに、スライドショーに表示する画像を指定できるようにする記述を追加しましょう。

設定パネルの画像選択項目

次のソースコードを、テンプレート内の設定パネル欄に記述します。

<$mt:Var 
 name="image_ids"
 editor:type="list"
 editor:resource:type="image"
 editor:label="スライドショー画像"
 editor:description="スライドショーに表示したい画像を指定します。"
 editor:update:selector=".swiper-slide"
 editor:register="0"
 editor:update:fetch="1"
$>

editor:type="list" で editor:resource:type="image" と指定します。

テンプレート内への記述

テンプレート内に記述するソースコードです。

<$mt:Var
  name="image_ids"
  editor:type="list"
  editor:resource:type="image"
  editor:label="スライドショー画像"
  editor:description="スライドショーに表示したい画像を指定します。"
  editor:update:selector=".swiper-slide"
  editor:button:position="13,0"
  editor:update:fetch="1"
$>

<div class="swiper-wrapper">
  <mt:Assets ids="$image_ids">
  <div class="swiper-slide">
    <img src="<$mt:AssetURL$>">
  </div>
   </mt:Assets>
</div>

こちらも editor:type="list" を設定し editor:resource:type="image" を指定するのがポイントです。

選択した画像の id が mt:Var で変数として保存され、mt:Assets タグで指定して呼び出す実装になっています。

※ このサンプルコードはかんたんデザイン編集の実装例です。実際にスライドショー形式で表示するためには、スライドショー用のCSSの実装が必要になります。

かんたんデザイン編集画面に戻り、スライドショー部分に表示される編集ボタンを押すと画像を選択できるリストボックスが表示されます。スライドショーに表示する画像を選択し、順番を入れ換えることができます。

リストウィンドウ

その他の活用例

この他にも、PDFファイル埋め込み用のかんたんデザイン機能を用意しておけば、ウェブ制作チームに依頼せずとも現場のメンバーがすぐに切り替えられるようになります。

かんたんデザイン編集機能の新機能、ぜひご活用ください！

SaaS型本格CMS「MovableType.net」祝10周年！特設サイトを公開しました

2025-02-05T02:00:00Z

こんにちは！プロダクトマネージャーの早瀬です。

いつも MovableType.net をご利用いただきありがとうございます！

本日2025年2月5日は、MovableType.net が正式公開されてからちょうど10周年となります！！

リリース当初は非常にシンプルな機能のみのサービスでしたが、毎年多くの新機能の追加・機能強化を行い、現在は高機能なウェブサービス型CMSと胸を張って言えるようになりました。

ここまで進化し10年目を迎えられたのは、全てご利用いただいているユーザーの皆様、パートナーの皆様のおかげです！

皆様からいただいたご要望などのフィードバックも、新機能開発に活かしています。

10周年を迎えるにあたって、これまでの機能強化の歩みを振り返る特設サイトを公開しました。サービスをご利用いただいている皆様から集まったメッセージも掲載しています。送っていただいた方、ありがとうございます！

ぜひ、特設サイトをご覧ください。

MovableType.net 10周年特設サイト

これからも次の10年に向けて頑張っていきますので、引き続き MovabeleType.net をよろしくお願いいたします！

こんにちは！エンジニアのjunです。
去る2024年10月1日、MovableType.net 用の新テーマ「Fusion Corporate」を公開しました🎉

Fusion Corporate

この「Fusion Corporate」は、デザイン性と更新性のfusion（融合）を目指して制作されたテーマです。
更新性（更新しやすさ）の肝となるのが、6月に公開した「かんたんデザイン編集機能」です！

この機能のおかげで、メインページなどのデザイン要素を、運用担当者が自らコードを触らず編集できるのです。
いわばノーコード的な機能をアドオンできる便利機能がかんたんデザイン編集です。この機能の使い方の詳細は、次の2つのリンク先をご覧下さい。

かんたんデザイン編集仕様詳細

かんたんデザイン編集コンポーネント利用例

さて、「Fusion Corporate」ではかんたんデザイン編集機能を、どの場所でどのように組み込んでいるのでしょうか？
この記事は Fusion Corporate のような汎用的なテーマを作りたい人向けに、テーマ実装方法を解説する3回連載記事の最終回。

「既存のテーマをかんたんデザイン編集に対応させたい！」「テーマをイチから作ってみたい！」
そんな時の参考になれば嬉しいです。

CSS編
かんたんデザイン編集編
MTテンプレート編　← 今回はココ！

MTテンプレート編、スタートです！！

テンプレートの種類

MovableType.net には、以下の4種類のテンプレートがあります。
なお、サーバーにインストールして利用する Movable Type の場合は、もういくつかの種類があります。

種類	用途	例
1. インデックス・テンプレート	1つのテンプレートから、1つのページ作成	メインページ
2. アーカイブ・テンプレート	1つのテンプレートから、複数のページを作成	記事ページ、カテゴリ別記事一覧ページ
3. テンプレート・モジュール	単体ではページを作成しない。共通のパーツを登録し、必要な場所で読み込む	ヘッダー、フッター
4. システムテンプレート		記事の編集管理画面CSS

今回の Fusion Corporate では、計17のテンプレートを利用しています。
駆け足にはなりますが、まるっとすべて解説していきます！

インデックス・テンプレートb

まずはインデックス・テンプレート。

インデックス・テンプレートは計4つです。
HTMLファイルの出力に2つ、CSSファイルの出力に2つ利用しています。

余談ですが、MTの大きな特徴として、出力ファイルの形式を柔軟に設定できる点があります。HTMLはもちろん、今回のようにCSSも出力可能です。「JSON形式で記事一覧を出力して、アプリと連動させる」などの応用も簡単です。ぜひ、ご活用を！

メインページ

メインページのテンプレートです。
「トップページ」や「ホームページ」などと呼ばれることもあるかもしれませんが、サイトのメインになるページのテンプレートです。まあ、、、そのままですね。。。

メインなだけあって、もっとも多くかんたんデザイン編集に対応しているテンプレートです。かんたんデザイン編集については前回の記事で詳細に解説しているので、合わせてご覧ください。

エンジニアが解説！新テーマ「Fusion Corporate」制作のポイント（テーマ作成者向け）② かんたんデザイン編集編

このテンプレートには、少しマニアックな点があります。
それは、<h1>タグの扱いです。

<h1>には、.visually-hiddenというクラスがついています。これは Bootstrap の標準クラスで、「人間の目には見えてほしくないが、機械には読み取ってほしい」際に使うクラスです。そう、SEOやアクセシビリティへの対策なのです。

例えば記事ページであれば、タイトルを<h1>にするのが自然です。
一方、メインページはどうでしょうか。デザイン上、<h1>に相当する要素がない場合も多いのではないかと思います。

解決策として、共通ヘッダーのロゴを <h1>にするのも一案です。
ただ、その場合、先の記事タイトルも<h1>のため、メインページ以外では<h1>が複数存在してしまいます。さらに、「そもそもロゴは見出しではないのでは？🤔」となんだかモヤモヤした気持ちになります。

そのような場合には .visually-hiddenを利用して、デザイン上はないかのように扱うのがオススメです。マニアックながら、意外とテッパンな対応なので活用がオススメです！

記事一覧

記事の一覧を、新着順に表示するテンプレートです。記事が10件以上ある場合は2ページ、3ページ...と分割されますが、テンプレートは同じです。

実際のコードです。

<mt:Ignore>==================================================
Output
==================================================</mt:Ignore>
<$mt:Include module="記事リスト"$>

4行！
最初の3行はコメントなので、実質1行！

後述の「カテゴリ別記事一覧テンプレート」とデザインが共通のため、さらに後述の「記事リスト」モジュールにまとめているのです。

とういうわけで、詳細は後ほど。

theme.css

今度はCSSです。

Fusion Corporate では Boostrap@5.3.3 と独自スタイルを併用していますが、その独自スタイルを記述するテンプレートになります。SCSSなどではなく、純粋なCSSです。

CSSの詳細や、Bootstrap とテーマ独自スタイルの線引きについては、本シリーズの第1回に譲りたいと思います。

エンジニアが解説！新テーマ「Fusion Corporate」制作のポイント（テーマ作成者向け）① CSS編

bootstrap.css

インデックス・テンプレートの最後は、 Bootstrap のカスタマイズCSSです。

Bootstrap のコアはassets/vendor/bootstrap.min.cssに配置しています。
このカスタマイズファイルはassets/css/bootstrap.cssです。

詳細については、やはりシリーズ第1回をご覧下さい。

アーカイブ・テンプレート

記事

記事詳細ページのテンプレートです。

非常にシンプルなテンプレートになっていますが、メインページと同様に.visually-hiddenが登場します。
記事の公開日に添えるように「記事の公開日」、記事のカテゴリに添えるように「記事のカテゴリ」と記述しています。これもやはり、SEOやアクセシビリティへの対応です。AIの台頭などもあり、機械読み取りを意識しておいて損はないだろうと考えています。

ウェブページ

ウェブページのテンプレートです。

記事テンプレートよりもさらにシンプルになっています。記事テンプレートを見て迷われた場合は、ウェブページを基準に、見比べていただくと良いかもしれません。

カテゴリ一覧

カテゴリ別記事一覧テンプレートです。

先ほどの記事一覧テンプレートと同様、4行、実質1行になります。

詳細は、後ほど。

テンプレート・モジュール

直接出力されるわけではないけれど、サイト内で繰り返し利用されるパーツをまとめたテンプレートです。
これらもテンプレートではあるのですが、以下では「モジュール」と呼びたいと思います。

グローバルナビゲーション

スマートフォンなどでは上、パソコンなど左に配置される、ナビゲーションだけをまとめたモジュールです。

「レイアウト」モジュールの中で読み込まれます。

ロゴ、ウェブページリスト、ボタンで構成されますが、いずれもかんたんデザイン編集に対応しています。

フッター

フッターモジュールです。
「グローバルナビゲーション」モジュール同様、「レイアウト」モジュールの中で読み込まれます。
これまた同様に、すべての構成要素がかんたんデザイン編集対応です。

レイアウト

これまでの公式テーマとFusion Corporate との最も大きな違いは、この「レイアウト」モジュールかもしれません。

大層な言い方をしましたが小難しいことなく、実際に出力する側のテンプレートで <mt:IncludeBlock>タグを用いているだけです。
「全体のHTML構造を把握したい」といった場合は、まさにこのモジュールが役に立つと思います。

パンくずリスト

今回のデザインは、ページの先頭と最後にそれぞれパンくずリストがあるデザインのため、モジュールとして登録しています。

パンくずリストはパンくずリストでも、構造化データを<head>に挿入したい場合は、新規にモジュールを作成し、後述の「メタ情報」モジュールで読み込む方針がオススメです。

記事リスト

インデックス・テンプレートで飛ばした、「記事一覧」テンプレートと「カテゴリ別記事一覧」テンプレートのメインになるモジュールです。

記事のタイトルや日付、リンクなどは「記事アイテム」モジュールとして切り分けています。「記事アイテム」は、メインページテンプレートなどでも利用するためです。
モジュールの中でもモジュールは呼び出し可能です。

メタ情報

<head> 内のメタタグを全てまとめています。favicon, CSS, JS なども全てこのモジュールです。全ページ共通にしているため、ページごとの細かな変化はこのモジュール内で条件分岐させています。

共通設定

その名の通り、サイト全体で共通の設定をまとめたモジュールです。
より具体的には「かんたんデザイン編集の設定」です。

記事アイテム

記事ページへの導線となるHTML要素をまとめたモジュールです。
メインページ、記事一覧、カテゴリ別一覧で利用するため、共通化しています。

呼び出す際にオプションを指定することで、見出しレベルを変更することが可能です。

// 記事タイトルを h3 で囲う
<$mt:Include module="記事アイテム" title_tag="h3"$>

// 何も指定がなければ、記事タイトルを h2 で囲う
<$mt:Include module="記事アイテム"$>

ウェブページアイテム

記事アイテム同様、ウェブページへの導線をつくるためのモジュールです。
記事アイテムを比較すると、サムネイル画像を利用できるため、少し要素が増えています。
呼び出されるのはメインページのみですが、コードを見やすくするために切り出しています。

こちらも、見出しレベルを変更可能です。

システムテンプレート

エディタCSS

いよいよ最後、エディタCSSテンプレートです。

これは最後らしく特殊で、記事やウェブページの編集管理画面のためのCSSです。
管理画面での本文を、公開時のスタイルに近づけるためのCSSです。

必要なCSSを @import で読み込みつつ、細かなスタイルを追記してます。

まとめ

3回目の今回も、やはーーーり長ーーーい記事になってしまいました。
ただ、お伝えしたいことは余すことなく詰め込みました。
前回、前々回ともども、テーマ作成の一助になれれば嬉しいです。

ぜひ、MovableType.netと新テーマ「Fusion Corporate」をご活用ください！

バスケチームの公式サイト＆メンバー向け試合結果ページを作れる MovableType.net 用データを無料配布！

2024-12-19T02:00:00Z

こんにちは！プロダクトマネージャーの早瀬です。

今回は、Movable Type Advent Calendar 2024 の12/19の記事として公開します！

私の娘たちは小学校・中学校のバスケットボールチームに所属しています。

ミニバスだと団員が最低10人必要なのですが、集めるのに苦戦しているチームが多いと聞きます。にも関わらず、中学のクラブチームでさえ、ウェブサイトを持っているところは非常に少なく、Instagramのみというところが多いです。

個人的にはクラブチームにウェブサイトは必須だと思っているので、数年前からむすめ達が所属するミニバスチームのウェブサイトを Movable Type で運営しています。その結果、市外からの問い合わせも増えて、現在は60人近くの団員が集まりました。

また、試合結果を内部向けに掲載するブログもあわせて運用することによって、プレイ動画を見直しチーム力アップに繋がっています。

今回はその運用ノウハウも含めて、バスケットボールチームのウェブサイトと試合結果を掲載するブログをパッケージ化したものを、MovableType.net のバックアップデータとして配布します！

もちろんMovableType.netの標準テーマをベースにしていますので、すべてレスポンシブレイアウトでスマートフォンにも対応しています！

バックアップデータを利用し新規作成したウェブサイトで復元する

まず、バックアップデータを利用するとどういうサイトができるかというと、、、データ元のサイトはこちらになります！

MT-NET Basketball

構成としては、ウェブサイトと配下のブログ1つがセットになっています。

ウェブサイト：バスケットボールチームのサイトで最低限必要なコンテンツも入っています
ブログ：試合結果の動画URLを掲載し、アーカイブすることができます

上記サイトを雛形としたバックアップデータは以下よりダウンロードしてください。

20241218112727.zipをダウンロード

アカウントをお持ちでない場合は、アカウントの作成からウェブサイトを作成できます。すでにアカウントをお持ちの場合は、ログイン後のダッシュボードの一番下にある新しくウェブサイトを作るから作成してください。

アカウントの作成方法 - マニュアル | MovableType.net

作成したウェブサイトの左メニューのツール＞復元から、ダウンロードしたファイルを選択して復元します。

復元が完了すると、ウェブサイトには元データと同じ内容の記事・ウェブページが作成され同じデザインで表示されます。MT-NET試合結果というブログも作成され、こちらも同じ内容のサンプルコンテンツが作成されています。

公開用ウェブサイトの編集

チームの公開用ウェブサイトは、Fusion Corporateをそのまま利用してかんたんデザイン編集機能で編集しています。

記事でお知らせを更新していき、ウェブページでその他のページを作成しています。ウェブページは以下を作成してサンプルコンテンツを入れていますが、必要に応じて変更してください。

練習
メッセージ
お問い合わせ

お問い合わせページのフォームに関しては、新たに作成しソースコードを挿入してください。

フォーム - マニュアル | MovableType.net

テンプレート上で変更が必要な箇所は全てかんたんデザイン編集機能を利用して、ノーコードで変更を行えます。

使い方に関して詳しくはマニュアルや記事をご覧ください。

試合結果と動画のURLを掲載するブログの使い方

こちらは標準テーマをベースにして、バスケットボールの試合結果を掲載していくためにカスタマイズしたものになりますので、使い方も詳しく説明していきます。

内部向けに限定公開を設定する

まず、試合結果のブログは内部向けということで限定公開で運営することを推奨します。パスワード等による限定公開についてはマニュアルをご覧ください。

公開の設定 - マニュアル | MovableType.net

ブログの名前を変更する

ブログの名前がMT-NET試合結果になっているので、設定＞全般から自チームの名称等に変更します。

かんたんデザイン編集で必要な箇所を変更する

簡単デザインでは以下の項目を変更できます。

メインページのフリーテキスト：メインページの上部にお知らせしたい内容を自由に記述できるようにしています。
インフォメーション：右サイドバーの公式ウェブサイトのURLを変更できます。今回のバックアップデータでは、/（スラッシュ）でサイトのトップに遷移するので変更の必要はありません。
コピーライト：フッターに表示されるので変更してください。

ウェブページを編集・追加する

ウェブページはこのサイトについてというページを用意していますが、このページを編集するもしくは新しくウェブページを作ることもできます。

グローバルナビに表示のカスタムフィールドにチェックを入れると、上部のナビゲーションにリンクを表示できます。

試合結果と動画のURLを記事で掲載する

試合結果は記事で作成してアーカイブしていきますが、フィールドは以下を用意しています。

タイトル：大会名、対戦相手、場所などを記述します
試合結果：主に点数を掲載します
第1〜4クォータービデオ：それぞれのクォーターの動画のURLを貼り付けます。
備考：リッチテキストで自由に記述できるようにしているので、イレギュラーな情報など柔軟に掲載することができます。B戦の試合結果や組合せ表の画像のアップなど実際の使い方も様々です。

試合の動画はYoutubeにアップすることが多く個別の動画のURLを各クォーターのフィールドに貼り付けるだけで、第1クォーターといったテキストリンクになります。

また、サイトではなく動画の運用の話になりますが、動画はタイムアウトのときも止めずに1Q単位で撮影すると、動画の編集などしなくて済みます。見る方はYoutubeであればスキップするのは簡単なので問題ありません。

試合結果の動画の掲載は頻度も高いと思うので、以下に楽できるか？がポイントになると個人的には思っています。

実際にミニバスで4年運用してきたので、説得力はあるはずです！（笑）

以上　Movable Type Advent Calendar 2024 の12/19の記事でしたが、ぜひ実際に試していただけると嬉しいです。

MovableType.net はアカウント自体は無料で、そのアカウント内で自動課金なく2週間の無料トライアルも自由にできますし、制作者向け評価ライセンス（公開用の利用や公開前の開発のための利用はNG、あくまで自分のテスト環境等で利用可能）も用意していますので、じっくり触りたい方はそちらもお申し込みいただければと思います！

予約枠項目を利用してセミナー受付フォームを作る

2024-12-03T02:00:00Z

フォーム機能に新しく予約枠項目が追加されました。

今回は予約枠項目を利用して、一度の申し込みで複数人分の予約申し込みができるセミナー受付フォーム（申し込み最大20人を想定）を作成してみます！

予約枠項目の設定

フォームの項目変更タブの右側の追加可能な項目に予約枠というものがありますので、お名前や連絡先など必要な項目と一緒に追加します。

予約枠の項目については今回は以下の設定をしています。

項目名：セミナー予約人数
必須項目：チェック
初期メッセージ：人数を選択してください
予約枠の下限：1
予約枠の上限：5
予約枠の初期値：空のまま

予約枠の上限は5としていますが、例えば残りの予約数が3の場合は選択肢には最大3までしか表示されないようになっています。

補足説明文については工夫をしていて、現在の空き人数と現在の受付状況を表示するようにしています。

受付に関する人数を表示するためには、mt:Var タグが必要になります。

<mt:var name="reservation_slot_count">：現在登録済みの予約枠の件数
<mt:var name="remaining_reservation_slot_count">：受付の制限の数から、現在登録済みの予約枠の件数を差し引いた残りの予約数
<mt:var name="maximum_entry_count">：受付の上限の数

上記のタグを組み合わせて、補足説明分の入力欄のHTML編集ボタンからソースコードを表示し、内容を記述します。

<p>ご本人様とセミナーに一緒に参加されるメンバーの合計人数を選択してください。</p>
<p>現在の空き人数：<mt:var name="remaining_reservation_slot_count" /></p>
<p>現在の受付状況：<mt:var name="reservation_slot_count" /> / <mt:var name="maximum_entry_count" /></p>

この記述によって、閲覧者はフォームにアクセスしたタイミングのリアルタイムな状況を確認することができます。

受付の制限の設定

予約枠の項目の設定が終わったら基本設定に戻り、受付の制限を設定します。

受付件数には今回の上限である20を設定し、制限の対象には先程追加した予約枠の項目名セミナー予約人数が追加されているのでそれを選択して保存をすれば完成です。

予約枠の件数のリセット

予約枠の件数は、受付データの画面で「リセット」を実行すると、0件に戻ります。

以上、フォーム機能に新しく追加された予約枠をぜひ活用してみてください！

エンジニアが解説！新テーマ「Fusion Corporate」制作のポイント（テーマ作成者向け）② かんたんデザイン編集編

2024-11-12T02:00:00Z

はじめに

こんにちは！エンジニアのjunです。
去る2024年10月1日、MovableType.net 用の新テーマ「Fusion Corporate」を公開しました🎉

Fusion Corporate

この機能のおかげで、トップページなどのデザイン要素を、運用担当者が自らコードを触らず編集できるのです。
いわばノーコード的な機能をアドオンできる便利機能がかんたんデザイン編集です。この機能の使い方の詳細は、次の2つのリンク先をご覧下さい。

かんたんデザイン編集仕様詳細

かんたんデザイン編集コンポーネント利用例

さて、「Fusion Corporate」ではかんたんデザイン編集機能を、どの場所でどのように組み込んでいるのでしょうか？
この記事は Fusion Corporate のような汎用的なテーマを作りたい人向けに、テーマ実装方法を解説する3回連載記事の第2回目です。かんたんデザイン編集機能の実装について解説します。

「既存のテーマをかんたんデザイン編集に対応させたい！」「テーマをイチから作ってみたい！」
そんな時の参考になれば嬉しいです。

CSS編
かんたんデザイン編集編　← 今回はココ！
MTテンプレート編

さあ、かんたんデザイン編集編、スタートです！！

1行のテキストを設定する

まずは最も基本的な、ページ内の特定の1行を編集するための実装方法を見ていきましょう。
「Fusion Corporate」では、フッターのコピーライトなどで、1行のテキストフィールドを利用しています。

コピーライトでは、以下のような記述になっています。

// footer.mtml
<p class="text-md-end small mb-0">
  <mt:Var
    name="theme_copyright"
    editor:label="コピーライト"
    editor:type="contenteditable"
    editor:mode="text"
    default="©2003 EXAMPLE INC."
    editor:button:mode="before"
    editor:update:required="1"
    editor:button:position="-10,-15"
  >
</p>

// footer_settings.mtml
<mt:Var
  name="theme_copyright"
  editor:label="コピーライト"
  editor:type="text"
  editor:mode="editor"
  editor:update:required="1"
  default="©2003 EXAMPLE INC."
  editor:register="0"
>

footer.mtmlは、最終的なHTMLを出力するテンプレートになるため、クラスのついた<p>タグで囲っています。
footer_settings.mtmlは、管理画面の入力欄の定義です。装飾のためのHTMLタグなどはありません。

一番重要なのは、両者のname="theme_copyright"属性を揃える点です。
実際にテーマを作成する際は、
まずは settings にて変数定義を行い、
次に出力させたい箇所で呼び出す、といった流れをイメージしていただくと良いかもしれません。

default="©2003 EXAMPLE INC."も、それぞれへ記述する必要があります。
なお、ソフトウェア版 Movable Type のグローバルモディファイア_defaultとは異なり、アンダースコアはないためご注意ください。

共通点もある一方、editor:typeの内容には差があります。
footer.mtmlではcontenteditableを指定しているため、要素を直接編集可能になります。

モディファイアは1行に1つ

余談ですが、MTタグのモディファイアは1行に1つずつ、複数の行にわたって記述しています。これは、人気のJavaScriptフレームワーク Vue.js を参考にしています。公式スタイルガイドには、以下のように記されています。

JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや JSX も同じように考えることがふさわしいです。

Vue.jsスタイルガイド

MTテンプレートでも同じように行を分けて書くほうが読みやすいと考え、Vue.jsのスタイルを踏襲しています。

複数行のテキストを設定する

閑話休題。

続けて、複数行テキストフィールドについて。

先ほどと同様、フッターの「連絡先」を例にしたいと思います。
「連絡先」以外には、メインページのキャッチコピーなどで利用しています。

// footer.mtml
<address class="mb-0 theme-prose theme-block-margin-0">
  <mt:Var
    name="theme_address"
    editor:label="連絡先"
    editor:type="contenteditable"
    editor:editor="richtext"
    editor:mode="text"
    default="<p>〒123-4567<br>○○県△△市□□町1-23-45<br>◇◇ビル 6階</p>"
    editor:button:mode="before"
    editor:update:required="1"
    editor:button:position="-10,-15"
  >
</address>

// footer_settings.mtml
<mt:Var
  name="theme_address"
  editor:label="連絡先"
  editor:type="textarea"
  editor:editor="richtext"
  editor:mode="editor"
  default="<p>〒123-4567<br>○○県△△市□□町1-23-45<br>◇◇ビル 6階</p>"
  editor:update:required="1"
  editor:register="0"
>

1行テキストフィールドと変わらない使い勝手ではないでしょうか。

defaultの値に<p>タグまでも含めている点は異なります。
editor:editor="richtext"を指定した場合、ユーザーが入力値を変更すると<p>タグも含めた値が保存されます。
それと揃えるためにdefaultにもタグを含めています。

リンクを設定する

リンクを設定したい場合は、1行テキストフィールドを組み合わせて対応します。
「Fusion Corporate」では、グローバルナビゲーションのお問い合わせボタンなどで利用しています。

// global_nav.mtml
<a
  class="btn btn-primary btn-sm fw-bold mb-1 px-3 py-2 w-100 theme-CTA"
  href="<$mt:Var name="theme_CTA_button_url" editor:label="URL" editor:mode="attribute" editor:type="text" default="/contact/"$>"
>
  <mt:Var 
    name="theme_CTA_button_text"
    editor:label="テキスト"
    editor:mode="text"
    editor:type="contenteditable"
    editor:button:mode="before"
    default="お問い合わせ"
    editor:button:position="-5,-20"
  >
</a>

// global_nav_settings.mtml
<mt:Var 
  name="theme_CTA_button_text"
  editor:label="テキスト"
  editor:type="text"
  default="お問い合わせ"
  editor:register="0"
>
<mt:Var 
  name="theme_CTA_button_url"
  editor:label="URL"
  editor:type="text"
  default="/contact/"
  editor:register="0"
>

用意したフィールドは2つ。ボタンの文言と、リンク先URLです。

ボタンの文言は、記事冒頭の1行テキストフィールドの例と同様です。

目新しい点は、editor:mode="attribute"の登場です。
その名前の通り、HTML属性として出力する際の設定です。[href]として出力するglobal_nav.mtmlのみ設定し、global_nav_settings.mtmlでは設定していません。

クラス名のCTAとは

「クラス名に略語は用いない」という方針でいますが、CTAは例外のため、補足です。

CTAとは、Call to Action の頭文字です。日本語訳すると「行動喚起」。
例えば「お問い合わせ」や「ログイン」、「無料トライアル」など、サイト訪問者に次に起こして欲しい行動を喚起させるための導線作りと言えます。fusion corporate のようにボタンリンクの場合は、「CTAボタン」などと呼ばれることも多いですね。

画像を設定する

画像フィールドは、ロゴ画像の入力欄などで登場します。
ここらから少し見慣れない記述が増えてくるかもしれませんが、出来るだけ丁寧に解説できればと思います。

まずは実際のコード。
ここでも、フッターを例にします。

// footer.mtml
<p class="fs-4 m-0 theme-footer-logo MTSE-footer-logo">
  <mt:Var
    name="theme_footer_logo"
    editor:label="ロゴ画像"
    editor:type="image"
    editor:update:attribute="src"
    editor:update:selector=".MTSE-footer-logo img"
    editor:if:value="<img>"
    editor:if:empty="$theme_name"
    editor:button:position="-10,-15"
  >
  <!-- mt-site-editor-theme_footer_logo -->
  <mt:If name="theme_footer_logo">
    <img
      src="<mt:Asset id="$theme_footer_logo"><$mt:AssetURL$></mt:Asset>"
      alt="<$mt:Var name="theme_name"$>"
      width="<mt:Asset id="$theme_footer_logo"><$mt:AssetProperty property="image_width"$></mt:Asset>"
      height="<mt:Asset id="$theme_footer_logo"><$mt:AssetProperty property="image_height"$></mt:Asset>"
      decoding="async"
      fetchPriority="high"
    >
  <mt:Else>
    <!-- mt-site-editor-theme_footer_logo-if-empty -->
      <$mt:Var name="theme_name"$>
    <!-- /mt-site-editor-theme_footer_logo-if-empty -->
  </mt:If>
  <!-- /mt-site-editor-theme_footer_logo -->
</p>

// footer_settings.mtml
<$mt:BlogName encode_html="1" setvar="theme_name"$>

<mt:Var
  name="theme_footer_logo"
  editor:label="ロゴ画像"
  editor:type="image"
  editor:update:attribute="src"
  editor:update:selector=".MTSE-footer-logo img"
  editor:if:value="<img>"
  editor:if:empty="$theme_name"
  editor:register="0"
>

テキストフィールドでは登場しなかったeditor:update:attributeとeditor:update:selectorにまずは注目です。
この2つはセットになります。

テキストフィールドとは異なり、<img>タグの[src]属性を変更したいため、editor:update:attributeを設定します。
加えて、editor:update:selectorにて、変更すべき要素を指定します。属性名に selector とあるように、CSSや JavaScript のセレクターが有効です。

なお、.MTSEの接頭語がついたクラスは、かんたんデザイン編集のプレビュー画面専用クラスです。
役割をより明確にすること、スタイルの柔軟性を高めることが目的です。

変数に保存される値は、画像のID

name属性で指定したMT変数に保存される値は、画像のIDになります。
そのため、取り出す際には<mt:Asset>タグを用います。

mt:Var の位置　＝　編集ボタンの位置

ここで1つ注意したいのが、出力テンプレートにおける<mt:Var>の扱いです。

かんたんデザイン編集プレビュー画面では、<mt:Var>は、鉛筆アイコンの編集ボタンへ置き換わります。
これは、テキストフィールドではあまり意識する必要がなかった点ではないでしょうか。
「プレビュー画面だけスタイルが崩れた」とならないように、画像には親要素を設け、その中で<mt:Var>を呼び出すと良いと思います。もちろん、最終的な公開画面では編集ボタンは表示されません。

画像が未設定の場合の処理

「Fusion Corporate」では、画像未設定の場合に、ブログタイトルを通常のテキストとして表示させています。画像タグは出力されません。この、未設定の処理が一番わかりにくい箇所かと思います。

画像フィールドに限りませんが、プレビュー画面でのリアルタイム反映の裏では、JavaScript が大きな役割を担っています。
そのため、 JavaScript の経験があると動作をイメージしやすいかもしれません。

とはいえ、未設定処理のために JavaScript を書く必要はありません。
具体的に追加すべきコードは以下の2つです。

<!-- mt-site-editor-theme_footer_logo -->
<!-- /mt-site-editor-theme_footer_logo -->

<!-- mt-site-editor-theme_footer_logo-if-empty -->
<!-- /mt-site-editor-theme_footer_logo-if-empty -->

いずれも、開始タグと終了タグのセットです。
theme_footer_logoの箇所は、nameで設定した文字列が適用されます。
開始と終了のタグで挟まれた内容が、JavaScriptで処理され、画像未設定の場合の条件分岐が行われます。

MTタグのif文と、JavaScriptのif文の2つを併記するわけです。
前者は、ページのロード時に処理されます。公開画面にも影響するため、メインはこちらです。
後者は、ページをリロードせずともリアルタイムに処理されます。公開画面には影響せず、あくまでも管理画面のリアルタイム反映のための処理です。

なお、今回は、画像未設定の場合に画像タグを出力しない仕様も、複雑になった理由の1つに思います。
もし、「常に画像タグは出力する。画像未設定の場合は、プレースホルダー画像を表示させる」などの仕様になる場合は、以下などで十分かもしれません。

<mt:If name="theme_footer_logo">
  <mt:Asset id="$theme_footer_logo"><$mt:AssetURL setvar="theme_footer_logo_src"$></mt:Asset>
<mt:Else>
  <$mt:Var name="theme_footer_logo_src" value="/path/to/placeholder.svg"$>
</mt:If>

<img src="<mt:Var name="theme_footer_logo_src">">

記事やウェブページのリストを設定する基本編

editor:type="list"を利用することで、ブログ内の記事やウェブページへのリンクを簡単に作成することができます。やはりフッターを例に紹介したいと思います。

なお、メインページや記事一覧ページへのリンクがありますが、これらかんたんデザイン編集の対象外です。テンプレートを書き換えないかぎり、必ず出力されます。ただし、リンクの文言だけはかんたんデザイン編集の「全般設定」から変更可能です。

// footer.mtml
<ul class="d-flex flex-column flex-sm-row flex-wrap column-gap-5 row-gap-2 list-unstyled m-0 small MTSE-sub-menu">
  <li><a href="<$mt:BlogRelativeURL$>"><$mt:Var name="theme_toppage_title" default="トップページ"$></a></li>
  <li><a href="<$mt:BlogRelativeURL$>archive/"><$mt:Var name="theme_archive_title" default="お知らせ"$></a></li>

  <mt:Var
    name="theme_sub_menu_items"
    editor:label="フッターナビゲーションに表示するウェブページ"
    editor:type="list"
    editor:mode="editor"
    editor:update:selector=".MTSE-sub-menu-item"
    editor:update:html="$theme_sub_menu_item_template"
    editor:update:parent:selector=".MTSE-sub-menu"
    editor:button:position="-10,-15"
  >
  <mt:If name="theme_sub_menu_items">
    <mt:Pages ids="$theme_sub_menu_items">
      <li class="MTSE-sub-menu-item">
        <a class="MTSE-sub-menu-item__title MTSE-sub-menu-item__url" href="<$mt:PagePermalink$>"><$mt:PageTitle encode_html="1"$></a>
      </li>
    </mt:Pages>
  </mt:If>
</ul>

// footer_settings.mtml
<mt:SetVarBlock name="theme_sub_menu_item_template">
  <li class="MTSE-sub-menu-item">
    <a class="text-reset MTSE-sub-menu-item__title MTSE-sub-menu-item__url"></a>
  </li>
</mt:SetVarBlock>
<mt:Var
  name="theme_sub_menu_items"
  editor:label="フッターナビゲーションに表示するウェブページ"
  editor:type="list"
  editor:mode="editor"
  editor:update:selector=".MTSE-sub-menu-item"
  editor:update:html="$theme_sub_menu_item_template"
  editor:update:parent:selector=".MTSE-sub-menu"
  editor:register="0"
>

nameやeditor:labelなどの属性は、引き続き同様です。
画像で利用したeditor:update:selectorを利用していますが、今回はeditor:update:htmlとeditor:update:parent:selectorの、3つがセットになります。

editor:update:selectorは、挿入したいリンクアイテムのセレクターです。

editor:update:htmlは、今回のように階層を持ったHTML構造を挿入したい場合に利用します。ここでは、一度MT変数に代入しています。
ここで注意が必要なのが、<a>タグのクラスです。暗黙のルールとして、editor:update:selectorの値に__titleと__urlを連結したクラス名が必須になります。これらがないと、ページタイトルやリンク先が表示されず空になってしまいます。
クラスの命名規則は変更できません。また、editor:update:selectorの子要素である必要があります。以下のように、すべて同じ要素にまとめて指定することはできません。

<a class="item item__title item__url">動作しない</a>

変数に保存される値は、ページのID

name属性で指定したMT変数に保存される値は、記事やウェブページのIDになります。
そのため、取り出す際には<mt:Entries>タグや<mt:Pages>を用います。

記事やウェブページのリストを設定する応用編

先ほどのeditor:type="list"には、より高度な利用方法があります。
editor:update:fetch="1"属性の利用です。
「Fusion Corporate」では、メインページの「ピックアップ記事」や「ピックアップウェブページ」で利用します。

通常のeditor:type="list"では、プレビュー画面のその場でHTMLの断片を作成し画面を更新します。
一方、editor:update:fetch="1"を追加すると、プレビュー画面とは別の場所でページ全体をまるっと作成します。その後に、フェッチでページを取得し、必要な箇所を差し替えて画面を更新しているのです。

差し替えすべき必要な箇所の指定はeditor:update:selectorで行います。

使い分けの基準としては、まずはHTML構造の複雑さです。
画像を用いた、いわゆるカード型リンクなどの場合には、画像やカスタムフィールドの情報を取得することもあると思います。
カスタムフィールドの処理が必要な場合は、フェッチで対応する必要があります。

もうひとつの判断基準は、リスト未設定の場合の処理です。
画像と同様、未設定の場合にはのタグを利用しますが、これもコードの見通しを悪くする原因になります。
未設定の場合は表示を切り替えたい場合は、フェッチの利用が良いと思います。

フェッチにはデメリットもあります。
それは、反映までのタイムラグです。
別の場所でページ全体をまるっと作成しているため、どうしても時間がかかります。
無闇矢鱈とフェッチするととても重くなってしまう可能性もあるため注意が必要です。

「Fusion Corporate」での実際のコードは以下です。

// index.mtml
<mt:SetVarTemplate name="theme_webpage_item_template">
  <$mt:Include module="ウェブページアイテム" title_tag="h3"$>
</mt:SetVarTemplate>

<section class="MTSE-selected-webpages tw-my-24">
  <mt:Var
    name="theme_toppage_selected_webpages"
    editor:label="ピックアップウェブページ"
    editor:type="list"
    editor:resource:type="page"
    editor:update:fetch="1"
    editor:update:selector=".MTSE-selected-webpages"
    editor:button:position="-10,-15"
  >
  <mt:If name="theme_toppage_selected_webpages">
    <h2 class="visually-hidden">ピックアップページ</h2>

    <div class="theme-webpages theme-block-columns">
      <mt:Pages ids="$theme_toppage_selected_webpages">
        <$mt:Var name="theme_webpage_item_template"$>
      </mt:Pages>
    </div>
  <mt:Else>
    <mt:If name="is_site_editor">
      <h2>ピックアップページ</h2>
      <p>かんたんデザイン編集で、ピックアップしたいウェブページを設定することができます。</p>
    </mt:If>
  </mt:If>
</section>

// index.mtml
<mt:Var
  name="theme_toppage_selected_webpages"
  editor:label="ピックアップウェブページ"
  editor:type="list"
  editor:resource:type="page"
  editor:update:fetch="1"
  editor:update:selector=".MTSE-selected-webpages"
  editor:register="0"
>

なお、カード型リンクは複数ページで利用するため、テンプレートモジュール「ウェブページアイテム」として切り出して登録していますが、ここでは割愛します。
上記例では、<$mt:Var name="theme_webpage_item_template"$>と呼び出すのみです。

MTのモディファイアを設定する

いよいよ、最後です。
最後は、かんたんデザイン編集の変更を、MTのモディファイアとして利用する例です。

「Fusion Corporate」では、メインページに新着記事を表示させることができます。
この、新着記事の件数を変更できるようにする例です。

かんたんデザイン編集未対応の場合は、以下のようにすれば新着3件を取得できます。

<mt:Entries limit="3">
  ...
</mt:Entries>

limit="3"となっている箇所を、かんたんデザイン編集で任意の値へ変更できるようにします。
「Fusion Corporate」での実際の例は以下です。

// index.mtml
<section class="MTSE-latest-entries tw-my-24">
  <mt:Var
    name="theme_toppage_latest_entries_limit"
    editor:label="最新記事の件数"
    editor:type="number"
    default="3"
    editor:update:fetch="1"
    editor:update:selector=".MTSE-latest-entries"
    editor:button:position="-10,-15"
  >
  <mt:Unless name="theme_toppage_latest_entries_limit">
    <$mt:Var name="theme_toppage_latest_entries_limit" value="3"$>
  </mt:Unless>

  <mt:If name="theme_toppage_latest_entries_limit" ge="1">
    <h2 class="m-0"><$mt:Var name="theme_archive_title" default="お知らせ"$></h2>

    <div class="theme-entries column-gap-5 my-5 border-top border-bottom">
      <mt:Entries limit="$theme_toppage_latest_entries_limit">
        <$mt:Var name="theme_entry_item_template"$>
      </mt:Entries>
    </div>
  
    <div class="text-center">
      <a href="<$mt:BlogRelativeURL$>archive/" class="btn btn-outline-primary">一覧をみる</a>
    </div>
  <mt:Else>
    <mt:If name="is_site_editor">
      <h2>最新記事</h2>
      <p>かんたんデザイン編集で、最新記事の件数を設定することができます。</p>
    </mt:If>
  </mt:If>
</section>

// index_settings.mtml
<mt:Var
  name="theme_toppage_latest_entries_limit"
  editor:label="最新記事の件数"
  editor:type="number"
  default="3"
  editor:update:fetch="1"
  editor:update:selector=".MTSE-latest-entries"
  editor:update:html="$theme_entry_item_template"
  editor:register="0"
>

じつは、一番のポイントは、既出のeditor:update:fetch="1"。
モディファイアの値を動的に反映させたい場合も、フェッチが必要になります。

もうひとつのポイントは、<mt:Unless>タグを登場している点です。
これは、テーマのクリーンインストール時など、変数が本当に空っぽの場合への対応です。

MTの実装上、<mt:Var name="theme_toppage_latest_entries_limit" default="3">だけではtheme_toppage_latest_entries_limit変数へ値が保存／格納されないのです。
このままでは<mt:If name="theme_toppage_latest_entries_limit" ge="1">がtrueになりません。
そのため、<mt:Unless>を用いて、改めて初期値を設定しています。

まとめ

前回に引き続き、すっかり長文になってしまいました。。。
しかし、今回も、お伝えしたいことはしっかり書き切りました。
とくに、最後の <mt:Unless> を用いた初期値の扱いなどは、私自身がばっちりハマった点でもあります。それを共有することは、とても有意義なことだと信じています。

ぜひみなさんもテーマ作成へ挑戦してみてください！

MovableType.net 活用ブログ

アカウントのログインで多要素認証を利用する方法

サポートしている認証アプリ

設定方法

リカバリーコードの保存

設定完了例

利用方法

Google / Microsoft 365 のOAuth認証を利用してフォームの自動返信メールのFROMアドレスを設定する方法

Microsoft 365 アカウントを設定する方法

Google アカウントを設定する方法

MovableType.net は 11 周年を迎えました

直近1年の主な機能強化と改善

MovableType.net（CMS）

MovableType.net フォーム

MovableType.net サイトサーチ

プラン体系の変更と料金改定のお知らせ

フォーム項目名などを、他の言語で表示するための設定方法

フォーム項目名

送信・確認ボタン

必須ラベルや表示されるメッセージの変更

エラーメッセージについて

受付完了時のメッセージ

通知メールと自動返信メール

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

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

テンプレート内

設定パネル内

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

設定パネル内

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

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

テンプレート内

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

設定パネル内

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

プレビュー環境のページでGA4等のタグを読み込まないようにするための preview 変数活用方法

実装例：プレビューページでは、GA4 のコードを読み込まない

GTM 利用者へのヒント

まとめ

テーマ開発を基礎から学べるウェブサイト・PDF・冊子を全面改訂！「トフでもできる！？MovableType.net テーマ開発」

「トフでもできる！？MovableType.net テーマ開発」とは？

説明文を更新し、スクリーンショットを一新しました

サンプルサイトを更新しました

サンプルコードを見直しました

本文テキストが読みやすくなりました

どこで手に入れられるの？

ウェブ版

PDF版

冊子版

チェックボックスで選択できる上限数を指定する【MovableType.net フォーム】

もくじ

1. フォームを新規作成

2. フォームをページに設置する

3. カスタムスクリプトのテンプレートを作成

4. カスタムスクリプトのテンプレートを読み込ませる

5. 正常に動くか動作確認する

かんたんデザイン編集の新機能「画像のリストタイプ」を使ったスライドショーの実装例

設定パネル側の記述

テンプレート内への記述

その他の活用例

SaaS型本格CMS「MovableType.net」祝10周年！特設サイトを公開しました

関連記事・ウェブページ機能の出力時にマルチブログ機能を利用して情報を出し分ける方法

今回のユースケース

構成

関連記事機能の設定

ニュース記事で関連記事を設定する

テンプレートへの記述方法

ブログのテンプレートでは何も出力させずコンテンツ管理のために利用する

エンジニアが解説！新テーマ「Fusion Corporate」制作のポイント（テーマ作成者向け）③ MTテンプレート編

はじめに

テンプレートの種類

インデックス・テンプレートb

メインページ

記事一覧

theme.css

bootstrap.css

アーカイブ・テンプレート

記事

ウェブページ

カテゴリ一覧

mt:Var の位置　＝　編集ボタンの位置

記事やウェブページのリストを設定する基本編

記事やウェブページのリストを設定する応用編