2005年6月13日
Movable Typeのデザインを変更
雨なので気分転換にブログのデザインを一新。とはいえ、前回のものはほぼデフォルトで使用していたので、かっこ悪かったんだよなぁ。といいつつ、今回もほぼデフォルトのままですが。。
これまで、デザインを気軽に変更できなかったのにはちょっとした理由があるのです。
Movable Typeを3.xから新規でインストールして使う人にはあまり関係のない話ですが、僕のように、2.7→3.15→3.17とアップグレードした場合若干問題があるのです。
新規ユーザーのデザインの変更については簡単で、管理画面のテンプレートからstyle sheetをここで配布されているスタイルシートで上書きするだけです。
アップグレード組はそれだけでは、ブログの表示に著しい不具合が生じます。おそらく原因の一つとして、2.xと3.xで使われているセレクタ（タグ、クラス、ID）が異なっているためです。これを修正する一番簡単な方法は、ここで配布されているテンプレートで既存のものを上書きするとよいです。（が、念のため現行のものはnotepad等のエディタでバックアップを推奨）MainIndexを比べてもらえば違いがわかると思います。
＊英語版と日本語版を混ぜて使うとこれまた表示がうまくいかないことがあるので、注意が必要です。
スタイルシートのマイナーチェンジ
1.バナーに画像を使いたい。
ここを変更するだけでかなり自分仕様になるはずです。
スタイルシートの以下の部分に変更を加えます。
#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #999999;
background-image: url(http://写真の保存場所);
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}
バナーに用いる写真を用意して、あらかじめサーバーにアップロードする必要があります。
2.sidebarを変更したい
sidebarに変更を加えるには若干の労力が必要とされます。
2-1 箇条書きの幅を変更。(list）
sidebarのほとんどが箇条書き形式になっています。例えばリンク集や最近のエントリー等。スタイルシートでは箇条書きスペースを’<’ul’>’’<’/ul’>’で確保します。箇条書き一行一行は’<’li’>’’<’/li’>’です。（listの略かな？）これらのコードのなかで改行の幅を変更するには、下記のタグを使うと有効です。
（ulを用いなくても箇条書きは表示されます。）
外側の余白を辺ごとに設定
{margin-top:5px} 上の余白を設定
{margin-right:5px} 右の余白を設定
{margin-left:5px} 左の予約を設定
{margin-bottom:5px} 下の予約を設定
内側の余白を辺ごとに設定
{padding-top:5px} 上の余白を設定
{padding-right:5px} 右の余白を設定
{padding-left:5px} 左の予約を設定
{padding-bottom:5px} 下の予約を設定
2.2 改行幅の設定
狙った場所で改行するには
を使いますが、ブラウザのスペースの関係で勝手に改行されることがよくあります。その時の改行幅の設定に用いるのが次のタグです。
{line-height:120%}
ここで指定できる値は数値（px)と割合(％)です。
2.3 sidebarにリンク集を載せたい。(to be continued...)
まぁ、リンク集に限らずなんでも載せられるのですが、この場合は、スタイルシートではなくMainIndexに変更を加えていきます。このファイルは管理画面のテンプレートの中にあるのですが、ブログの表示に関するページなので、設定ミスは即ブログに反映されます。設定前に必ずバックアップ（notepad等にコピー）を推奨します。
と
解説を続けたいところなんですが、面倒くさいので、また今度気が向いたときに書きます。（笑）(to be continued...)
- by editor
- at 13:53
編集長のおすすめの一冊！2010
comments