ブログカスタマイズのヒント Movable Type 文=境祐司 · ある。Movable...

CUSTO

MIZE!

page

サーバインストール型の人気ブログツール。2004年6月に日本語版が登場してから数回のバージョンアップを経て、執筆時点では3.171がリリース中。レンタルサーバに代表されるように、自前のサーバにインストールして管理できるので、ブログデザインに制限はない。url. www.sixapart.jp/movabletype/

CUSTO

MIZE!

page

ブログカスタマイズのヒントMovable Type

カスタマイズの手順は、既存のテンプレートをベースにして変更したい個

所だけ編集していくのが一般的だ。このとき重要になるのが各要素（タイトルやエントリーの領域、サイドバーの項目など）に付けられた名前である。Movable Typeやココログ、ブログ人はブログタイトルの領域に「banner」という名前（ID名）を付けている。つまり、スタイルシートの中からこの「banner」を探し出して編集すればよい。ちなみに、MovableTypeの機能をインストールなしでかんたんに操作できるように開発されたのが「TypePad」サービス。カスタマイズの自由度などは劣るが、Movable Typeのノウハウを生かすことが可能だ。ココログやブログ人はこの「TypePad」をベースにしたシステムを採用しているのでカスタマイズ方法もほぼ同じである。

デフォルト表示

#banner {font-family: Verdana, Arial, sans-serif;color: #FFFFFF;background-color: #999999;text-align: left;padding: 15px;border-bottom: 1px solid #FFFFFF;height: 39px;}

#banner h1 {font-size: xx-large;}

#banner h2 {font-size: small;}

変更前のソース

上部に配置した画像（幅700px、高さ100px）

変更後の表示

ベースとなるブログデザインは、MovableTypeの「デフォルト・スタイル（標準デザイン）」（www.sixapart.jp/movabletype/default_styles.

html）から選び、スタイルシートの内容をコピーしておく。ここでは「Gettysburg」を選択した。管理画面に入り「管理」の「テンプレート」をクリック、続けてテンプレート一覧の「スタイルシート」をクリックする。

ソースが表示されるので、コピーした「デフォルト・スタイル（標準デザイン）」のスタイルシートをペースト（貼り付け）する。

スタイルシートの編集を始める。ID名「banner」（ヘッダ領域）、「banner

h1」（ブログのタイトル）、「bannerh2」（サブタイトル）を書き替える。「banner」の「background:#999999 url（ここに指定する）no-repeat;」でヘッダ領域の背景に表示する画像ファイルのURLを指定する。画像ファイルのアップロードは「投稿」の「ファイルのアップロード」を利用する。編集が終わったら「保存」ボタンをクリック。画面上部に表示される「このテンプレートを再構築する」ボタンをクリックして、編集したファイルを必ず再構築しておく。

#banner {font-family: Verdana, Arial, sans-serif;color: #FFFFFF;text-align: left;border-bottom: 1px solid #FFFFFF;background: #999999 url("http://xxx.xxx/title_mt.gif") no-repeat;padding: 0;height: 100px;}

#banner h1 {font-size: medium;padding: 20px 20px 0;}

#banner h2 {font-size: x-small;padding-left: 20px;}

変更後のソース

文=境祐司