MT導入基礎知識

Movable Typeとは?

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

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

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

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

pingを有効に活用しよう

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

デザインのカスタマイズ

カスタマイズの前に

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

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

H1~H6タグの見え方

サイトの背景を変更する

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

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

表示内容のカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

Mapper⇒地図画像を表示する

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

参考になるサイト・情報

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

Movable Typeに関するサイト

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

相互リンク

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

よもやま話

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

ブログランキングに登録

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

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







メイン

MT導入基礎知識




Movable Typeとは?

Movable Typeは、簡単に言ってしまえば、ブログを作るソフトウェアです。
ちょっと専門的にいうと、CMS(Contents Management System:コンテンツ管理システム)と呼ばれるものです。

ブログといえばyahoo!ブログ、楽天ブログ、Livedoorブログ、等々ちまたにあふれかえっていますが、ここで作れるブログというのは、「間借り」をしたものになります。これをASP型といいますが、Yahoo!さんや楽天さんのブログ管理システムを使わせてもらうわけです。

Movable Typeはどうかというと、そのブログ管理システムそのものを自分で持つことができてしまうソフトウェアなのです。自分のドメイン(URLアドレス)、自分のサーバーにインストールして、自分だけのカスタマイズをすることができます。サーバインストール型CMS、なんて呼んだりします。

CMSのなかでもMovable Typeの人気が高い理由は、第一に、無償インストールができること(ただし、非営利の個人での利用に限る)。とりあえず使ってみれるわけです。
そして、自由度がとても高いこと。勝手なカスタマイズが許可されているのはもちろんのこと、プラグインやテンプレートをみんなが自由に作って配布しているので、活用の幅を広げやすいのです。

でもね、誰でもできるほど、簡単なわけじゃないです。
特に文系であれば、時に発狂しそうになりながらカスタマイズをする、そんなM的な楽しみ方をするのがいいのかもしれません。

Movable Typeに興味を持った方は、ぜひ一緒にチャレンジしてみましょう!



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

Movable Typeを導入したい!と思っても、ドメインやサーバーがなくては話は始まりません。

新しいサイトを作るということを説明するとき、新しい家を建てることによく例えられます。

ドメインは、その家を特定する住所のようなものです。
例えば、http://www.domain.comであれは、インターネット上の「domain.com」という場所を指し示します。このときの「www」はサブドメインと呼びますが、別のサブドメインなら、「domain.com」というマンションの別の棟があると思えばわかりやすかもしれません。
また、http://www.domain.com/news.htmlの「news.html」は、そのマンションの部屋を指しているようなものです。http://www.domain.com/service/01.htmlなら、「service階の01.html号室」みたいな感じでしょうか。

続いてサーバーですが、これはその家を建てる土地のようなものです。
実際の家の場合は目に見える土地の上に建てていきますが、サイトの場合は、インターネットという仮想のサイバー空間に作ることになります。自分でサーバーを構築するのは難しく、一般的には、サーバー提供会社から、そのスペースを借りるのです。

なんとなくイメージしてもらえたでしょうか?

理屈はどうであれ、ホームページを作りたければ、まずはドメインを取得し、レンタルサーバーの契約をしてしまいましょう。
ネットで検索すれば、いろんなドメイン管理会社やレンタルサーバー会社が出てきます。
使いやすそうなところに決めて、手続きしてしまいましょう。

おすすめのドメイン管理会社とレンタルサーバー会社も紹介しておきます。
ここは私が使っているところです。
Movable Typeも搭載しやすいですし、とにかく安くて安定しているのがよいです。

◎ドメイン取得・管理
ロリポップ!
格安ドメイン取得サービス─ムームードメイン

◎レンタルサーバー契約
ムームードメイン
ロリポップならMovableType設置マニュアルも充実。
あなたも月々263円でブログデビューしてみよう!!



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

ドメインとサーバーの準備ができたら、さっそくMovable Typeをインストールしてみましょう。

※ドメインとサーバーの手配をまだしていない方は、先にこちらをご覧ください。
 ⇒ ドメイン取得とサーバー確保

まず、six apart社のサイトよりMovable Typeをダウンロードしてください。
ダウンロードには、「ライセンス購入」が必要です。個人で営利目的ではないサイトを作る場合は「無償ライセンス(無料)」でOKです。でもそれ以外の場合は、「基本ライセンスパック」を購入しましょう。
⇒ six apart社Movable Type


■Movable Typeのインストール方法

ここで細かく説明しようかと思ったのですが、ロリポップサーバーを利用する場合のインストール方法については、six apart社のサイトに詳しい説明がありました。
こちらを見ていただく方が話が早そうなので省略させてもらいますね。。。
⇒ Movable Typeインストールガイド





HTMLとCSSを理解する

Movable Typeをカスタマイズするにあたり、HTMLとCSSに関する基礎的な知識くらいはあった方がよいです。
それぞれ何を意味するのか、簡単に説明しておきます。
でも詳細のお勉強は、他に参考になるサイトがいっぱいあるので省略です。


■HTML(HyperText Markup Language)とは
簡単に言ってしまうと、ホームページのコンテンツをWEBブラウに表示するための言語です。
『タグ』と呼ばれる指示用語を用いて、文章や図をレイアウトしたり表示したりします。

タグは、<>で囲んだ指示命令文です。
多くのタグは開始タグ(例:<div>)と終了タグ(例:</div>)のセットで使われ、開始と終了タグで挟まれた部分の内容の表示方法を、そのタグで指定します。

また、HTML文書では、大きく分けると2つの要素に分かれます。
ひとつはhead要素。そのページのタイトルや、そのページの表示方法に関する情報等を記載します。
もうひとつはbody要素。これがメインの部分です。ここで指示した内容が、実際のWEBブラウザに表示されます。


■CSS(Cascading Style Sheets)とは
色、フォント、レイアウトなど、デザインや見た目を定義するシートです。
HTMLでもある程度デザインを定義することができるのですが、最近はHTMLをできるだけシンプルにし、デザインはCSSでコントロールするのが一般的になっています。

複数のHTML文書を作るときも、同じCSSシートにリンクを貼り、共通のデザイン要素を使うことで、CSSを変更するだけですべてのHTML文書の表示デザインを変更することができるようになります。


参考サイトカテゴリーに、HTMLやCSSの勉強ができるサイトを紹介しますので、ぜひ覗いてみてください。
ほんのちょっと勉強しておくと、Movable Typeのカスタマイズもぐーんとやりやすくなりますよ。



テンプレートって何?

Movable Typeは、複数のテンプレートで構成されています。それぞれの役割をしっかりつかんで、効果的にカスタマイズしましょう。

それでは、Movable Typeの<テンプレート>画面にある4種類のテンプレート群について、簡単に説明しましょう。

1.インデックス
サイトを構成する基本的なページ・コンテンツを作るテンプレートです。
トップページ(メインページ)や、スタイルシート、RSS、Atomフィードなどがあります。
カスタマイズに使うのは、『メインページ(index.html)』『アーカイブページ(archives.html)』『スタイルシート(styles-site.css)』です。
他はへたに触るとトラブルの元になるので、触れないようにしましょう。

2.アーカイブ
トップページ以外のページを作るテンプレートです。
カテゴリーページを作る『カテゴリー・アーカイブ』、個別エントリーページを作る『エントリーアーカイブ』、月毎・週毎等のページのベースとなる『日付アーカイブ』テンプレートがあります。
ここのテンプレートはお好みにカスタマイズしていきましょう。

3.システム
動的なページなど、システムが関係するテンプレートです。
コメントプレビュー、コメントエラー、ダイナミックページエラー等のテンプレートがあります。
初心者にカスタマイズできるのは『検索結果』くらいです。他は無視しておきましょう。

4.モジュール
各テンプレートに共通で使える部品・要素を切り出したものをモジュールといいます。
タイトルバナーやメニュー表示、フッターなど、複数のページで共通に使いたいものはどんどんモジュール化していきましょう。



プラグインって何?

追加機能を提供するための小さなプログラムのことを『プラグイン』といいます。

Movable Typeでは、もとから搭載されている機能だけでは実現できないことも、プラグインを利用することで実現可能になります。アプリケーションそのものに手を加えなくても手軽に機能追加できる、便利な仕組みです。

Movable Type用のプラグインは数多く開発されており、それぞれ有料や無料で配布されています。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>部分もモジュール化できますが、ここはよく見ると各ページテンプレートで少し異なっています。
なので共通のモジュールにはできないので注意してくださいね。



pingを有効に活用しよう

ブログタイプのホームページは、アクセスアップにつなげやすいです。
その理由のひとつが、ping送信機能によるもの。ping送信することで、多くのブログ読者の目に触れやすくなります。

ところで「ping」って何?
初心者であれば、ここから疑問を持つ方も多いのではないかと思います。
ということで、まずpingの説明から始めます。

pingとは、インターネットやイントラネットなどのTCP/IPネットワークを診断するプログラムのことです。・・・というとちょっと小難しいので、ここではこれ以上詳しいことは書きません。

ブログの世界で活用されるpingは、簡単に言ってしまえば、ブログの更新を通知する仕組みのことです。インターネットには色々なブログの更新情報を収集し、その情報を掲載しているサイトがあります。そういったサイトを 「Pingサーバ 」と呼びます。このPingサーバに対して、更新したことを通知することを「Ping送信」といいます。

PingサーバにPingを送っておけば、そのサイトを訪れる人に、自分のブログの更新情報を知らせることができます。つまり、たくさんのPingサーバーにPing送信すれば、新着情報や最新ブログといったリストに載る確率が上がるのです。

Movable Typeにも、pingを簡単に送信できる仕組みがついています。
管理画面の<設定>-<新規投稿> で、基本的な更新pingの設定ができます。エントリー画面でも、左下の<画面の表示設定を変更>をクリックして「トラックバック送信先のURL」にチェックを入れれば、新しい記事を作成するその都度に送信先を設定することもできます。

よく利用されるping送信先を以下に掲載しておきます。

http://rpc.reader.livedoor.com/ping
http://ping.rss.drecom.jp/
http://ping.ask.jp/xmlrpc.m
http://ping.fc2.com
http://blog.goo.ne.jp/XMLRPC
http://blogstyle.jp/xmlrpc/
http://rpc.technorati.com/rpc/ping
http://ping.namaan.net/rpc/
http://www.blogoon.net/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://api.my.yahoo.co.jp/RPC2
http://ping.bloggers.jp/rpc/
http://rpc.weblogs.com/RPC2

この他にも、ブログランキングサイト等に積極的に登録し、各ランキングサイトのping送信先を加えるとよいでしょう。どんどんping送信して、アクセスアップを目指しましょう!

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



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

Movable Typeのそれぞれのテンプレートを開いてみると、タグやクラスがずら~っと並んでいて、一見とても難しいように見えます。これだけで「うへ~」と思う方も多いかもしれません。

でも、基本的な構成を頭に入れてしまうと、もう少し見やすくなります。
各ページを構成するテンプレート(メインページ、アーカイブページ、等)は、すべて基本的な構成は一緒です。

※テンプレートの種類についてはこちらを参照ください。
 ⇒ テンプレートって何?

どのような構成になっているか、図示すると以下のようになります。

head(サイト・ページに関する情報を記述)
body(ブラウザに表示する内容を記述)
container
banner
pagebody
alpha beta
バナーを変えるならbannerに関する部分を、右側のサイドバー(リンクナビ部分)に表示している内容を変えるならbetaの部分を探して、必要な修正をかけます。 やみくもに探すよりは、全体の構成がわかると探しやすいのではないでしょうか。

続いて、スタイルシートについてです。
Movable Type標準テンプレートのスタイルシートはわかりにくいと、よく言われます。その理由は、同じ名称のクラスが分割して記載されているからです。

例えば、『body』タグのデザインを指定する『body』クラスタグが、スタイルシートの中に何度も出てきます。
しかしこれも、Movable Typeのスタイルシートの構成を理解すると、少しわかりやすくなります。
その構成は、次のようになっています。

basic elements 余白(margin、padding等)の基本要素群
page layout(1) ページや枠内での相対的な表示位置を指定する要素群
content コンテンツ(記事部分)のデザインを指定する要素群
modules(1) モジュール部分の表示位置を指定する要素群
basic page elements 基本的な文字のフォント・サイズ・色等を指定する要素群
page layout(2) 大きさ(幅・高さ)や背景色など、様々なレイアウトを指定する要素群
modules(2) モジュール部分の余白や背景色を指定する要素群

ここには基本的なもののみを抜粋しました。
スタイルシートの中には、特定のモジュールのみに使用する要素群もあります。でも滅多に使うことはないので無視していても問題ないでしょう。

デザインの修正をしたいときは、上記の構成を参考に、該当する要素がありそうなところをすべて見るようにしてください。
再度書きますが、Movable Typeの標準スタイルシートでは、同一のクラス要素が複数回出てきます。あれおかしいな?と思ったら、見逃している同一名称のクラスが他にないか、探してみるようにしてください。