前回「最近の記事」にサムネイル画像を追加しましたが、標準のCSSではどうしても形が悪く表示されてしまいます。今回はもう一歩踏み込み、CSSを修正して表示を整形します。

CSSを修正して表示を整形

画像サムネイルを追加して、<ul>構造を<dl>構造に変更したのが前回のエントリーでした。Movable TypeデフォルトのCSSだと、以下のように表示が崩れてしまいます。

それを以下のように修正します。

始めにCSSファイルを開きますが、修正するパターンが2種類存在します。

Movable Typeは「スタイル」という独自の機能を持っており、「管理画面 > デザイン > スタイル」の画面から簡単にスタイルを切り替えることができるようになっています。

各スタイルは、個別にCSSを持っており、そのCSSを修正することにより、今回の「最近の記事」のデザインを変更する。これが一つ目のパターンです。

もう一つは「管理画面 > テンプレート > スタイルシート」から、直接CSSを変更してしまおうという荒技です。ここにセレクタを追記した場合、スタイルを切り替えた後も影響を与えてしまうことになります。どちらも一長一短でありますが、後者の方が簡単に修正できることから、「とりあえずやってみよう」という人には最適です。

セレクタを追記する

手短に説明すると、以下のソースを追記することで完結します。

#content .widget-recent-entries .widget-content dl dt {
background-color: #f8f8f8;
border-color: #ddd;
border-top-style: solid;
border-bottom-style: solid;
border-width: 1px;
border-left-style: solid;
float: left;
clear: left;
margin-bottom: 3px;
height: 30px;
_height: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#content .widget-recent-entries .widget-content dl dt img {
display: block;
}
#content .widget-recent-entries .widget-content dl dd {
background-color: #f8f8f8;
border-color: #ddd;
border-top-style: solid;
border-bottom-style: solid;
border-width: 1px;
border-right-style: solid;
float: left;
padding: 5px 5px 5px 10px;
margin-bottom: 3px;
height: 30px;
line-height: 30px;
width: 108px;
}

「#content .widget-recent-entries .widget-content dl dt」の「_height」と、「#content .widget-recent-entries .widget-content dl dt img」の「display」は、IE6対策です。IE6をターゲットにしてない場合は省いても問題ありません。なお、画像サイズを変更した場合は、各「height」「width」を調整してください。

セレクタのプロパティが少しスマートではありませんが、文章構造を優先した結果こうなりました。CSSを優先に記載した場合は、もっと簡潔、わかりやすく記載することができるでしょう。