はてなダイアリーのカスタマイズの仕方

はてなダイアリーというのは、カスタマイズが難しいです。しかし、あまりにも殺風景なので、カスタマイズしてしまいました。カウンターとページ下のリンクは、まあ、誰でも分かると思いますから、この際、省略します。問題は、ヘッダーの画像です。これをどうするか。

ヘッダーに画像を表示する方法

やり方としては、ブログの題名がh1で指定されていますので、それに背景画像を付け加えればいいです。その部分だけを書くと、こうなります。

h1 {
background-image:url("画像のURL");
}

しかし、これではまだだめです。画像のサイズがきちんとしていないといけません。ベースにしているテーマによりますが、このブログがベースにしたHatena2と言うテーマでは、横910ピクセル、縦180ピクセルの画像が必要な様です。

しかし、今回、私はこれを無視して、1200ピクセル×300ピクセルで画像を作りました。理由は、いろいろ・・・なくて、単にタコだから適当に作ったというのが正解です。(^ ^;;;　あはははは。

元の写真にそれだけの横幅がなかったんですが、適当にごまかしました（笑）。切って貼って横に伸ばすという原始的な方法です。ぼかしてごまかし、また切って貼って、さらにごまかす。

さて、それで上のようにすると一応画像が表示されるのですが、どうも位置をきちんと指定しなくてはいけなかったみたいで、別にそうしなくてもよければ、別にいいのですが、位置を指定しました。それが下の部分です。最初は「left top」で指定したのですが、うまく行かず、「right top」にしました。やってみればいいです。

background-position: right top;

それでも、画像が並べられたら困ると思ったので、ついでに並ぶのを禁止しました。これが下記の部分。

background-repeat: no-repeat;

これで一応、出来上がりました。

ブログのタイトルを大きくする方法

ブログのタイトル（題名）が小さいと、デザイン的には良さそうですが、ちょっとインパクトがありません。ブログの題名は大きくするのが、正解です。しかしどうやって？・・・こうやってやります。

h1 {
font-size:パーセントで大きさを指定する;
}

参考までに、このブログでは「300%」で指定しました。ブログやホームページのタイトルは、250%から350%ぐらいが適当だと思います。小さすぎると、タイトルがどれだけ分からなくて、ブログが忘れられてしまいます。これが「タイトルですよ」と大声で叫んでおかないと、二度と来てくれないかもしれません。

ヘッダーを上下に広げる方法

たまたま気づいたのですが、ブログの題名の行間を空けると、ヘッダーの画像が上下に大きく表示されます。そこで行間をピクセル単位で広げてやりました。

h1 {
line-height:広げる幅を適当にピクセルで指定する;
}

広げる幅は、試行錯誤で決めました。結局このブログでは160pxに決定しましたが、これよりも広いと、画像の下に背景の青い色が帯状に出てしまいます。この方法は、離れ業で特殊だと思いますので、他ではまねできないかもしれません。と言うかFC2などのカスタマイズ性の高いブログなら、こんな馬鹿な方法は取らなくても簡単に広げられます。

画像を表示し、題名の大きさを指定するCSSの実際の書き方

これで出来上がりです。まとめるとこうなります。

h1 {
font-size:文字サイズをパーセントで指定;
line-height:上下に広げる幅をピクセルで指定;
background-image:url("画像のURL");
background-position: right top;
background-repeat: no-repeat;
}

ブログのタイトルの色を変える方法

ここでちょっと問題が出ました。背景が水色で、ブログのタイトルが白だったので、これではタイトルが読みにくいです。しっかり読みやすくしないといけません。その基本的な手法としては、タイトルの文字の背景色を指定し、文字色をその背景色に対してコントラストの高い色にします。

本来なら、上のh1のところでそういう風に変えるべきなのですが、これではうまく行きません。たぶん、リンクの色が優先的に指定されているからでしょう。そこで、リンクの色で変えてやります。

h1 a:link {
color:色を１６進法で指定する;
}
h1 a:visited {
color:色を１６進法で指定する;
}
h1 a:hover {
color:色を１６進法で指定する;
}
h1 a:active {
color:色を１６進法で指定する;
}

上から、未読時のリンクの色、既読時のリンクの色、マウスの矢印を載せたときのリンクの色、クリックした瞬間のリンクの色です。１６進法というのは、#ffffffとか#ff0000などという表記の仕方です。

ブログのタイトルの背景色を変える方法

実は、背景画像を指定した影響で、文字の背景色が指定できなくなっています。だから、これもリンクの背景色で指定するしかありません。

h1 a:link {
background:色を１６進法で指定する;
}
h1 a:visited {
background:色を１６進法で指定する;
}
h1 a:hover {
background:色を１６進法で指定する;
}
h1 a:active {
background:色を１６進法で指定する;
}

ブログのタイトルの背景色の余白を調整する方法

このままでも悪くはありませんが、余白が不適切であまりきれいではありません。そこで余白を調整します。それにはpaddingで調整すればいいです。記述の順番は、上、右、下、左の順です。
また、ピクセル単位で指定します。例えば、このブログではこうしました。

padding:5 10 5 10;

ブログの題名のリンクの下線を消す方法

あと、うっとうしいのはブログの題名に下線が出ることですね。最初の状態では、マウスの矢印を乗せた時だけに出ますが、いっそのこと完全に消してしまうのも悪くはありません。それには、こうします。

text-decoration: none;

これで完成です。

実際にリンクの色や背景色などを指定する方法

実際には、やはりまとめて書きますから、以下のようになります。

h1 a:link {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;
}
h1 a:visited {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;
}
h1 a:hover {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;
}
h1 a:active {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;

記述をまとめる方法

これで十分ですが、同じ設定ならまとめて書くのも手です。「,」で区切ってやればいいです。ここでは、未読リンクと既読リンクが同じ指定なので、まとめます。

h1 a:link, h1 a:visited {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;
}
h1 a:hover {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;
}
h1 a:active {
color:色を１６進法で指定する;
text-decoration: none;
background:色を１６進法で指定する;
padding:5 10 5 10;
}

記事本文の行間を空ける方法

はてなダイアリーは、初期設定でも、かなり行間が空いていますが、もっと空けるとさらに読みやすいです。これは下記のようにパーセントで指定します。180%ぐらいが適当です。

.main {
line-height: 180%;
}

引用の背景色を指定する方法

引用文の背景色を本文と違う色に指定すると、非常に読みやすくなります。そこで、引用部分の背景色を指定する方法を紹介します。下記のように指定します。

.main blockquote {
background-color: 色を１６進法で指定する;
}

背景色は、薄い灰色や薄いピンクの様な色がいいです。このブログでは「#e3e3e3」に指定しました。

フォントの種類を指定する方法

特殊なフォントを部分的に使用する場合は、その都度で指定してやればいいのですが、ブログ全体で特定のフォントを指定するには、こうします。

body {
font-family: フォントの名称;
}

よく使われる「ＭＳＰゴシック」に指定するなら、こうなります。

body {
font-family: "ＭＳＰゴシック";
}

しかし、Hatena2と言うテーマの場合、特に指定しなくても、パソコン側に「ＭＳＰゴシック」が入っていれば、「ＭＳＰゴシック」で表示されるようです。当たり前のことですが、パソコンに「ＭＳＰゴシック」が入っていなければ、「ＭＳＰゴシック」に指定しても、「ＭＳＰゴシック」で表示されることはありません。その場合、代わりのフォントで表示されるはずです。なお、Windowsのパソコンなら、必ず「ＭＳＰゴシック」が入っていますので、心配はいりません。

これで一通りのカスタマイズができたと思います。よかったら、参考にしてください。