はじめに
こんにちは！エンジニアのjunです。
去る2024年10月1日、MovableType.net 用の新テーマ「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のテンプレートを利用しています。
駆け足にはなりますが、まるっとすべて解説していきます！
インデックス・テンプレート
まずはインデックス・テンプレート。
インデックス・テンプレートは計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」をご活用ください！
