Movable Typeでトップページを作る

以前、Movable Typeをローカルで構築する方法をご紹介いたしました。

XAMPPのユーザーディレクトリの設定をしてMovable Typeをローカルで構築する
CMS プラットフォーム Movable Type - クラウドもオンプレミスも幅広く対応可能なCMS - Six Apart XAMPP...

今回は上記の続きで、実際にMovable TypeにWebサイトのページを組み込む方法をご紹介いたします。

※本記事はWindows10 Pro(64bit)版、Movable Type6.2で行ったものを掲載しています。ご了承ください。

元ソース

まずはMovable Typeに組み込む前のソースをご紹介いたします。

html

ヘッダーとフッター、あとは「お知らせ」があるトップページです。

CMSにhtmlを組み込む時は、しっかりと内容や構造を把握することが大切です。

また、組み込む前のソースはバックアップを必ず取るようにしたほうが無難です。

css

初期設定と役割が決められているスタイルとなります。

今回組み込みを行うトップページ以外のスタイルもありますが、気にせず続けます。

html同様、組み込む前のソースはバックアップを取っておきます。

設定

Movable Typeと、自前で作成したcssやトップページにあたる「index.html」などのディレクトリは、下記の画像のような関係になっているとします。

Movable Typeと他リソースのディレクトリ構造

上記の画像を踏まえた上でサイトの設定を行います。

Movable Type 設定

  1. 「設定」の「全般」に行く。
  2. サイトの名前と説明を記述。
  3. ウェブサイトURLとウェブサイトパスを記述。
  4. 「変更を保存」ボタンを押下。

以上でサイトの全般設定は終了です。

サイトの設定を行い、トップページ(http://localhost/~mt-test/)を表示すると、Movable Typeのデフォルトのテーマが適用されているので、下記の画像のようになっているはずです。

Movable Type デフォルトテーマ

上記の画面を下記の画像のように自前で作成したページにします。

Movable Type カスタムトップページ

テンプレートを設定する

サイトの設定が終了したら、次にヘッダーやフッターなどをMovable Typeのテンプレートに振り分けていきます。

スタイルシート(css)

スタイルシートをMovable Typeと関連付けます。

「デザイン」の「テンプレート」を押下し、テンプレートの一覧画面に行きます。

Movable Type デザインのテンプレート

テンプレートの一覧画面に来ました。

Movable Type テンプレート一覧

「インデックステンプレート」にある「スタイルシート」を押下します。

Movable Type

「スタイルシート」のテキストエリア内にcssのソースを貼り付けます。

Movable Type css貼り付け

次はcssの設定を行います。

「テンプレートの設定」のテキストを押下すると、設定欄が表示されます。

Movable Type css設定

  1. 出力ファイル名:cssのファイル名を記述します。
  2. テンプレートの種類:「スタイルシート(styles)」にします。
  3. ファイルへのリンク:cssまでのパスを記述します。
  4. 公開:「手動」にしておきます。

設定を行ったあと、「保存と再構築」のボタンを押下します。

ここでの「変更を保存」ボタンはcssの設定の変更を保存し、「保存と再構築」ボタンはcssの変更を行った後、Movable Typeへ再構築を行い、cssをサイトへ反映させます。

以上でcssの設定は終了です。問題がなければ「変更を保存しました。」、というテキストが「テンプレートの編集」の下に表示されるはずです。

HTMLヘッダー(head)

次はHTMLヘッダーのテンプレートにhead部分を振り分けます。

テンプレートの一覧からHTMLヘッダーを押下し、head部分のソースを貼り付けます。

Movable Type HTMLヘッダー

「</head>」以外を貼り付けます。

貼り付けた後、下記の画像のように一部のソースにMovable Typeのタグを挿入します。

Movable Type HTMLヘッダーのソース

ソースは下記のようになります。

HTMLヘッダー(head)解説1

ここでMovable Typeのタグの解説をしていきます。

title部分の下記のソースですが、「<$MTGetVar name=”page_title”$>」はページタイトルを表示します。

「<MTUnless name=”site_index」の「MTUnless」はある条件を満たさない場合に、実行されます。

ここでは「name=”site_index”>」以外の時に実行されます。

後述しますが、「name=”site_index”」はサイトのインデックス、すなわちトップページを意味していますので、トップページ以外で「<MTBlogParentWebsite>」や「<$MTWebsiteName$>」が表示されます。

「<MTBlogParentWebsite>」はブログのコンテキストから、ブログの所属している親ウェブサイトを取得するブロックタグです。

「<$MTWebsiteName$>」はウェブサイトの名称になります。ここでは、「Movable Type テスト」がそれに当たります。

ですので、トップページ以外、例えば第2階層のトップの場合、titleは「ページタイトル | Movable Type テスト」となります。

HTMLヘッダー(head)解説2

下記のディスリプションとキーワードにある「<$MTGetVar name=”page_description”$>」と「<$MTGetVar name=”page_keywords”$>」は各ページのディスリプションとキーワードを表示するタグです。後述する「メインページ」との連携で動作が実行されます。

「<$MTGetVar name=”site_url” regex_replace=”/https?://[^/]+/g”,””$>」の「<$MTGetVar name=”site_url”」でサイトのURLを取ることができます。これにより、サイトで階層が変化してもcssを読ませることができます。

「regex_replace=”/https?://[^/]+/g”,””$」は「regex_replace」によって文字列を置換し、ここでは出力されるURLを絶対パスからルートパスに変更しています。

HTMLヘッダー(head)の解説は以上となります。

バナーヘッダー(ヘッダー)

次はヘッダーをテンプレートに振り分けます。

テンプレート一覧から「テンプレートモジュール」にある「バナーヘッダー」を押下します。

Movable Type バナーヘッダーテキストを押下

「バナーヘッダー」のテキストエリア内にヘッダーのソース部分を貼り付けます。

「<div class=”container”>」を含んだ「</header>」の終わりまで貼り付けます。

貼り付けた後、下記の画像のように一部のソースにMovable Typeのタグを挿入します。

Movable Type バナーヘッダーにヘッダーのソースを貼り付ける

ソースは下記のようになります。

貼り付けた後、「変更を保存」ボタンを押下します。

バナーヘッダー(ヘッダー)解説

h1内のa要素にある「<$MTGetVar name=”site_url” regex_replace=”/https?://[^/]+/g”,””$>”>」の役割は「HTMLヘッダー(head)」に記述してあるものと同じです、サイトの階層が変わってもトップページまでのパスを取ってくれます。

バナーヘッダー(ヘッダー)の解説は以上です。

バナーフッター(フッター)

次はフッターをテンプレートに振り分けます。

テンプレート一覧から「テンプレートモジュール」にある「バナーフッター」を押下します。

Movable Type バナーフッターテキストを押下

「バナーフッター(フッター)」のテキストエリア内にフッターのソース部分を貼り付けます。

「<footer>」の始まりから「</div>(コンテナ)」の終わりまで貼り付けます。

貼り付けるソースは下記のようになります。

ソースを貼り付けたあと、「変更を保存」ボタンを押下します。

Movable Type バナーフッターにフッターのソースを貼り付ける

フッターにはMovable Typeのタグは挿入されていないので解説は以上になります。

メインページ(メイン部分)

テンプレート一覧から「インデックステンプレート」にある「メインページ」を押下します。

Movable Type メインページソース

「メインページ」のテキストエリア内にHTMLヘッダー(head)、バナーヘッダー(ヘッダー)、バナーフッター(フッター)以外のソースを貼り付けます。

貼り付けた後、下記の画像のようにMovable Typeのタグを挿入します。

Mobable Type メインページの上部分です。

Movable Type メインページの上部分

Movable Type メインページの下部分です。

Mobable Type メインページの下部分「保存と再構築」ボタンを押下

Movable Typeのタグを挿入した後、「保存と再構築」ボタンを押下します。

ソースは下記のようになります。

メインページ(メイン部分)解説1

HTMLヘッダー(head)やバナーヘッダー(ヘッダー)で記述していた「site_index」、「<$MTWebsiteURL$>」などがここでセットされてます。

「<MTSetVars>」は変数の名前とその値をまとめて設定できるブロックタグで、この「<MTSetVars>」内で、今までのテンプレート内で記述してきた変数をまとめてセットしています。

  • 「site_index=1」とすることで「メインページ」をトップページとしています。
  • 「site_url=<$MTWebsiteURL$>」で「site_url」という変数名を決め、値を入力しています。
  • 「page_title=<$MTWebsiteName$>」で「page_title」という変数名を決め、値を入力しています。
  • 「page_url=<$MTWebsiteURL$>」で「page_url」という変数名を決め、値を入力しています。
  • 「page_description=<$MTWebsiteDescription$>」で「page_description」という変数名を決め、値を入力しています。
  • 「page_keywords=MovableTypeテスト」で「page_keywords」という変数名にトップページのキーワード、「MovableTypeテスト」を直接ここで入力しています。

メインページ(メイン部分)解説2

「$mt:Include module=”HTMLヘッダー”」で「HTMLヘッダー」をインクルードしています。

「module=”HTMLヘッダー”」の「HTMLヘッダー」はテンプレート名を記述しています。

「regex_replace=”/^[\ \t\r\n]+/mg”,”」は、「HTMLヘッダー」をインクルードする際に生じる、空白と改行を削除しています。

メインページ(メイン部分)解説3

「$mt:Include module=”バナーヘッダー”」で「バナーヘッダー」をインクルードしています。

「module=”バナーヘッダー”」の「バナーヘッダー」はテンプレート名を記述しています。

「regex_replace=”/^[\ \t\r\n]+/mg”,”」は、「HTMLヘッダー」をインクルードする際に生じる、空白と改行を削除しています。

メインページ(メイン部分)解説3

「$mt:Include module=”バナーフッター”」で「バナーフッター」をインクルードしています。

「module=”バナーフッター”」の「バナーフッター」はテンプレート名を記述しています。

「regex_replace=”/^[\ \t\r\n]+/mg”,”」は、「バナーフッター」をインクルードする際に生じる、空白と改行を削除しています。

メインページ(メイン部分)の解説は以上になります。

今までの工程がうまくいっていれば、トップページ(http://localhost/~mt-test/)を表示したときに、最初にご紹介した下記のようなページになってるはずです。

Movable Type カスタムトップページ

出力したソース

今回の過程で作成したトップページのソースをブラウザで出力すると、下記のようになります。

MTタグでインクルードされたヘッダーやフッターなどは、空白や改行がなくなっていることが分かります。

まとめ

  • 元ソースを用意する。
  • 「設定」から「全般」に行きサイト設定を行う。
  • スタイルシート(css)、HTMLヘッダー(head)、バナーヘッダー(ヘッダー)、バナーフッター(フッター)のテンプレートを設定する。

、お使いのパソコンやMovable Typeのバージョンによっては上記の方法ではできないかもしれません。

自前で作成したページを、Movable Typeに組み込む際の一つの例になればと思います。

「もっとスマートにできるよ!」といった意見があればコメントなどいただければと思います。

時間があれば記事の一覧や詳細、アーカイブページ、第2階層でのウェブページなども掲載していければと思っています。

※本記事はWindows10 Pro(64bit)版、Movable Type6.2で行ったものを掲載しています。ご了承ください。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

Movable Typeでトップページを作る
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!