CSS編集>テキスト変更

今回はテキストの調整をしました。まず、下の画面キャプチャーを見てもらえればわかると思いますが、記事タイトルの背景に薄い青の帯をひきました。また、リンクの設定も変更し、マウスオーバーすると背景に薄い青のボックスが表示されるようにしてあります。

/* 全体のリンク飾り */
A {
color: #005FA9;
text-decoration: none;
}

/* リンク（まだ見ていない状態） */
A:link {
color: #005FA9;
}

/* リンク（マウスポインタを乗せた状態） */
A:hover {
color: #005FA9;
background-color: #DDEEFF;
}

/*タイトルロゴ用*/
#content #header A.bTitleLink:hover {
color: #005FA9;
}

/* リンク（クリックされた状態） */
A:active {
}

/* リンク（すでに見た状態） */
A:visited {
color: #A367B1;
}

/* エントリータイトル枠飾り */
h3.entryTitle {
margin:5px 0 20px 0;
display:inline;
font-size: 100%;
font-weight: bold;
line-height: 140%;
}

記事のテキストには、フォント色が黒でコントラストが強すぎて目が痛くなるので、少しグレーに近づけた配色にしています。
コメント ( 0 ) | Trackback ( 0 )のカラーはさらに彩度を落としてグレーにしました。
※後でアイコンを追加する予定です。

/* エントリーの背景 */
.entry {
width:540px;
margin:0 10px 10px 10px;
}

/* エントリータイトル */
.etTitle {
/*display: block;*/
margin:0 0 0 10px;
}

/* エントリータイトルの飾り（a class="etTitleLink"で使用） */
.etTitleLink {
}

/* エントリー本文 */
.etBody {
display:block;
width:520px;
margin:0 10px 0 10px;
color: #333;
line-height: 160%;
}

/* エントリーに表示されているカテゴリ */
.etCategory {
}

/* エントリーに表示されている日時 */
.etTime {
}

/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
color: #666;
}

/* エントリーに表示されている「トラックバック（）」 */
.etTBLink {
color: #666;
}

/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
margin:0 10px 0 10px;
color: #666;
}

/* 前のページ、次のページ */
.etNextPrev {
margin:0 10px 0 10px;
font-size:90%;
}

次に今回一番はまった右のメニューのデザインです。
メニュータイトル部分に背景画像を引いたのですが、HTMLの記述が[h2のなかにclass]が記述してあり、[padding]をつかって、左にぴったりくっつく状態を回避しなくてはならなくなりました。[margin]を使えばいいのですが、そうすると背景画像が両サイドにぴったりとくっつかないのです・・・しかたなく[padding]をつかって試してみたのですが、やはり問題発生！
Firefoxではしっかりとレンダリングしてくれるのに、IEは違った理解をしているようで、タイトル背景が10pxほど空いてしまってます。。

これは、本来「ボックスモデルハック」といったスタイルシートの記述の裏技で回避できるのですが、gooブログでは、「」「>」などが自動的に変換されてしまうので、使えないのです・・・

というわけで、今回はあきらめました・・・IEユーザーは圧倒的に多いので、そちらにあわせるべきなのですが、個人ブログということで、本来の正しいスタイルシートのレンダリングを行う記述のほうにしておきます。

/* カレンダー背景 */
.calendar {
margin: 0 0 0 10px;
width:168px;
}

/* カレンダー年月 */
.calMonth {
font-size:100%;
}

/* カレンダー曜日 */
.calWeek {
font-size:90%;
}

/* カレンダー日付 */
.calDay {
font-size:90%;
}

/* カレンダー日付のリンク */
.calDayLinked {
font-size:90%;
}

/* カレンダー前月、翌月 */
.calLink {
font-size:90%;
}


/* カレンダー内の区切り */
.calRule {
}

/* 左メニューの各見出し */
#menu h2 {
margin:-12px 0 0 0;
padding:4px 0 0 10px;
background-image: url(背景画像のURL);
background-repeat: repeat-x;
width: 177px;
height: 26px;
}
.menuBar {
margin:0 0 0 0;
font-size: 100%;
color: #333333;
line-height: 120%;
font-weight: bold;
}

/* 左メニューの背景 */
.menuBg {
margin:10px 0 0 0;
}

最後におまけで、最新の投稿の各メニューの先頭にアイコンをつけてみました。

/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
display:block;
margin:0 0 0.4em 0;
font-size: 90%;
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: 0 1px;
padding: 0 0 0 12px;
}

次回記事で、コメント部分の調整と、gooブログ以降のメニューの扱いについて考えてみたいと思います。ながながとすみません。。