CSS カスタマイズ vol.6

スタイルシートを変更して引用やページの見た目を分かり易くする

カスタマイズって程の事じゃありませんが、Stylesheet(CSS)をイジりました。
（blockquoteの効果を反映させるのに手こずりました…。）

追記：結局、二日掛りの大掛かりな物でした。

HyenaではCSSでフォントを丸ゴシックに指定してるのですが、ページ全部がそうなっていてメニューとタイトルの見分けがやや判別しづらい感があったので、普通のフォントにそれぞれ戻しました。環境によっては丸ゴシック自体が表示されないので表示されてない人には関係ありません。

あと、日付けを小さくしてタイトルの背景に色をつけて文字を大きくして分かり易くしました。
それと引用の文字サイズ、背景、枠線を変更して分かり易くしました。
サイドメニューとエントリーに枠線を付けました。

引用を見易くする方法

Stylesheetテンプレートの.body関連の最後に、

.blogbody blockquote {

   background-color: #F8F8F8;

   border: 1px #003366 solid;

   color: #666666;

   padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;

   font-family: "Osaka", "ＭＳ Ｐゴシック", Verdana,arial, sans-serif ;

   font-size: small;

   width: auto;

   }

を付け加えれば<blockquote>引用文</blockquote>で挟んだ部分が上の様になって、非常に見やすくなります。最近の流行りは左の枠線を大きくしてそれ以外は表示させないのみたいですが、ワタクシはこっちの方が見やすいのでこういう感じにしました。

コードのbackgraund-color: #f8f8f8が背景色を指定してるのですが変わりに画像を指定してあげる事も出来ます。

background-image: url(<$MTBlogURL$>画像のある場所.jpg)

これをbackgroundの下に付け加えればOKです。
シームレス（繋ぎめが無い）で表示出来る様な画像が好ましいですが、細かく指定すればその画像を好みの位置に表示させる事も可能です。
この辺は詳しく解説してあるサイトが沢山あるのでそちらを見て下さい。

追記：
blockquoteのみだとページ全体の引用に対して有効、.blog blockquoteとするとblogのみ（エントリー内のみ）の引用に対して有効になります。

枠線を付ける方法

使ってるテンプレートのタイプで付ける場所が違うかもしれませんが基本は同じです。
MTは大きく分けて３つのブロックでページを生成しているのでそのブロックの必用な箇所のStylesheetテンプレートに記述してあげます。
このHyenaでいうと、エントリーを生成している.blogbodyという箇所。
サイドメニューの.sideという箇所にborderを記述して線引きの指定をしてあげます。

.blogbody {

  font-family: Verdana, Helvetica,arial, sans-serif,

"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "Osaka";

  color:#333;

  font-size:small;

  font-weight:normal;

  background:#FFF;

  line-height:200%;

  border-bottom: 1px dashed #666666;

  border-left: 1px dashed #666666;

  border-right: 1px dashed #666666;

  border-top: 1px dashed #666666;	

  margin-bottom: 15px;

  padding: 10px;

  }

こんな感じになってます。
border: 1pxとするとその要素を囲みます。
top,bottom,left,rightで個別に指定出来ますので、線を出したくない時などは個別に指定して上げます。これは前述したblockquoteでも同じ事です。
dashed は点線です。
solid　実戦
dotted ドット
double 二重線
など他にも色々ありますので、調べて試して自分に合うのを探すといいと思います。

margin は要素同士の間隔、MTだとエントリー同士の間隔とかです。
padding は要素の中の余白、MTだとエントリーの中の余白とかです（枠と文章の間の空白）。
line-height は文章の列の間隔になります（上の行とこの行の空白）。