MT導入基礎知識

Movable Typeとは?

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

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

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

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

pingを有効に活用しよう

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

デザインのカスタマイズ

カスタマイズの前に

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

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

H1~H6タグの見え方

サイトの背景を変更する

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

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

表示内容のカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

Mapper⇒地図画像を表示する

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

参考になるサイト・情報

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

Movable Typeに関するサイト

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

相互リンク

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

よもやま話

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

ブログランキングに登録

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

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







メイン

デザインのカスタマイズ




カスタマイズの前に

ネット上を探せば便利なテンプレートが多く出回っています。
もし、オリジナルのカスタマイズしないのであれば、そういうテンプレートを使った方が楽です。

でも、自分のホームページを作るからには、自分で好きなところを好きなようにカスタマイズしたかったり、しますよね?

出回っているテンプレートでは、HTMLが大きく作り変えられていることを多いです。自分で細かくカスタマイズしようとすると、かえって難しいこともあります。
なので、ここではあえて、six apart社のMovable Typeオリジナルのテンプレートを使います。

デザインの変更には、主にスタイルシート(CSS:デザインをコントロールするシート)に手を加えますが、スタイルシートのクラス名やID名はオリジナルの名称をそのまま使っています。
他のテンプレートに変更してしまっている方は、同一のスタイル名称がない場合もありますので、注意してください。



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

タイトルバナーの雰囲気が変わるだけで、サイト全体の雰囲気が変わってきます。
文字色や背景色を変更するだけでも、ちょっとしたイメージチェンジになるものです。

ということで、変更してみましょう。
デザインのみの変更のときは、スタイルシート(styles-site.css)を修正します。

その前に、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>

デザインが関係しているタグが4箇所ありました。
id="banner"
id="banner-inner"
id="banner-header"
id="banner-description"

スタイルシート(styles-site.css)を開き、検索機能を使ってそれぞれのスタイルを探して、背景や文字に関係しそうなところを変更していきます。

#banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; }

まずこれが、タイトルバナーの文字のリンク表示の仕方を指定している部分です。
color: #fff; ⇒文字色に「白(#FFF)」が指定されています。
ネット上を探せば色見本が出てきますので、参考にしながら好きな色に変更してください。
text-decoration: none; ⇒文字飾りは「なし」のままで、変更する必要はありません。

※色見本の参考 ⇒ とほほの色入門・色見本

#banner { width: 710px; /* necessary for ie win */ background: #a3b8cc; }

続いてこれが、背景色を指定している部分です。
先ほど同様、色見本を参考に、「#a3b8cc」を好きな色に変更します。

#banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #36414d 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; font-weight: bold; line-height: 1.125; text-shadow: #36414d 0 1px 2px; }

ここは、ブログ名(banner-header)とブログ概要説明文(banner-description)のスタイルを指定する部分です。
「color: #fff;」のところは、先ほどと同じ文字色に揃えておきましょう。
文字の大きさは、「font-size: ○○px;」の数字を変更すれば変わります。好きな大きさに変更しましょう。

これで保存&再構成(S&R)して、どんな風に変わったか確認してみてください。



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

プロっぽいサイトに見せるポイントのひとつに、かっこいいタイトルバナーがあります。
画像と文字を組み合わせたタイトルバナーの画像(jpegやgif)を作って、差し替えてみましょう。

それでは、差し替え方の説明です。
まずは、タイトルバナーを作成してください。バナー作成の詳細については、ここでは省略します。画像作成ソフトを使うなり、バナー作成サービスをネットで探すなりして、お気に入りのバナーを作ってください。作ったバナーは、Movable Type管理機能の「ファイルのアップロード」でアップロードし、アップロードパス(バナーの画像ファイルを保存しているURL)をメモしておきます。

続いて、テンプレートの変更です。ページ表示に関するすべてのテンプレート(メインページ、各アーカイブページ、等)の、タイトル表示部分を変更します。

メインページ(index.html)など、いずれかの変更したいテンプレートを開いてください。モジュール化してある場合は、タイトルバナー部分のモジュールを開いてください。下記の部分がタイトルバナーを表示しているところです。

<div id="banner"> <div id="banner-inner" class="pkg"> <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"> <img src="画像のパス" border="0"></a></h1> <h2 id="banner-description"><$MTBlogDescription$></h2> </div> </div>

もとは、ブログタイトル($MTBlogURL$)と、ブログ概要説明文($MTBlogDescription$)を表示するようになっています。この部分を、画像ファイルへのリンクに差し替えます。

<div id="banner"> <div id="banner-inner" class="pkg"> <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"> <img src="画像のパス" border="0"></a></h1> <h2 id="banner-description"><$MTBlogDescription$></h2> </div> </div>

こんな感じです。
ちなみに、画像は、その属性として「代替テキスト」を設定することができます。画像の上にカーソルを置くとテキストが表示される、あれです。
設定しておいた方がSEO対策としても効果的なので、便利に設定する方法も書いておきます。

<img src="画像のパス" border="0">

この部分を以下のように変更してみてください。「alt」が代替テキストのことです。

<img src="画像のパス" border="0" alt="<$MTBlogName encode_html="1"$>-<$MTBlogDescription$>-">

こうすると、「ブログ名-ブログ概要説明文-」が代替テキストとしてセットされます。
あとは、保存・再構築すれば終了です。どうでしょう、自分らしいサイトになりましたか?



H1~H6タグの見え方

タイトルタグは、タイトル行などを強調するタグです。
基本的にはH1~H6まであり、H1はより大きな文字、H6はより小さい文字で、強調表示されます。

検索エンジンなどでは、このタイトルタグで囲まれた文字は、重要な文字であると認識することが多く、SEO対策としてもぜひ使いたいものです。

Movable Typeでは、このタイトルタグにも、CSSシートでデザインが定義されています。
単純に文字の大きさや太さが変わるだけでなく、背景色や下線等が設定されていたりするので、見栄えがよくて便利です。

それぞれのページテンプレートでも、大見出しや中見出しにタイトルタグがつけられています。
同じ見出し表示にしたいところは、同じタイトルタグを使うようにすると、見やすくなります。

ちなみに、新規エントリー(記事の投稿)の中でも、このタグを使うことができます。
ここでは、H1~H6のタイトルタグがどのように表示されるのか、試してみます。

<h1>■タイトルタグの見え方⇒ここはH1です</h1>
このようにしてh1~h6を指定してみます。

■タイトルタグの見え方⇒ここはH1です

■タイトルタグの見え方⇒ここはH2です

■タイトルタグの見え方⇒ここはH3です

■タイトルタグの見え方⇒ここはH4です

■タイトルタグの見え方⇒ここはH5です
■タイトルタグの見え方⇒ここはH6です

なるほど。
太字になってないので、なんらかのデザインが定義されていそうです。

『styles-site.css』を開いて、タイトルタグ(H1、H2、等)を検索してみると、タイトルタグすべての文字の太さを標準にするように定義されているようです。

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

ここの部分ですね。

ちなみに、ページテンプレートでタイトルタグをどのように使っているかチェックしてみると、すべてclassの指定が入っているようです。
『styles-site.css』で該当する部分を見てみましょう。

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header {
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
width: auto;
margin: 0;
border-left : 5px solid black;
padding: 5px;
color: #fff;
background : #999999 url(img/tab.gif) repeat-x center center;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}

いっぱい指定してありますね~。
試しにh3タグのクラスを<h3 class="module-header">のようにしてみると、こうなります。

<h3 class="module-header">■タイトルタグの見え方⇒ここはH3のmodule-headerです</h1>

■タイトルタグの見え方⇒ここはH3のmodule-headerです

タイトルを目立たせたり、見た目を統一させたりするのに便利な上に、SEO対策にもなるわけですから、ぜひいろいろ使ってみてください。



サイトの背景を変更する

Movable Typeの標準テンプレートを使うと、ページ背景が濃いグレーになっていますよね。この色を変更するだけで、実はかなり見た目の雰囲気が変わってきます。

では、一緒に変えてみましょう。

デザインの変更ですから、『スタイルシート』で変更できます。
インデックステンプレートの中の『スタイルシート』を開いてください。

ページの背景は、bodyクラスで指定を行います。
スタイルシートの中にはbodyクラスが複数回出てきますので、中でもページレイアウトに関する指定をしている部分を探します。真ん中あたりに『/* page layout */』と書いてある行があり、この後に記載のクラスが、ページレイアウトを指定しています。

body { min-width: 720px; color: #333; background: #36414d; }

これが、bodyクラスでレイアウトを指定している部分です。
『background』が背景色を指定する要素ですので、ここの数字を変更すれば、背景色が変わります。
色見本等を参考に、希望の色番号に書き替えましょう。

※色見本の参考 ⇒とほほの色入門・色見本

書き替えたら、保存&再構築(S&R)して、終了です。サイトを見てみると、書き替えた色の背景になっているはず。

ちなみに、色を変えるのではなく、画像を表示することもできます。
当サイトは水色の背景になっていますが、よく見ると、上が薄く下が濃いグラデーションになっています。これは、水色のグラデーションの画像を表示しているためです。

BODY { min-width: 720px; color: #333; background : url(img/bg.gif) repeat; }

繰り返し画像を表示する場合は、上記のように書き替えて、画像(上記例ではbg.gif)を「img」フォルダにアップロードします。
ストライプや水玉、花柄などを表示しても、にぎやかで楽しいサイトになりますよ。ぜひ自分好みに仕上げてみてください。



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

文字の大きさや色も、スタイルシート(デザインを規定するファイル)で簡単に変更することができます。

インデックステンプレートの『スタイルシート』を開いてください。
※参考:スタイルシートの構成については、先にこちらを参照ください。
 ⇒ テンプレートの基本的な構成

この中で、文字のサイズを指定するのが「font-size:~~」という要素、文字の色を指定するのが「color:~~」という要素です。サイトの中で、文字の大きさや色を変更したいデザインクラスのfont-sizeやcolorを変更するだけでOKです。

なお、よく変更を加える主な文字群は、大きく分けると下記の3箇所くらいです。

・archive-header
 ・・・大見出し:アーカイブページ(記事ページやカテゴリーページ)のページタイトル部分

・entry-header
 ・・・小見出し:各モジュール(記事や一覧等)のタイトル部分

・module-content
 ・・・本文:記事等のコンテンツ・本文にあたる部分

例えば、各記事の小見出し(タイトル部分)の文字を変更したい場合は、下記の部分を探してください。

.entry-header { margin-top: 0; border-left: 5px solid #dae0e6; padding: 0 0 0 10px; color: #666; font-size: 18px; }

Movable Type標準テンプレートでは、小見出しの文字色は濃グレー(color: #666;)、文字の大きさは18ピクセル(font-size: 18px;)になっています。
文字色を赤くするなら「color: #FF0000;」に、文字の大きさをやや控えめにするなら「font-size: 16px;」、というように変更して、保存&再構築(S&R)してください。

※色見本の参考 ⇒ とほほの色入門・色見本


上記の他に、ページタイトルバナー部分の文字の大きさ・色も変更することができます。
「#banner-header」や「#banner-description」が該当する部分となりますが、詳細についてはこちらで説明していますので参照ください。
 ⇒ タイトルバナーの雰囲気を変える



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

サイドバーを右から左に変更する方法は、前に説明しました。
※参考 ⇒サイドバーを右から左に変更する

位置を変えるだけでだいぶ会社ホームページっぽくなりましたが、どうもオリジナルテンプレートは色合いが暗い気がします。もっと華やかな、あるいは親しみやすい雰囲気にしたいところです。

ということで、今回はサイドバーのデザインの変えてみましょう。

デザインの変更ですから、インデックステンプレートの中の『スタイルシート』を開いてください。
idに「beta」がつく箇所がサイドバーに該当します。
「page layout」を指定するクラス群の中に、次の表記があります。

#beta { width: 200px; background: #e6ecf2; }

ここが「id=beta」のデザインを指定する部分です。
横幅を変更する場合は「width: 200px;」の右側の数値(ピクセル)を変更、背景色を変更する場合は「background: #e6ecf2;」の右側の色数値を変更すれば、サイドバー全体の幅と色が変わります。
オリジナルでは幅200ピクセル、薄いグレーになっています。

※色見本の参考 ⇒とほほの色入門・色見本

続いて、サイドバーに表示されている要素(検索小窓、最近のエントリー小窓、カテゴリー小窓、等)のデザインも変更してみましょう。

この要素のことを、Movable Typeでは「Widget=ウィジェット」または「module=モジュール」と呼びますが、テンプレートモジュールと混同しやすいので、ここではWidgetと呼びます。

Widgetは、タイトルバーとコンテンツボックスの組み合わせでできていますので、それぞれ変更していくことになります。

タイトルバー

コンテンツボックス

各HTMLテンプレートでは、以下のように記載されています。

<div class="module-○○ module"> <h2 class="module-header">(タイトル)</h2> <div class="module-content"> (コンテンツ) </div> </div>

詳細を見てみると、<div class="module-○○ module">~</div> でWidget全体のくくり、<h2 class="module-header">~</h2> でタイトル部分、<div class="module-content">~</div> でコンテンツ部分のデザイン(クラス)を指定しています。

まず、Widget全体の背景色を変更するには、スタイルシートの中から、「module」に関する指定をしている下記の部分を探します。

.module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #dae0e6; }

背景色は、「background: #dae0e6;」の右側の色数字を変更すればOKです。薄いグレーのままだと地味なので、明るめの色に変更してしまいましょう。

続いて、Widgetのタイトル部分を変更するには、スタイルシートの中から、「class="module-header"」に関する指定をしている下記の部分を探します。

.module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 5px solid #36414d; padding: 5px; color: #fff; background: #a3b8cc; font-size: 11px; font-weight: bold; line-height: 1; text-transform: uppercase; }

こうして見てみると、module-headerだけでなく、trackbacks-header、comments-header、comments-open-header、archive-headerも一緒に指定されています。従って、ここを変更すると、トラックバックやコメントを表示する部分のヘッダーデザインも変わりますので、注意してください。

主な変更内容は、文字色「color: #fff;」、背景色「background: #a3b8cc;」、文字のサイズ「font-size: 11px;」あたりでしょうか。
「border-left: 5px solid #36414d;」は、タイトル部分の左枠に表示されている濃い部分です。ここの色を変えるだけでも随分イメージが変わります。ここの太さを変えるなら「5px」を別の数字に、ここの色を変更するには「#36414d」を別の色数字に変更してください。

最後に、コンテンツ部分の詳細変更です。スタイルシートの中から、「class="module-content"」に関する指定をしている下記の部分を探します。

.module-content { margin: 0 0 10px 0; border-top: 1px solid #cfd4d9; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; }

ここでは、文字サイズ「font-size: 10px;」や、行間「line-height: 1.2;」の変更ができます。
余白(margin、padding)の変更も可能ですが、あまり変更することはないので、詳細説明はここでは省略します。

必要な修正を終えたら、保存&再構築(S&R)してみてください。お好みのサイドバーになりましたか?