はてなブログデザインテーマのCSS変更点を紹介するよ（その１）
#13/8/23追記
現在はこの記事を書いた当時とは違うデザインテーマを採用しているため、以下に書いてあることは、現在のテーマには当てはまりません。ご注意ください。
自分がブログを始めたときに、ブログタイトルにすごく合ってると思って採用させてもらった「ヨミカキ by kanahei」さんの、はてなブログ公式デザインテーマですが、やはりいろいろ変更したいところが出てきて、CSSは結構いじりました。
もしかすると他の人も「自分のテーマのここが不満で変更したいんだけど、やり方がわからない」という人もいるかもしれないので（参考になるかは微妙ですが）自分が変更したCSS内容を紹介したいと思います。
ただ「ヨミカキ by kanahei」さんのデザインテーマだからこその変更点もあって、全部が参考になるというわけではないので、そこら辺は勘弁してくださいね。
注意！
はてなブログのテーマストアのデザインテーマの中には、改変禁止のものもあると思うのでその場合は変更しないでください。
ご自分のブログで採用しているテーマは改変可能なのか十分確認してくださいね。
あと自分が使っているブラウザは、WinXP、Win7ではfirefoxを使って、後はMacBookとiPadで、safariを使っているくらいで、実質IEはほとんど使っていません。
なぜなら以下で紹介しているものの中には、IEではまったく効果がないものもあるからです。
もしブラウザはIEしか使わない、という方はその点をご了承ください。
それとその他のブラウザ（Google ChromeやOpera、android系など）でも動作を確認していないので、申し訳ないのですが修正の参考にされるかどうかは、各自の判断でお願いいたします。
－ 目次 －
では、変更個所のメニューです。変更のおすすめ順にしてあります。
これらは、はてなブログの設定画面で、「デザイン」→「カスタマイズ」→「デザインCSS」の設定で
CSS定義のどこでもいいんですが、以下をコピペすれば有効になります。
ただし、くれぐれも既存のCSS定義は消さないようにね！
下記タイトルはリンクになっているので、クリックすればその項目にスクロール移動します。
※スクロール移動の方法については、こちら（はてなブログでページ内スムーズスクロールを実現させる）
はてなブログデザインテーマのCSS変更点を紹介するよ（その１）
- リンクにマウスオーバーさせた際の表示効果追加
- 画像のセンタリングと角丸の縁取り追加
- エントリ記事の表示幅の拡大
- 大見出し(h3タグ)、中見出し(h4タグ）の装飾追加
- グローバルヘッダ（はてなブログ特有の最上部に表示されている「↑Hatena Blog」と左側に書いてあるメニューバー）の非固定化
※以下の、その２とその３は別エントリ記事で、それらのタイトルがリンクになっています。
はてなブログデザインテーマのCSS変更点を紹介するよ（その２）
- リンクのボタン化
- 「続きを読む」文字サイズ変更
- 「引用」箇所の背景色と角丸の縁取り変更
- 「pre」記法使用時の背景色や文字間隔などの変更
- エントリ記事最後に表示される脚注文の文字サイズ縮小
- サイドバーのはてなモジュール同士の表示間隔の縮小
- サイドバーの「最新記事」「カテゴリ表示」などのulリストの文字サイズと行間隔の縮小
- javascriptが無効になっていた場合の注意文表示（これだけは変更したのは、CSSではなくHTMLです）
はてなブログデザインテーマのCSS変更点を紹介するよ（その３）
ここからは当ブログのデザインテーマ「ヨミカキ by kanahei」さんのデザインテーマでのみ、関係する部分です。
- エントリ記事などのフォント変更
- ブログタイトル周りのサイズ変更
- ヘッダHTML記述部とエントリ記事との隙間の縮小
- カテゴリ一覧表示の際に表示されるパンくずリストとエントリ記事の隙間縮小
ふわーっと、色が変化するやつです。これおすすめです。このtransion効果非常にいいんですよね。でもIEではこの効果は効きません（IE10はどうかわからないけど）
body a:hover, #title a:hover, .inp-desc:hover, .sel-desc:hover {
color: #ff0000;
text-decoration: none;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
transition: 0.4s;
text-shadow: -1px 1px 1px #C0C0C0, 1px -1px 1px #C0C0C0;
}
効果あり：リンクにマウスオーバーさせた際の表示効果のテストです
効果なし：リンクにマウスオーバーさせた際の表示効果のテストです
※なお、1行目のbody a:hover・・・のところは、各テーマによって変わってくると思うので、適宜変更してください。
デフォルトだと左寄せで表示されてしまうので、センタリングしたのと、画像への角丸の縁取りを追加した。
.entry-content .img-desc {
text-align: right;
font-size: 80%;
margin-left:auto;
margin-right:auto;
max-width: 800px;
min-width: 0px;
width:100%;
}
.entry-content img {
margin 0em;
border: 2px solid black;
border-radius: 10px;
}
角丸の縁取りは何も指定はいらないのですが、センタリングを実現するためには、div要素にimg-desc（このクラス名はCSS定義と合わせる）クラスを指定して、画像指定を囲ってやる必要があります。
※エントリ記事ウィンドウ幅が800px以下だとセンタリングされてないように見えますが、1ペイン表示で800px以上になるとセンタリングされていることがわかります。
効果あり：（※IE8以下ではborder-radiusプロパティに対応していないので、角丸になりません）
<div class="img-desc">すごくいい青空だ<br />[f:id:BNorider:20130517130724j:plain]<br />DMC-LX3 RAW現像</div>
効果なし：
<div>すごくいい青空だ<br />[f:id:BNorider:20130517130724j:plain]<br />DMC-LX3 RAW現像</div>
あとCSS上で画像幅を最大800px指定しているので、もし画像幅がそれ以下だった場合、img-descクラスを追加する他に、style="max-width: XXXpx"（XXXは画像幅）も指定しないとセンタリングされないので注意してください。
※CSS上のmax-widthプロパティをその値にしてやれば、この指定は不要です。
画像幅が400pxで、style="max-width: 400px"指定なしの場合：
<div class="img-desc">すごくいい青空だ<br />[f:id:BNorider:20130517130724j:plain:w400]<br />DMC-LX3 RAW現像</div>
style="max-width: 400px"指定を追加した場合：
<div class="img-desc" style="max-width: 400px">すごくいい青空だ<br />[f:id:BNorider:20130517130724j:plain:w400]<br />DMC-LX3 RAW現像</div>
デフォルトだと表示幅を940pxしか使っていなく、最近のPCのディスプレイサイズ（ほとんど1280px以上あると思います）で表示すると、両脇が開いてしまっていたので、表示幅を1140pxに増やした。
/* container customize */
#container {
/* width: 940px; */
/* margin-left: auto; */
/* margin-right: auto; */
/* margin-bottom: 30px; */
/* padding-top: 37px; */
width: 1140px;
}
/* 2カラムレイアウト customize */
#main {
/* width: 654px; */
/* float: left; */
width: 804px;
}
#box2 {
/* width: 264px; */
/* margin-left: 10px; */
/* float: right; */
width: 314px;
}
/* Media Queries - PC */
@media (max-width: 1160px) {
#container {
width: 93.75%;
word-wrap: break-word;
overflow: hidden;
}
#main {
width: 100%;
float: none;
}
#box2 {
width: 99%;
float: none;
margin: 0;
}
#box2-inner {
width: 100%;
}
.hatena-module {
float: none;
}
.entry-header-menu {
top: -30px;
left: 0px;
}
} ※これは効果あり、なしのサンプルは出せないのでご了承ください。なお、上記CSSで/* ･･･ */で囲われている行は、テーマのデフォルトCSS値です。
あと、/* Media Queries - PC */以降は、ウィンドウサイズが1160px以下になると2ペイン表示から1ペイン表示に変えるための指定です。
これはこのデザインテーマ特有のCSS指定なので、要、不要は各自判断してください。
デフォルトでは文字が大きくなるだけだったので、縁取りや下線の装飾を追加した。
※ただこれは各自好みがあるので、これを参考にするまでもなく「こういうことができるよ」ってのがわかってもらえればいいと思います（装飾指定について、ググればいっぱい見つけられます）
.entry-content h3 {
/* margin: 1.3em 0 0.8em 0; */
/* line-height: 1.5; */
background: #FFFFE0;
background: -moz-linear-gradient(#FFFFFF, #FFFFE0);
background: -webkit-linear-gradient(#FFFFFF, #FFFFE0);
border-left: 7px solid rgb(221, 221, 221);
border-bottom: 1px solid rgb(221, 221, 221);
border-radius: 5px;
}
.entry-content h4 {
/* margin: 1.3em 0 0.8em 0; */
/* line-height: 1.5; */
border-bottom:1px dashed rgb(221, 221, 221);
}
効果あり：（※これもIEではlinear-gradientプロパティに対応していないので、色がグラデーションになりません）
これは大見出し(h3タグ)です
これは中見出し(h4タグ)です
効果なし：
これは大見出し(h3タグ)です
これは中見出し(h4タグ)です
デフォルトでは位置固定されていたものを解除して、スクロールで一緒に流れるようにした。
/* globalheader-container customize */
#globalheader-container {
/* position: fixed; */
position: static;
}※逆に、スクロールで流れてしまっては困るというのであれば、#globalheader-containerにposition: fixed;を追加してやればいいです。
