MovableTypeオリジナルテンプレートを作ろう

このサイトで配布している無料テンプレートでも使ってる付箋紙のような形のタイトルを作る方法を説明します。

まずは、完成形から

まずは、スタイルシートから説明します。

付箋紙は、枠線（border）を使います。
左側の枠線を極太にして、上下の枠線を細くすれば、付箋紙のように見せることができます。

border-top:1px solid #0000cc;で、上側の枠線を細く表示します。
border-left:10px solid #0000cc;で、左側の枠線を極太で表示します。
border-bottom:1px solid #0000cc;で、下側の枠線を細く表示します。
border-right:1px solid #0000cc;で、右側の枠線を細く表示します。
padding:3px;で、文字の上下左右に3pxの余白を入れます。

スタイルシートの記述はこれだけです。

上記のスタイルシートを使って、メインページやカテゴリアーカイブページなどのテンプレートを記述します。

divというタグを使って、そのdivに、スタイルシートで定義したfusenshiクラスを指定します。
タイトル文字を>div class="fusenshi"<〜>/div<の間に入れれば、完成です。

どうですか？
とっても簡単でしょ？