MT導入基礎知識

Movable Typeとは?

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

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

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

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

pingを有効に活用しよう

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

デザインのカスタマイズ

カスタマイズの前に

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

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

H1~H6タグの見え方

サイトの背景を変更する

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

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

表示内容のカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

Mapper⇒地図画像を表示する

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

参考になるサイト・情報

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

Movable Typeに関するサイト

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

相互リンク

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

よもやま話

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

ブログランキングに登録

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

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







メイン

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




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

最初の(=first)文字(=char)を切り取る(=cut)、というプラグインです。
six apart社が紹介している登録プラグインのひとつです。

様々な用途に使えそうですが、特に、文字コード順に並んでしまうカテゴリーを並び替えたいときに、とても便利です。

カテゴリー名の最初に数字を入れることで表示順序をコントロールし、ホームページに掲載するときはこのプラグインで数字を削除してしまう、ということが可能です。
※カテゴリーの並び替えについてはこちらを参照ください。
⇒ カテゴリーの並び順序を変更する


■『cutfirstchar』プラグインの設定方法

プラグインのダウンロード・設置方法は、こちらに詳細がありますので参照してください。
⇒ cutfirstcharプラグイン
  (six apart社の登録プラグインページへリンクしています)



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

エントリー一覧で“特定カテゴリーのみを表示する”方法は、タグで調整可能なことを先日ご紹介しました。
⇒ 最近のエントリー一覧を表示する

でも、“特定カテゴリーを表示しない”タグはありません。
そこで、特定カテゴリーを表示しないようにすることができるようになるプラグインをご紹介します。


■『CatEntries』プラグインの設定方法
 1.プラグイン『CatEntries』をダウンロード
 2.拡張子を『.pl』に変更(『CatEntries.pl』になります)
 3.Movable Typeのpluginsフォルダ下にアップロード
 4.テンプレートの、特定カテゴリーを表示したくない部分のエントリータグを変更
   <MTEntries> ⇒ <MTCatEntries exclude="(カテゴリー名)">

(設置例)

<MTCatEntries exclude="030日記" lastn="5"> <$MTEntryDate format="%m/%d"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br /> </MTCatEntries>


CatEntries』プラグインのダウンロードはこちらからできます。
英語ですが、ダウンロードは難しくないです。最初の方にある「Download CatEntries」を右クリックして、<対象をファイルに保存>すればOKです。
⇒ CatEntriesプラグイン



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

ホームページをブログタイプで作成する利点のひとつに、ping送信によるアクセスアップがあります。

※参考:ping送信って何?という方は先にこちらを見てくださいね。
 ⇒ pingを有効に活用しよう

でもこのping送信、Movable Typeの標準の状態だと、新しい記事を初めて「公開」にしたとき1回だけ送られるものになっています。

せっかくだから、記事の内容を更新するときにもping送信できるようになってたらいいと思いませんか?
エントリー画面で毎回ping送信先を入力してもいいのですが、どうせなら自動で送られると便利ですよね。

ということで今回ご紹介する『Update-n-Ping』プラグインは、記事を更新保存するたびに。自動的にping送信してくれるようになるものです。


■『Update-n-Ping』プラグインの設定方法

導入はとても簡単です。

1.配布サイトから「update-n-ping.pl」をダウンロードする
2.Movable Typeのpluginsディレクトリ下に「update-n-ping.pl」をアップロードする
3.管理画面の<設定>-<プラグイン>を開く
4.『Update-n-Ping』の<設定を表示>を開き、ping送信先を入力・保存する


プラグインはこちらからダウンロードできます。
⇒ Update-n-Pingプラグイン



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

会社ホームページっぽいサイトにしようと思うと必要になるのが、問い合わせフォーム。
これも便利なプラグインが用意されていますので、紹介します。

一見ちょっと難しそうですが、「Movable Type標準テンプレート用サンプル」をダウンロードして、そのまま使ってしまえば何とかなります。


MailFormプラグインの設定方法
1.藤本 壱さんのサイトから『MailForm』プラグインをダウンロードして解凍
2.Movable Typeの「plugins」ディレクトリにアップロード
3.「plugins」-「MailForm」-「mt-mail-form.cgi」の属性をCGI用に変更(ロリポップサーバーなら755)
4.メールフォームを表示するHTMLテンプレートをアップロード
5.メールフォームを表示するファイルへリンクを貼る

プラグインは、藤本 壱さんのサイトからダウンロードできます。最新の更新情報等もこちらでチェックしましょう。
⇒ メールフォーム作成用プラグイン

メールフォームのHTMLも、自分で作ると難しいので、標準テンプレート用サンプルを使わせてもらいましょう。ここでダウンロード&設置方法が確認できます。
⇒ Movable Type標準テンプレート用のサンプルメールフォーム

※補足:six apart社でも、登録プラグインとして紹介しています。こちらも参考にしてください。
⇒ http://www.sixapart.jp/movabletype/plugins/mailform.html
  (six apart社の登録プラグインページへリンクしています)


■メールが送信できないときは?
私も最初に設定したときは、テストメールが送られずに悩みました。でもどうやら、標準プラグインのスパムチェックがかかってしまって送れなかったようです。

テストメールを<送信>したときに、エラーメッセージ「スパムチェックのため送られませんでした」等のメッセージが出た場合は、下記の設定変更をしてみてください。

<システム・メニュー>-<プラグイン>-<SpamLookup - リンク>-<設定>
ここで、「リンク数」の最初のチェックボックスのチェックを、クリックして外します。
その状態で<変更を保存>してください。これで送れるようになると思います。



Mapper⇒地図画像を表示する

会社のホームページといえば、所在地も記載しますよね。
せっかくなら地図でわかりやすく表示したいものの、地図なんて自分ではなかなか作れるものではありません。

そこで重宝するのが、今回ご紹介する『Mapper』プラグインです。
このプラグインは、住所は緯度経度などの情報をもとに、Google Mapなどの地図画像を無料で表示してくれます。


■『Mapper』プラグインの設置方法

1.Google Maps API Keyを取得する
  ⇒ Google Maps API
英語でいろいろ書かれていますが、通常のインターネットサイトへの利用であれば問題ありません。
※イントラネットや違法性のあるサイトには利用できません。
「Sign up」ページ最後のチェックボックスにチェックし、Movable TypeをインストールしているURL(ブログのURLではないので注意)を入力して「Generate API key」をクリック⇒googleアカウントにログインしていない場合は、メールアドレスと適当なパスワードでアカウント作成・ログイン⇒キーコードが発行されます。

2.Mapper.zipをダウンロードし、解凍する
  ⇒ Mapperダウンロード:Hirotaka Ogawaさんのサイトへ

3.Mapper.plをMovable Typeのpluginsディレクトリにコピーする

4.管理画面「プラグインの設定」で、Mapperプラグインの「設定を表示」し、1で取得したAPI Keyを入力して<変更を保存>する

5.地図を表示させたい場所を <MTMapper>~</MTMapper> タグで囲み、 [map:address] で地図の表示先を指定する(詳細後述)
・MTMapperタグには次のオプション(アトリビュート)を付記することができます。
  width="size" :描画する地図の横幅を指定。デフォルトは400px。
  height="size" :描画する地図の縦幅を指定。デフォルトは300px。
  zoom="zoom-level" :描画する地図のズームレベルを指定。デフォルトは15。
・address部分(地図表示先)は「東京都○○区○○1-1-1」のような住所表記のほか、「x経度y緯度(例:x139.729116y35.660391)」もしくは「緯度,経度(例:35.660391,139.729116)」のような「座標」表記も記述できます。


■地図を表示させる方法(2通りあります)

A.エントリー記事内に地図を表示させる場合

1.エントリー記事の表示に関係するテンプレート(※)の <body> タグのあとに <MTMapper> タグ、 </body> タグのあとに </MTMapper> タグを追加して保存
※標準なら、メインページ(index.html)と各アーカイブ(エントリー・アーカイブ、カテゴリー・アーカイブ、等)

以下は、メインページにMapperタグを追加した例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> <head>  ~省略~ </head> <body class="layout-two-column-right main-index"> <MTMapper> <div id="container"> <div id="container-inner" class="pkg"> ~省略~ </div> </div> </MTMapper> </body> </html>

2.エントリー記事内の、地図を表示させたい場所に以下のmapタグを記述

[map:東京都○○区○○1-1-1]

このとき、自動改行にしている場合は、行の前後に改行を1行入れてください。
自動改行にしていない場合は、<div>[map:東京都○○区○○1-1-1]</div> のようにdivタグで挟んでください。

B.ヘッダーやナビ部分など、エントリー記事以外の場所に地図を表示させる場合

各テンプレートの表示させたい場所に、以下のタグを入力します。

<MTMapper> <div class="adr">東京都○○区○○1-1-1 (Sorry, this address cannot be resolved.)</div> </MTMapper>


※参考:six apart社のホームページでも紹介されています。ここにも詳しい設定方法の記載がありますので参考にしてください。
 ⇒ Mapperプラグインの紹介
  (six apart社のサイトへリンクしています)



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

せっかくMovable Typeを導入しても、HTMLの知識がないと、ベタ書きのエントリーしか作れません。文字の大きさを変えたり、色をつけたり、フォントを変えてみたり、変化をつけられるようになると、ホームページももっと華やかになります。

そこで導入したいのが、HTMLエディター。HTML知識がなくてもエントリー記事の装飾を可能にした、『TinyMCE』プラグインがとても便利です。

このプラグインを導入すると、エントリー画面に、ワード(Microsoft Word)のようなツールバーが表示されるようになります。ワードを使ったことがある方なら、感覚的に文字装飾ができるようになります。


『TinyMCE』プラグインの設置方法
 1.Toshihiro Gamoさんのページよりダウンロード・解凍
   ⇒ TinyMCEダウンロードページへ
 2.Movable Typeをインストールしているサーバーに、
   mt-staticフォルダ、phpフォルダ、pluginsフォルダをアップロード
   (フォルダの中身を、同一名称のフォルダ下にアップロードしてもOK)


以上で設置完了です。
次に新規エントリー画面を開いたときには、便利なツールバーが表示されているはずです。


※補足:six apart社のサイトでも紹介しているプラグインです。こちらも参考にしてください。
 ⇒ TinyMCEプラグイン
  (six apart社の登録プラグインページへリンクしています)