はてなブログデザインテーマのCSS変更点を紹介するよ（その３）
#13/8/23追記
現在はこの記事を書いた当時とは違うデザインテーマを採用しているため、以下に書いてあることは、現在のテーマには当てはまりません。ご注意ください。
前回のエントリ記事はてなブログデザインテーマのCSS変更点を紹介するよ（その２）の続きで、自分のブログCSS変更点 その３です。
なお、この変更点その３は当ブログのデザインテーマ「ヨミカキ by kanahei」さんのデザインテーマでのみ関係する部分なので、あまり参考にならないかも。
これを適用する際の注意点などははてなブログデザインテーマのCSS変更点を紹介するよ（その１）の冒頭を参照してください。
－ 目次 －
※以下の、その１とその２は別エントリ記事で、それらのタイトルがリンクになっています。
はてなブログデザインテーマのCSS変更点を紹介するよ（その１）
- リンクにマウスオーバーさせた際の表示効果追加
- 画像のセンタリングと角丸の縁取り追加
- エントリ記事の表示幅の拡大
- 大見出し(h3タグ)、中見出し(h4タグ）の装飾追加
- グローバルヘッダ（はてなブログ特有の最上部に表示されている「↑Hatena Blog」と左側に書いてあるメニューバー）の非固定化
はてなブログデザインテーマのCSS変更点を紹介するよ（その２）
- リンクのボタン化
- 「続きを読む」文字サイズ変更
- 「引用」箇所の背景色と角丸の縁取り変更
- 「pre」記法使用時の背景色や文字間隔などの変更
- エントリ記事最後に表示される脚注文の文字サイズ縮小
- サイドバーのはてなモジュール同士の表示間隔の縮小
- サイドバーの「最新記事」「カテゴリ表示」などのulリストの文字サイズと行間隔の縮小
- javascriptが無効になっていた場合の注意文表示（これだけは変更したのは、CSSではなくHTMLです）
はてなブログデザインテーマのCSS変更点を紹介するよ（その３）
下記タイトルはリンクになっているので、クリックすればその項目にスクロール移動します。
※スクロール移動の方法については、こちら（はてなブログでページ内スムーズスクロールを実現させる）
個人的に、デフォルトフォントの「ふい字」では記事本文やサイドバーの文字などの小さい文字が読みにくかったので、一般的なフォントへ変更したのと、フォントサイズも若干大きくした。
.entry-content, .customized-footer, .entry-footer-html, .comment-content, .lnk-btn, #box2, #dropmenu {
font-family: \x27Helvetica\x27, \x27Arial\x27, \x27メイリオ\x27, \x27Meiryo\x27, \x27MS PGothic\x27, sans-serif;
}
.entry-content {
/* font-size: 95%; */
font-size: 100%;
}
kanaheiさんの背景画像が大きすぎたので、ちょっと小さくした。それに伴ってブログ紹介文字の縮小や、ブログタイトルのリンク色変更なども行った。
※こちらのエントリ（もう勘弁して下さいIE先生）にもあるとおり、IE8以下ではbackground-sizeプロパティが効かないので、この指定はIE8以下では意味がないです。
/* header customize */
#blog-title {
/* background: url('title.png') no-repeat; */
/* width: 900px; */
/* height: 345px; */
/* margin: 30px 0 0 0; */
/* padding: 20px 0; */
background-size: contain;
height: 245px;
margin: 40px 0 0 5px;
padding: 2px 0;
}
#blog-title #blog-title-inner {
/* margin-top: 70px; */
/* margin-left: 60px; */
margin-top: 73px;
margin-left: 32px;
}
#title {
/* margin: 0; */
/* width: 360px; */
/* font-size: 170%; */
margin: 0;
width: 350px;
font-size: 150%;
}
#title a {
/* color: #333333; */
color: #0080ff;
}
#blog-description {
/* font-weight: normal; */
/* font-size: 18px; */
/* margin: 10px 0 0 0; */
/* width: 360px; */
font-weight: normal;
font-size: 14px;
margin: 10px 0 0 0;
width: 360px;
}
隙間が大きかったので減らした。
/* top-editarea customize */
#top-editarea {
margin-bottom: 15px;
}
これも隙間が大きかったので変更した。
#top-box .breadcrumb {
/* margin-bottom: 40px; */
margin-bottom: 10px;
}
