MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







メイン

表示内容のカスタマイズ




カテゴリーの並び順序を変更する

普通のホームページっぽく見せたい場合、カテゴリー一覧(リンクナビの部分)の表示順序はとても重要です。
例えば、会社ホームページでこんな感じにカテゴリー名を並べたかったとします。

 HOME
 トップメッセージ
 サービス内容
 会社概要
 お問い合わせ

でも困ったことに、Movable Typeをそのまま使うと、カテゴリー名で勝手に並び替えられてしまって、こんな順序になるのです。

 HOME
 お問い合わせ
 サービス内容
 トップメッセージ
 会社概要

でも、プラグインと、ちょっとしたカスタマイズで、カテゴリー一覧表示順序を変えることができます。
今回はその内容をご紹介します。

まずは、『cutfirstchar』というプラグインをインストールしてください。
プラグインの内容やインストールに関する紹介は、「入れておきたいプラグイン」カテゴリーにありますので参照ください。
⇒ cutfirstchar⇒変数タグの最初の数文字を削除する

無事にプラグインをインストールしたら、続いて、カテゴリー名を編集します。
メニューの<環境設定>-<カテゴリー>を開いてください。
カテゴリー名の頭に3桁程度(2桁や4桁でも、何桁でもOK)の数字を、表示したい昇順で入れて登録します。
例えばこんな感じです。

 000HOME
 010トップメッセージ
 020サービス内容
 030会社概要
 040お問い合わせ

とりあえず3桁にしたのは、あとからカテゴリーを増やしたくなったときに楽なようにです。
例えば、カテゴリー数が10以上になったときは「110、120、130・・・」と増やしていけばいいし、「サービス内容」と「会社概要」の間に「価格」を入れたくなったときは「125価格」とでもすれば、他をずらしたりせずに済みます。

続いて、テンプレートのカテゴリー名を表示している部分に変更を加えます。

まずはカテゴリー一覧を表示している部分です。
各ページテンプレート(モジュール化している場合はモジュール)から、該当部分を探してみてください。


<MTIfArchiveTypeEnabled archive_type="Category">
<div class="module-categories module">
  <h2 class="module-header">カテゴリー</h2>
  <div class="module-content">
  <MTTopLevelCategories>
  <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
    <MTIfNonZero tag="MTCategoryCount">
    <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>"
     title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
    <MTElse>
    <li class="module-list-item"><MTCategoryLabel>
    </MTElse>
    </MTIfNonZero>
      <MTSubCatsRecurse>
    </li>
  <MTSubCatIsLast></ul></MTSubCatIsLast>
  </MTTopLevelCategories>
  </div>
</div>
</MTIfArchiveTypeEnabled>

この中で、 <MTCategoryLabel> となっている部分を <MTCategoryLabel cutfirstchar="3"> に変更します。
「cutfirstchar="3"」をつけることで、カテゴリー名を、最初の3桁を削除して表示することを意味します。

続いて、上記以外の、カテゴリー名を表示している部分を変更します。
「カテゴリー・アーカイブ」に <MTArchiveTitle> が複数出てくるので、すべて <MTArchiveTitle cutfirstchar="3"> に変更します。

他にもカテゴリー名を表示している部分があれば、すべて変数に「cutfirstchar="3"」を加えておけば、頭の数字3桁を削除して表示してくれます。

これで再構築をかければ、おしまい。
希望通りの順序にカテゴリーが並んでいるはずです。



エントリーの並び順序を変更する

全エントリーを日付で昇順・降順にするには、管理者画面の<設定>-<エントリーの表示数>で指定しますが、テンプレートをカスタマイズすることによって、それ以外の順序にしたり、個別に設定することもできます。

エントリーを表示している <MTEntries> タグを探して、次のように変更してみてください。

■タイトルで順序を決める場合
エントリーのタイトルを50音順に並べます。
『sort_order』は昇順・降順を指定するもので、『ascend』は昇順、『decend』は降順です。

<MTEntries sort_by="title" sort_order="ascend">


■抜粋(概要)で順序を決める場合
エントリー時に抜粋(概要)を入力している場合は、その抜粋の50音順に並べます。
※抜粋(概要)は、エントリー画面の一番下の『画面の表示設定を変更』で、入力エリア表示有無を変更できます。

<MTEntries sort_by="excerpt" sort_order="ascend">


■日付で順序を決める場合
最新記事から表示したり、掲載順に並べたり、というのを記事の場所によって変えたいときは、個別に日付順の指定をします。

<MTEntries sort_by="created_on" sort_order="ascend">


■カテゴリーを限定して、昇順・降順にする場合
いずれかのカテゴリーに限定して、日付/タイトル/抜粋(概要)の順に表示したい場合は、『category="(カテゴリー名)"』を使います。

<MTEntries category="××" sort_by="title" sort_order="ascend">


最近のエントリー一覧を表示する

最新のエントリーを一覧にして表示する、ブログによくあるあれ、入れたいですよね。
テンプレートの好きなところに、次のタグを入れると表示されます。
これもモジュールにしてしまうと、いろんなテンプレートのいろんな位置に簡単に入れられるので便利ですよ。

<MTEntries lastn="5"> <$MTEntryDate format="%m/%d"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br /> </MTEntries>

「<MTEntries>~<MTEntries>」は、エントリーがある限り繰り返すことを意味しています。
<MTEntries>タグには、以下のような細かい指定ができます。

・特定のカテゴリーだけを表示 category="カテゴリー名"
・表示する記事数を限定(例:5つ) lastn="5"
・エントリー日付の古い順から表示 sort_order="ascend"
・エントリー日付の新しい順から表示 sort_order="descend"

エントリーの表示順序については、別の記事で詳細を説明していますので、こちらも参考にしてください。
⇒ エントリーの並び順序を変更する

例えば、「コラム」カテゴリーの記事を新しい順に10件表示したいときは、

<MTEntries lastn="10" category="コラム" sort_order="descend">のようになります。

<$MTEntryDate format="%m/%d"$>は、日付です。
日付を表示したくないときは、これをすべて削除します。
日付を「年/月/日」で表示する場合は、「"%m/%d"」を「"%y/%m/%d"」に変更します。



サイドバーを右から左に変更する

Movable Typeの標準テンプレートでは、サイドバー(ナビ)は右側についています。
通常のブログであれば特に不自然ではないのですが、いわゆるホームページとして活用する場合は、リンクナビなどのサイドバーは左側に配置されていることの方が多いですよね?

ということで、右側についているサイドバーを、左側に移してみましょう。

この作業は、各ページテンプレートそれぞれに行う必要がありますが、とりあえずメインページを参考に説明します。
インデックステンプレートの中の『メインページ(index.html)』を開いてください。

<body>~</body>タグの中をじっくり見てみると、次のような大きなくくりがあることがわかるでしょうか。

<div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="alpha"> <div id="alpha-inner" class="pkg"> : : </div> </div> <div id="beta"> <div id="beta-inner" class="pkg"> : : </div> </div> </div> </div>

最初の2行(+最後の2行)が、メインページのボディとなるコンテンツをくくっているタグです。
その次の行に『alpha』という表現が入っていますが、この <div id="alpha">~該当する</div> がメインの記事部分、その次の <div id="beta">~該当する</div> がサイドバーの部分です。

※テンプレートの全体構成については、こちらを参考にしてください。
 ⇒ テンプレートの基本的な構成

現在右にあるサイドバーを左に移すには、単純に、サイドバーの部分を先に記載すればよいだけです。
つまり、 <div id="alpha">~該当する</div> と <div id="beta">~該当する</div> の位置を逆にします。以下のようになります。

<div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="beta"> <div id="beta-inner" class="pkg"> : : </div> </div> <div id="alpha"> <div id="alpha-inner" class="pkg"> : : </div> </div> </div> </div>

これで、サイドバー部分が先(左側)に、記事部分が後(右側)に表示されるようになりました。
メインページ以外のページテンプレートも同様の構成になっていますので、同じように順序を入れ替えておきましょう。



サイドバーに表示する要素を変更する

Movable Typeのサイドバーは、オリジナルのままだといかにもブログっぽいのですが、うまくカスタマイズすれば、ホームページのメニューバー(リンクナビ)っぽくなります。

サイドバーに表示する内容は、もとからインストールされている『Widget Manager』プラグインで簡単にカスタマイズすることができます。

でも、Widget Managerに標準で登録されているWidget(サイドバーに表示するコンテンツ・要素のこと)は、標準テンプレートを独自にカスタマイズしない使い方を前提としています。そのため、自分でカスタマイズしていくうちに、不便さを感じるようになります。

そこで、最初からWidget Managerを使わずに、サイドバーに表示する内容をカスタマイズできるようになってしまいましょう。

サイドバーの内容を変更するには、サイドバーの表示に関するすべてのテンプレート(メインページ、各アーカイブ、検索ページ、等)を変更します。サイドバーの部分は、テンプレートの下記タグで囲まれている部分です。

※テンプレートの全体構成については、こちらを参考にしてください。
 ⇒ テンプレートの基本的な構成

<div id="beta"> <div id="beta-inner" class="pkg"> : : </div> </div>

サイドバーに表示する各コンテンツ(Movable Typeではwidgetと呼びます)は、基本的には、『class="module-○○ module"』というようなスタイル指定がなされているdivタグで囲まれています。例えば、検索widgetなら、下記の部分です。

<div class="module-search module"> <h2 class="module-header">検索</h2> <div class="module-content"> <form method="get" action="<$MTCGIPath$><$MTSearchScript$>"> <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /> <label for="search" accesskey="4">ブログを検索: </label> <br /> <input id="search" name="search" size="20" /> <input type="submit" value="検索" /> </form> </div> </div>

表示したくないwidgetは、テンプレートの中の <div class="module-○○ module">~該当する<div> までをごっそり削除してしまえばOKです。

widgetの表示順序を変更するには、<div class="module-○○ module">~該当する<div> を記載する順序を入れ替えるだけです。

なお、中には『class="module-○○ module"』の外側(前と後)に別のタグがついているwidgetもあります。そのときは、その外側のタグまでがそのwidgetに含まれますので注意してください。例えば、カテゴリー一覧を表示するwidgetは、<MTIfArchiveTypeEnabled archive_type="Category">~</MTIfArchiveTypeEnabled> で囲まれた部分が該当します。削除や順序変更のときは、これらのMTIfArchiveTypeEnabledタグもあわせて削除・移動します。

ちなみに、いわゆるホームページっぽく見せるのであれば、カテゴリー一覧widgetと検索widgetのみにしてしまうと、すっきりしてそれっぽくなります。試してみてください。

なお、サイドバーなど、複数のテンプレートで共通に使うコンテンツは、モジュール化してしまうととても便利です。<div id="beta">から該当する</div>までを、ごっそりモジュール化してしまうことをおすすめします。
※参考 ⇒ どんどんモジュール化しよう



カテゴリー一覧にエントリーも表示する

Movable Typeのサイドバーは、うまく使えば、いわゆるホームページのメニューバー(リンクナビ)のように見えます。もっとも簡単なのは、カテゴリー一覧だけをサイドバーに表示する方法です。
※参考 ⇒ サイドバーに表示する要素を変更する

ただ、これだけだとリンク数が少なくて多少さみしい気もします。
ホームページとして見せるMovable Typeのサイトであれば、いわゆる日記としてのブログと違って、エントリー記事の数はさほど多くならないと思います。それならいっそ、すべての記事へのリンクをメニューに表示してしまった方が、アクセスしやすくなっておすすめです。

Movable Typeなら、新しい記事を追加したときに、自動的にメニューにも追加されるようになり、とても便利です。つまり、新しい記事を投稿して再構築するだけで、ホームページの更新作業が完了してしまうのです。

ちなみに当サイトが実際にそうしてありますので、左サイドバーのメニューのところを参考にしてください。以下のように、カテゴリー名と、各記事のタイトルを表示しています。
・・・ま、当サイトは記事数が多いので、ちょっとゴチャゴチャしてしまっていますが、あくまで参考までに。

カテゴリーA
 └記事A-1
 └記事A-2
カテゴリーB
 └記事B-1
 └記事B-2
 └記事B-3
カテゴリーC
 └記事C-1
  :
  :

このように表示するには、サイドバーを表示する各テンプレート(メインページ、各アーカイブ、検索ページ、等)の、サイドバーの「カテゴリー一覧」部分を変更します。

それではやってみましょう。
メインページ等の、サイドバーに表示する「カテゴリー一覧」部分を探してください。下記の部分です。
※サイドバー部分がわからない方はこちらを先に確認ください。
 ⇒ サイドバーに表示する要素を変更する

<MTIfArchiveTypeEnabled archive_type="Category"> <div class="module-categories module"> <h2 class="module-header">カテゴリー</h2> <div class="module-content"> <MTTopLevelCategories> <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>   (~省略~) <MTSubCatIsLast></ul></MTSubCatIsLast> </MTTopLevelCategories> </div> </div> </MTIfArchiveTypeEnabled>

これを、以下のように書き替えてください。

<MTIfArchiveTypeEnabled archive_type="Category"> <div class="module-categories module"> <MTCategories> <h2 class="module-header"> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> </h2> <MTEntries sort_order="ascend"> <p>└<a href="<$MTEntryLink$>"><$MTEntryTitle$></a></p> </MTEntries> </MTCategories> </div> </MTIfArchiveTypeEnabled>

<MTCategories>タグを加えることで、すべてのカテゴリー名が表示されるようになります。記事のないカテゴリー名を表示したくない場合は、<MTCategories> と </MTCategories> を削除してしまってかまいません。

カテゴリー名を表示している <$MTCategoryLabel$> の部分は、cutfirstcharプラグインを使ってカテゴリーの順序を変更している場合は、<$MTCategoryLabel cutfirstchar="3"$> のように修正してください。
※カテゴリー順序変更の詳細はこちらを参照ください。
 ⇒ カテゴリーの並び順序を変更する

また、エントリーの順序についても変更可能です。上記例では、<MTEntries sort_order="ascend"> というように更新日の昇順(ascend)を指定していますが、他の並び順がよければ修正してください。
※エントリー順序変更の詳細はこちらを参照ください。
 ⇒ エントリーの並び順序を変更する

なお、ここではエントリータイトル行を「<p>└ ~ </p>」で表示していますが、「└」を別の記号に変えたり、箇条書き風(<ul>や<li>を使ったリスト表示)にしてもOKです。

必要な修正を加えたら、保存&再構築してください。他のテンプレートも同様に修正します。これで、新しい記事をエントリーするたびに、メニューにエントリータイトルのリンクが追加されるようになります。

なお、エントリー時に自動で更新されるのはそのエントリーが関係しているページだけですので、他の記事ページや他のカテゴリーページのメニューにもリンクが追加されるようにしたい場合は、管理メニューの<サイトを再構築>で<すべてを再構築>してください。



カテゴリーページにも最新エントリー一覧を表示する

トップページにエントリー一覧を表示する方法は前にご紹介しました。
※参考 ⇒ 最近のエントリー一覧を表示する

でもこの方法で、カテゴリーページ(カテゴリーアーカイブ)にも表示しようとすると、該当するカテゴリーのエントリーしか表示されません。

これはどうやら、Movable Typeの仕様で、勝手にフィルターがかかるようになっているようです。

でも解決策は意外と簡単です。
以下のように、MTEntriesタグで指定していたところを、MTArchiveListタグに変更すれば、どういうわけか、表示されるようになります。

もともとのエントリー一覧は、こんな風になっていると思います。

<br /> <MTEntries lastn="5"><br /> <$MTEntryDate format="%m/%d"$><br /> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br /><br /> </MTEntries><br />

それを、このように変更します。

<br /> <MTArchiveList lastn="5"><br /> <$MTArchiveDate format="%m/%d"$><br /> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br /><br /> </MTArchiveList><br />

これで、カテゴリーページでも、全エントリーの一覧が表示されると思います。試してみてください。