MovableType.netで（ブログ）サイトを開設するのはとっても簡単。
アカウントを作ってサイト名など必要事項をさらさらと入力するだけ。
WPからの引っ越しもあっというまで、画像もしっかり取り込んでくれる。
が、選んだテーマに概ね満足したとしても、
若干の作業は必要である。
最低でもロゴ画像やヘッダー画像は差し替えて、
キャッチコピーや電話番号も変更（削除）しなければいけない。
最低でも必要なこと
テーマは「Stylish Corporate」を選んでみた。
テーマ「Stylish Corporate」の特長と使い方
新テーマ「Stylish Corporate」を公開！制作者がポイントをご紹介します！
・ロゴ画像を用意する
logo.pngと、footerlogo.pngという名前でPNG画像を用意し、デザイン＞ファイルマネージャーでimagesフォルダにアップする。JPG画像の場合はテンプレートを修正するか、ツール＞検索/置換＞でテンプレートにチェックを入れ、logo.pngで検索をかけ、logo.jpgに置換する。
・デザイン＞テンプレート＞config の修正
メタタグキーワード、電話番号、SNSのURLなどを修正する。不用な場合は値を削除する。
・デザイン＞テンプレート＞メインページ でキャッチコピーを修正、または削除
背景イメージを変えたい場合は、index_image.jpgという名前で画像を用意し、ファイルマネージャーでimagesフォルダにアップする。
・その他
記事ページのヘッダー画像 news_image.jpg、ウェッブページのヘッダー画像 pages_image.jpg、ファビコンのfavicon.icoも、同じ名前でオリジナル画像に差し替える。
More…
どうせテンプレートを触るんだもの、少しはカスタマイズしたいなあ、と（私のように）思ったら、仕方ない、HTMLとCSS（ネット上に解説も多い）、そしてMTタグの知識を仕入れよう。それなりに時間はかかるけれど、再構築いらずのMT.netはMTソフト版よりはるかに軽快で、かつカスタマイズが楽しい。公開前であれば、サイトの公開＞限定公開にチェックを入れてパスワード保護し、トライしてみよう。
トフでもできるMovableType.net テーマ開発
MTマニュアル
MTタグリスト クイックスタートガイド
以下は、「Stylish Corporate」のカスタマイズメモ。参考まで。
BEFORE：テーマ「Stylish Corporate」
AFTER：Vaivie.com（MT.net14日間トライアル後、MT6に移し替えたもの）
サイトとブログのトップページをカスタマイズ
CSS修正用ファイルと、テンプレート・モジュール top-blogs を新規作成
とりあえず、追加のCSS用のファイルをインデックス・テンプレートで作成、名前はadd.cssとする。テンプレート・モジュール＞header-script の最後に以下を追記する。
<link href="<$mt:BlogURL encode_html="1"$>add.css" rel="stylesheet">CSSの変更はこのファイルに書き込んでいく。style.cssを修正する場合、管理画面で該当箇所を探すのが面倒なので、ブラウザ上で要素を調査（検査・検証）-修正したCSSをadd.cssに追記していく。
ブログもサイトと同じテーマでCSSも共通とする場合、ブログのheader-scriptには以下を追記する（CSSをブログごとに変えたい場合は、各ブログにもadd.cssを作成し、上記のコードを追記する）。
<link href="<mt:BlogParentWebsite><$mt:BlogURL encode_html="1"$> </mt:BlogParentWebsite>add.css" rel="stylesheet">
悩んだのは、マルチブログにするかどうか。この度トライアルに移設してみたのは、以前MTで二つのブログを束ねていたサイト。WPではブログをメインカテゴリ二つに振り分け、カテゴリ→サブカテゴリにしていたのだ。
引っ越しにあたっては、MTタグにあまり深い入りしたくない。どうせ忘れているので、手を入れるにしてもなるべくシンプルに済ませたい。としたら苦手なカテゴリ関連タグよりマルチブログで制御したほうが楽そうだ、と判断する。
最初にWPのxmlデータをインポートすると、メインサイトが出来る。その後、メインサイトの管理画面からブログAとブログBを作成。こちらにも同じテーマを適用、同じWPデータをインポートして、それぞれで必要なものを残してあとは削除する。
MTMultiBlogタグではなく、<mt:Blogs>や<mt:Entries>のモディファイア include_blogs＝”” に、各ブログで設定した［識別子］（MT.netのみ有効）を記入するだけ。やはりMTはマルチブログの重層構築がすごく楽である。
マルチブログ系タグで識別子を使って複数ブログの最新記事を呼び出す
マルチブログ機能が利用できるテンプレートタグ
サイトトップページヘッダー下
二つのブログのimagesフォルダに、それぞれのイメージ画像をtop-image.jpgという名前でアップしておく。メインページに組み込まれているテンプレートモジュールtop-pagesを参考にtop-blogs*を作成、top-image.jpgを読み込み、タイトルとリンクを設定。これをメインページにインクルード。ヘッダー下に二つのブログのリンク付イメージ画像が二枚スタックされて並び、ブログタイトルと概要（ブログの設定で記入）が表示されるようになった。
メインページでは最近の投稿を二つのブログから5件読み出すように<mt:Entries>の部分を修正。
<mt:Entries limit="5" include_blogs="A,B">・・・</mt:Entries>続いて、メインサイトのメッセージを3件読み込ませるように、<mt:Entries>部分を追記（コピペし、include_blogsは削除）する。
MTはタグを間違えると、まずテンプレートファイル保存の時点でタグの閉じ忘れなどを指摘してくれ、更新でエラーになっても、ページにエラー箇所を示してくれるのがありがたい。
テンプレートモジュール category-list を作成、カテゴリに画像を設置する
現行と同じように、トップページに二つのブログのカテゴリを、それぞれ画像付で表示させる。まずは、カテゴリに画像を設置できるよう、カスタムフィールドを新規作成する（名前/ヘッダー背景画像、カテゴリ、識別子/catimage ）。共有にチェックを入れれば、全てのブログでカテゴリに画像設置が可能となる。カテゴリの設定から、それぞれの画像を選択しておく。
続いてテンプレートモジュールでcategory-list*を新規作成する。HTMLの構造はメインページの最新情報の表示箇所を参考に記述するが、<mt:Blogs include_blogs=”A”></mt:Blogs>で囲むのを忘れないこと。このファイルにカスタムフィールドの識別子で画像を読み込ませ、カテゴリタイトルと概要（カテゴリの［説明］に記載しておく）も表示させる。
参考：
カテゴリのカスタムフィールドを使ってヘッダー画像を変更する方法
ブクマ必須！カスタムフィールドの出力基本パターンをご紹介
引き続き category-listに、ブログBのカテゴリ表示用に上記のタグをコピーし、include_blogs=”B”として修正していく。こちらは、iconフォントで作った同サイズのイメージ画像のみを、カテゴリタイトルも概要もなしで横並びに設置してみた（ブログAと同じで良い場合は最初のタグinclude_blogs＝””の識別子にA,B と併記するだけでOK）。
ブログのトップページはコピペ+αで
各ブログのトップページ用にもモジュール・テンプレート category-list を（コピペで）作成し、若干手を加える。また、ブログのイメージ画像をヘッダー下部に読み込むタグと、サイトの概要などを直接書き込んでしまう（テンプレート・モジュールにしようかとも思ったが、たいした量ではないので）。
ブログAとBではトップページの表示（読み込み内容）の並び順を変えるため、タグのinclude_blogs=”A”の部分とinclude_blogs=”B”の部分を入れ替える。また、Bブログのcategory-list*には、カテゴリ概要ではなく、各記事タイトルを5件呼び出すように設定する。
*新規作成したテンプレートのサンプルコードは次ページに記載。
ヘッダーとフッター、サイドバー、各ページの表示を調整する
header-menu
ヘッダーはlogo.pngを差し替え、ヘッダー背景色をロゴの背景色と同じにし、ナビゲーションメニューの位置や色などもCSSで修正する。ヘッダー＆ナビメニューのposition:fixも解除。
テンプレート・モジュールの header-menu でナビゲーションメニューを調整していく。ナビメニューにはトップとニュースなどがすでに表示されているが、ニュース（記事一覧）は不要なので、17行目のニュース部分を削除する。
その下に新規作成したブログのタイトルとリンクを設置する。
<mt:Blogs include_blogs="ブログ識別子A,B">
<li><a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a>
</li>
</mt:Blogs>続いてフォームの一覧のお問い合わせを編集する。フォームを新規作成し、［基本設定］で項目を調整する。ウェッブページに埋め込みコードをコピペすればコンタクトフォームの出来上がり。編集画面の「グローバルナビに表示」にチェックを入れればナビメニューに表示される。他に［about］や［プロフィール］などをナビメニューに表示させたい場合は、同様にウェッブページで作成する。
footer
フッターはテンプレートモジュールの footer を修正する。ロゴ画像を差し替え、個人サイトのバナー画像やリンクを設置。ニュースへのリンクは不要なので削除。<mt:TopLevelFolders>で出力されているウェッブページ部分も削除する。
代わりに、<mt:Blogs>で二つのブログのカテゴリタイトルとリンクを表示させる。<mt:Blogs include_blogs="ブログ識別子A,B"> の中に、MTタグでブログタイトルとリンク、続けてカテゴリ名とリンクを設置する。構造はニュースの部分と同じにする。
news-sidebar
このテーマは、インデックスページと個別ページのみにサイドバーが表示される。最新記事三件、カテゴリ、年別アーカイブが並んでいる。サイトとブログを通した共通のサイドバーとするために、やはりマルチブログで最新記事やカテゴリを表示させるようにする。
その他の調整
各ページのヘッダー下のイメージ画像（divクラスUnderlayerJumbotronの部分）のタグを削除する。対称となるテンプレートはインデックスページ（［ニュース TOP］、［カテゴリ別ニュース記事リスト］、［年別ニュース記事リスト］）、及び［記事］と［ウェブページ］。また、［記事］ファイルではパンくずリストから ニュース 部分を削除。
記事ページの<$mt:Include module="social-button"$>の上に、カテゴリ別前後のページへのリンクを設置する。
<div class="zengo"><p class="newslist__prevbutton"><MTEntryPrevious by_category="1"><a href="<$mt:EntryPermalink$>">← <$mt:EntryTitle$></a></MTEntryPrevious> </p><p class="newslist__nextbutton"><MTEntryNext by_category="1"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$> →</a></MTEntryNext></p> <div>
横並び一列の左右寄せに苦労するも、以下の記事を参考にCSSを追記。
【実例あり】2016年の横並びレイアウトCSSはこれで決まり！【決定版】
[CSS3] flexboxによるレスポンシブサイトの作り方(サンプル付き)
CSS3 Flexbox の各プロパティの使い方を詳しく解説
ついでに、カテゴリ別記事リストページで、［前の10件］［次の10件］の部分も縦にずれてしまっているのを、entry-listのCSSで同様に修正する。
タイトル周りなどの色を一括で変えたい場合は、configの色指定を変更すると楽である。
ブログへのテンプレートファイルの転記と注意点
ブログのテンプレートファイルは基本的にサイトと同じにする。が、ヘッダーとフッター、パンくずリストでサイトトップを呼び出す場合は注意が必要。そのままだとブログトップになってしまうため、<$mt:BlogURL$>は<mt:BlogParentWebsite>で囲む。
ブログAではカテゴリリストを古い投稿日順にリスト表示させたいため、テンプレート・モジュール entry-list の <mt:Entries>タグにモディファイア sort_order=”ascend” を追記。これができるのもMTの優れたところ。WPだとこれだけのためにプラグインを入れなければいけない。
↓新規作成したテンプレートのコードは次ページにあります。
コメント