コンテンツ マネージメント システム

ウェブサイトイントラネット
ホームページ

text : 増田"maskin"真樹

第7回

illust : 小松恵

Movable Typeを使って情報配信サイトを作る3
スタイルシートで印象をガラッと変える

ウェブサイトイントラネット
ホームページテンプレートを使えば見た目は自由に変えられる

Movable Typeの最大の魅力の1つは出し）される仕組みになっている。

「テンプレートシステム」にある。これを使・「インデックス」

えば、記事のページだけでなくスタイルシトップページや見出しリストートや XMLメタデータなどもテンプレー・「アーカイブ」ト化できる。また Movable Type独自

図1 Movable Typeの標準メニュー

個別の記事やカテゴリーページの「テンプレートタグ」を使えば、データベ・「各種機能ごと」ースから抽出する項目を自由にコントロー

コメントやトラックバックのページルすることも可能になるのだ。今回はテン

テンプレートの編集や作成は、標準メプレートシステム全体の構造と、デザインするうえで重要となるスタイルシートの編

ニューの「Templateの編集」（図1）
をクリ集の方法を紹介していく。

ックすればいい。それぞれのテンプレート
ファイルを編集することで、Blogサイトのレイアウトやデザインを定義できる。具体Movable Typeのデザインテンプレートの仕組み的にどんなものがあるか、標準でインスト

Movable Typeには「テンプレートシス（Index Template）」（図 2）リストの最上テム」というものが搭載されている。すで部に「Main Index」がある。これは出力にインストールしているユーザーならご存

ファイルが「index.html」、つまりBlogサイじの方も多いかと思うが、あえて説明してトのトップページのテンプレートで、Blogおくことにしよう。の概要や、最新の記事リストがどのようにールされているものを見てみよう（163 ページを参照）。たとえば「インデックス表示されるかを決めるテンプレートだ。

テンプレートには大きく3つの種類があり、それぞれのルールに従ってデータベー

またインデックスには、Blogサイトのス

スに 保 存されている記 事 に 適 用され、タイルシートもテンプレートとして設定されHTMLのファイルとしてパブリッシュ（書きている（Stylesheet）。スタイルシートは、

162 +++ iNTERNET magazine 2003.09 +++「Templateの編集」
をクリックすれば各種のテンプレートを編集できる。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D色や文字組み、組み方によってはレイア

で、予備のテンプレートを保管する場合なるインデックスなどのHTMLテンプレート

ウトま で も 指 定 で きるフ ァイル だ 。

どに活用できる。

は、図5のような要素を用いて構成されてMovable Typeでは、テンプレートでスタさて、その他の種類に移ろう。
「アーカいる。それぞれは DIV タグのクラスや ID

イルシートを記述すれば、自動的にそれがイブ（Archived-Related Template）」は、（要するにレイアウトパーツごとに付けられサイトに反映されるようになっている。今カテゴリーごと（Category Archive）や日た名札、たとえば「<div id="links">」）で回の解説では、このMain Indexテンプレ付ごと（Date-Based Archive）にエントリ表現されており、ほとんどがレイアウトにートとStylesheetのテンプレートを使ってーをまとめて保存するHTMLファイルのテおけるブロック単位で構成されている。

ンプレートだ。エントリー単体のHTMLフ

たとえば、BlogのページにHTMLとしてその他、Blogのサマリー情報（メタデーァイル テン プ レ ート（ Individual Entry

書き出されるMain Indexテンプレートはタ）である RSSフィード のためのテンプArchive）もここに保存されている（図3）。

以下のような構成になっている。前述したレートや、XML-PRCというアプリケーシ「その他のテンプレート」では、コメント

ョンなどからBlogを操作するときに使うメペ ー ジ（ Comment Listing Template、タ情報（RSDなど）もテンプレートで定義

Commentしておけるようになっている。必要であれ

Comment Error Template）やトラックバ

ば、さらに新しいタイプのテンプレートをック（TrackBack Listing Template）のほ登録することもできる。たとえば、RSSのか、アップロードした画像をポップアップ

新しいバージョンやFOAFといった新しいさせるときのテンプレート（Uploaded

概念のメタデータが登場したときも、比較Image Popup Template）が用意されて的容易に対応することが可能になっていいる（図4）。

カスタマイズの解説をしたい。

Preview

Template、図5 Main Indexの構成
header（各種のメタデータやJavaScript）
body・banner・content└blogるのである。

└date

これらのリストの右から 2 番目にある「Rebuild?」という項目は、このテンプレー
トからBlog のファイルを自動的に生成└blogbody

スタイルシートを入れ替えてみる└posted└blog……
・links（Rebuild）するかどうかのパラメーターだ。

└calendar

テンプレートファイルの編集画面で「Indexテンプレートシステムについて説明してTemplateをRebuildするときに自動的にきたが、Blogのルック＆フィールを変更しこのTemplateをRebuildする」にチェックたいなら、まずはスタイルシートの編集かを入れればファイルが書き出されるようにら始めるのがいいだろう。

なる。チェックを外せば何も起こらないの└side└sidetitle└side……
・syndicate

Movable Typeに標準で添付されてい図2 テンプレートの種類：インデックス└sidetitle

・powered

図3 テンプレートの種類：データ保管用

過去の記事であるアーカイブの表示に関するテンプレート。ポストした記事が非常に多くなるとカテゴリー別アーカイブ（Category Archive）のページが肥大するので修正したくなるだろう。

図4 テンプレートの種類：その他

主に使うのは「Main Index」だろう。
「Stylesheet」
を使えばデザインを大幅に変えられる。

これらのテンプレートは、特別なことがなければそのまま使っていて問題ないが、コメントを書くときに表示されるページが凝っていたら、読者もついコメントを書きたくなるかもしれない。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2003.09 +++163

とおり、body部は、デザインブロックの集るだけで、デザインに関するほとんどの要トするだけでデザインを切り替えることが合体のような構造だ。また、標準で添付素を定義できるようになっている。

できる 。 Movable Typeの ウェブ サイ

されている「stylesheet」テンプレートの構とはいえ、スタイルシートをすべて自分成は、図6のようになっている。行頭のピで作るのは比較的難しいので、まずは用「Resources」から「Default Styles」をク

リオドはDIVタグのID、#はクラスを表す。

意されているいろいろなスタイルシートをリックすれば、7種類のスタイルシートが表そのまま使ってみよう。

示され、それぞれ「SCREENSHOT」ボタ

スタイルシートは、このDIVクラス（レイトトップページの左側のメニューアウトブロック）ごとに、背景の色、枠線、Movable Typeのサイトから、標準のテ文字のフォント、大きさなどを指定できるンプレートに適したスタイルシートをいくつ好きなものをコピーして自分のBlogで使ので、スタイルシートファイルに手を加えか入手できるので、それをコピー＆ペースってみよう。標準メニューの「Templateのンでプレビューもできる。

編集」から「Stylesheet」テンプレートを選び、「Templateの中身」を全部削除してか
図6 スタイルシートの構成要素

ら使いたいスタイルシートをコピーして貼

body.blogbody a:visited,り付ける（図7）。あとは「SAVE」ボタンをA.blogbody a:active,クリックしてから「REBUILD」ボタンをクリ

A:link.blogbody a:hover

ックしてリビルドするだけだ。スタイルシー

A:visited.titleA:active#menu

トを変えるだけで、左にあったメニューがA:hover.date

右になったり、色が変わったり、記事が罫h1, h2, h3.posted

線で囲まれたりと、イメージがガラッと変#banner.calendar

わるのがわかるだろう（図8）。

#banner a,.calendarhead#banner a:link,.side#banner a:visited,.sidetitle#banner a:active,.syndicate#banner a:hover.powered.description.comments-body#content.comments-post#container.trackback-url

さて、それではスタイルシートはどのよう#links.trackback-bodyな記述でデザインを変えているのだろう.blog.trackback-post

か。先ほど比較したスタイルシートについ.blogbody.comments-head.blogbody a,#banner-commentspopて、細かいところを見てみよう。

Stylesheetテンプレートを覗いてみよう.blogbody a:link,

図7 Templateの編集前述したとおり、ここで紹介するテンプ

図8 スタイルシートをいろいろと変えたサイト

左上がデフォルトのスタイルシー
トを使ったサイト。スタイルシートを変えるだけで印象が大きく変わっているのがわかるだろう。すべ「Templateの中身」
を変更したら忘れずに「SAVE」で保存しよう。てMovable Typeのウェブサイトから入手できるスタイルシートを使ったものだ。

164 +++ iNTERNET magazine 2003.09 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

レートは、それぞれの基本構成は同じになとなっているのでグレーだとわかる。①B類を表し、この場合は 1ピクセルの実線っている。たとえば図10と図12のどちらのbackgroundが言葉のとおり背景色だ。という定義になる。

でも、構成要素として「.blogbody」がある。

ここでは #FFF なので白だ。画面と対比

このblogbodyというのは、エントリーしたすればよくわかるだろう。

ブロックごとの色の塗り分けもできる記事が表示される部分で、元サイトの画面それに対して、Trendyスタイルシートで（図 9）で言えば、右側がそれにあたる。

は（図 12）、ざっと見ただけでも項目が増

Trendyスタイルシート適用後のサイト（図えていて、さまざまな部分で変更点がある

12）
では、全体的に暗い色で統一されていのがわかる。たとえば元サイトにもあった

今度は、もう1つのスタイルシートRusty

るが、エントリー表示部分はグレーのライフォントの色（②A）
は#CCCとかなり白味を適用した場合を見てみよう（図 13、図ンで囲まれているのがわかる。これらはの掛かったグレーとなっていて、②Bの背14）。この場合、トップタイトル部、エントblogbody部に対応するスタイルシートの景色の部分では#333とほとんど真っ黒とリー部、右サイドメニューの色が3色で分記述によって変わっているのだ。

いう色が使われている。そして最大の違いけられている。

元サイトの画面（図9）とスタイルシート

は、エントリーが枠で囲まれていることにこの3か所はそれぞれ、トップタイトル部のblogbody（図10）を並べて見てほしい。

ある。②C〜②Eにある「border」関連のは「#banner」、エントリー部は「.blogbody」、この① A の部分がフォントの色で、#333記述がそれだ。
「1px solid」は枠線の種

右サイドのメニュー部は「#links」というコ

図9 デフォルトのスタイルシート

図10 スタイルシートのblogbody部分.blogbody {font-family:palatino, georgia,verdana, arial, sans-serif;
color:#333;ÅÅÅá←①A
font-size:small;font-weight:normal;
background:#FFF;Åá←①B
line-height:200%;}（Clean）
を使ったサイト

図11 Trendyスタイルシートを適用したサイト

図12 スタイルシートのblogbody部分.blogbody {font-family:verdana, arial, sansserif;
color:#CCC;ÅÅ á←②A
font-size:small;font-weight:normal;
background:#333;Å←②B
line-height:140%;
border-left:1px solid #666;ÅÅ←②C
border-right:1px solid #666;ÅÅ←②D
border-bottom:1px solid #666;ÅÅ←②E
padding:10px;}

色が変わって枠が付いた

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2003.09 +++165

ンテナで表現されている。
中心となる.blogbodyでは、③Aのフォント色（グレー）と白い背景（③B）
が指定

ザインだけでなくレイアウトも変更できるというのはimgタグの align=left と同じのだ。

で、左寄せになるだけでなく、このコンポサイドメニューの配置を指定するのはこされている。

ーネントを他のコンポーネントが回り込む

れまでと同じ#linksブロックだが、エントようになっている（図15）。

上部に相当する#bannerの③Fが、トッリーの含まれるブロックの配置を指定す

以上の説明を参考に、必要な部分を編集プ部の茶色を指定している。これは先ほるのは#contentだ。#contentは、エントしていくだけで、かなり大胆なデザインをど紹介したTRENDYスタイルシートでもリー部を含むすべてのコンテンツが並ぶすることが可能だ。さらに、スタイルシート同じで、数値を変えればトップバナー部のレイアウト部分のスタイルを決めるものとのコマンドを使えば、次のようなカスタマ色を変更できる。ここで注目したいのは、なっている。デフォルトではabsolute（④イズも可能になってくる。スタイルシートは先ほど説明した「border」が定義されていA）とmargin-left:225px（④B）とすることまだまだできることがある。専門書も多数ることだ（③C〜③E）。画面（図13）を見で、「コンテンツ部は必ず左側を225ピク出版されていると思うので、ぜひそちらをると、トップバナーの周りが点線で囲まれセル空けて配置すること」と指定されてい参考にしてほしい。ているのがわかるだろう。borderの定義る。そして、サイドメニュー#linksは普通に部分で「dotted」という単語があるが、これ配置すれば左端になるので、その幅を200・フォントを変えるが点線を示している。

ピクセルに指定するというわけだ（④C）
。

用意されているスタイルシートは英語用の

また、#linksでは、明るいオレンジ色の背景（③G）
が定義されている。

スタイルシートでレイアウトも調整できるエントリー部が右にあるTrendyやRusty

ものなので、フォントには英語が指定されでは#contentはどのように書かれていたている。フォントを変えるだけでも見た目のか見てみると、④Dと④Eの部分で「コの印象は大きく変わるものだ。表示に使ンテンツ部は、常に左寄せで、ブラウザー

うフォントを変えるには、各ブロックのウィンドウに対して65％の比率を保つ」とfont-familyを変更する。どんなフォントをいう定義がされている。④Eの「float:left」

指定すればいいかがわからない場合は、ところで、デフォルトの表示（図9）では左にあるサイドメニューが、その他のスタイルシートを使った表示では右側にあるのに気づいただろうか。スタイルシートはデ

図13 Rustyスタイルシートを適用したサイト

図14 Rustyスタイルシート【エントリー部】.blogbody {font-family:verdana, arial, sans-serif;
color:#666;ÅÅá←③A
font-size:small;font-weight:normal;
background:#FFF;ÅÅ←③B
line-height:16px;}【トップタイトル部】#banner {font-family:georgia, verdana, arial,sans-serif;
color:#FFF;
font-size:x-large;
font-weight:bold;border-left:1px dotted #FFF;ÅÅ←③C
border-right:1px dotted #FFF;ÅÅ←③D
border-top:1px dotted #FFF;ÅÅ←③E
background:#993300;ÅÅ←③F
padding:15px;}

レイアウトの境界線に施された枠線が「点線」になっている

166 +++ iNTERNET magazine 2003.09 +++【右サイドメニュー部】#links {background:#FF9933;ÅÅ←③G
padding:15px;
border:1px dotted #FFF;}

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

思い切ってfont-familyの行を削除してしる。ここではrakurakucms.gifがロゴファ

まい、ブラウザーのデフォルトのフォントでイルなので、自分で使うロゴファイルの名用のサイトも参考にしてほしい表示させるのも手だろう。

前に変えること。のブログ内

実際に MT で作った本連載のサポート。筆者にも「CMS」というカテゴリーが用意されているので最新動向はここでチェックだ。

・HTMLタグごとのデザイン<div id="banner">

たとえば、筆 者 の B l o g「 M E T A M i X !

<h1>maskin's Blog」では、次のような行をス<a href="<$MTBlogURL$>" >タイルシートに追加しており、blockquote<img src="images/rakurakucms.gif"

タグを使った際、色の付いた枠が表示さ

border="0"><br /><$MTBlogName$>

れるようになっている。

</a>Movable Typeウェブサイト

http://www.movabletype.org/「ラクラクCMSブログ」

http://www.metamix.com/rakuraku/
METAMiX! maskin's Blog</h1>

http://www.metamix.com/</div>

blockquote{ border-width:thin;border-color:#29737b;borderstyle:solid;padding:5px;}

MTの書籍が発売されます！

まとめ

HTMLさえ知っていればカスタマイズできる

Movable Typeを使ったBlogの入門書がイン

今回はスタイルシートを使ったカスタマ

プレスから8月4日に発売される予定だ。筆者

イズを説明した。もちろんスタイルシートも製作に携わっているので、発売日には書店やの知識がないとすごく凝ったカスタマイズウェブ書店でチェックしてほしい。

スタイルシートだけでなく、もちろんテンはできないが、いろいろと試してみるといプレートのHTMLを直接編集することでもいだろう。多少スタイルシートの変更に失カスタマイズできる。冒頭で説明したとお敗しても、重要なコンテンツが消えたりしり、Main Indexなどのテンプレートは、ないのがCMSのいいところだ。さて、MT基本的にHTMLの構造になっている。そでの表示のカスタマイズには、今回紹介『 Movable Typeでれでは、早速ページの最上部にロゴを配したもの以外に「テンプレートタグ」とい今すぐできる置してみよう。

う重要な機能がある。次回は、CMSの柔

ウェブログ入門』
240ページ／B5変型／

ロゴの画像をアップロードしたら、Main

軟さをさらに活用できるテンプレートタグ

定価（本体1,800円＋税）

Indexテンプレートのbannerのブロックにの使い方を学んで、Movable TypeによISBN:4-8443-1812-8

次のようにごく普通の<img>タグを記述するCMS構築の深層へさらに進んでいこう。

図15 スタイルシートによるレイアウトの指定

図16 テンプレートを編集してタイトルロゴを入れた【Trendyスタイルシートの#content部分】【デフォルトのスタイルシート】#content {position:absolute;←④A
background:#FFF;margin-right:20px;
margin-left:225px;←④B
margin-bottom:20px;
border:1px solid #FFF;}#content {float:left;←④D
width:65%;←④E
background:#333;
margin-right:15px;
margin-bottom:20px;}#links {padding:15px;
border:1px solid #FFF;
width:200px;←④C}
この連載と連動したBlogにめちゃめちゃカッコ悪いロゴを配置した。みなさんはぜひ、ページが映えるロゴを配置していただきたい。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2003.09 +++167

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.