MT導入基礎知識

Movable Typeとは?

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

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

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

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

pingを有効に活用しよう

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

デザインのカスタマイズ

カスタマイズの前に

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

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

H1~H6タグの見え方

サイトの背景を変更する

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

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

表示内容のカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

Mapper⇒地図画像を表示する

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

参考になるサイト・情報

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

Movable Typeに関するサイト

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

相互リンク

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

よもやま話

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

ブログランキングに登録

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

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







« CatEntries⇒特定カテゴリーを表示させないようにする | メイン | Movable Typeに関するサイト »

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




複数のページテンプレートで共通するコンテンツや要素は、共有できると便利ですよね。
それを実現するのが、『モジュール』です。

モジュールは、共有したい部分を部品化・パーツ化して登録しておくものです。
各ページテンプレートでは、そのモジュールを呼び出す指示文さえ入れておけば、WEBページが作成されるときに自動的にモジュールの内容が挿入されます。

使い方は、まず、該当する部分のHTMLタグを「新規モジュール」として、適当な名前をつけて保存します。
あとは、モジュールを使いたいページテンプレートに、<$MTInclude module="(モジュール名)"$>という変数を入力するだけです。
再構築でHTMLページが作成されるときに、変数部分が、登録したHTMLに勝手に置き換わって表示されます。


■タイトルバナーをモジュールにしてみよう
各ページテンプレートで共通にしたいものといえば、まずはタイトルバナーの部分。
ということで、試しにモジュールにしてみましょう。

テンプレートのメインページ(index.html)を開いて、以下の部分を探してください。
これが、タイトルバナーを表示している部分です。けっこう上の方にあります。

<div id="banner"> <div id="banner-inner" class="pkg"> <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a> </h1> <h2 id="banner-description"><$MTBlogDescription$></h2> </div> </div>

この内容をとりあえずテキストファイルにでもコピーしておいて、次はモジュールテンプレートの画面を開いてください。
右上の「モジュールを新規作成」をクリックし、登録画面のコンテンツ部分(中央の白い四角内)に、コピーした内容を貼り付けます。
モジュール名は、適当に「title-banner」とでもして、保存します。

では、メインページ(index.html)に戻りましょう。
先ほどのタイトルバナーの部分をそっくり削除して、変わりに以下の変数を入力します。

<$MTInclude module="title-banner"$>

『MTInclude』は、モジュールを呼び出す指示文です。
これでS&R(保存+再構築)すると、MTIncludeによってタイトルバナー部分が表示されるようになります。
・・・見た目は前と変わらないのでホームページ上では違いはわかりませんけどね。

同様に、アーカイブページ、カテゴリー・アーカイブ、エントリー・アーカイブ、検索結果、等のテンプレートもタイトルバナー部分をモジュールの変数に置き換えてしまいましょう。
こうしておけば、「title-bannerモジュール」を編集すればすべてのページに変更が反映できちゃいます。


■モジュール化すると便利なパーツ
他にも、複数のページテンプレートで使っているコンテンツはすべてモジュール化しちゃいましょう。
特にナビ部分に表示しているコンテンツはすべてモジュールにしてしまうと便利です。

・検索ボックス

<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>

・最近のエントリー

<div class="module-archives module"> <h2 class="module-header">最近のエントリー</h2> <div class="module-content"> <ul class="module-list"> <MTEntries lastn="10"> <li class="module-list-item"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li> </MTEntries> </ul> <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得 </a><br /> [<a href="http://www.sixapart.jp/about/feeds">フィードとは </a>] </div> </div>

・カテゴリー(リンクナビのところ)

<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>

・アーカイブ(過去記事表示のところ)

<MTIfArchiveTypeEnabled archive_type="Monthly"> <div class="module-archives module"> <h2 class="module-header"> <a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2> <div class="module-content"> <MTArchiveList archive_type="Monthly"> <MTArchiveListHeader><ul class="module-list"> </MTArchiveListHeader> <li class="module-list-item"><a href="<$MTArchiveLink$>"> <$MTArchiveTitle$></a></li> <MTArchiveListFooter></ul></MTArchiveListFooter> </MTArchiveList> </div> </div> </MTIfArchiveTypeEnabled>

・ライセンス表示

<MTBlogIfCCLicense> <div class="module-creative-commons module"> <div class="module-content"> <a href="<$MTBlogCCLicenseURL$>"> <img alt="クリエイティブ・コモンズ・ライセンス" src="<$MTBlogCCLicenseImage$>" /></a><br /> このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>"> クリエイティブ・コモンズ・ライセンス</a>. </div> </div> </MTBlogIfCCLicense>

ちなみに、<head>~</head>部分もモジュール化できますが、ここはよく見ると各ページテンプレートで少し異なっています。
なので共通のモジュールにはできないので注意してくださいね。



最新記事一覧