マトリョーシカ的日常

ワクワクばらまく明日のブログ。

はてなダイアリーのタイトル背景と文字色を変更する方法

Computer Scrap
Computer Scrap / Investing in Gold

追記(20131215):"はてなブログ"のタイトルや文中の文字色の変更方法はこちらへ。
はてなブログでタイトルや本文の文字色を変える方法 - マトリョーシカ的日常


 やっと設定が終わりました。ブログのタイトル部分を変えるだけでこんなにも苦労するとは。備忘録としてやり方をここにメモしておきます。

タイトルの背景を変える

 はてなダイアリーのタイトル画像と背景をカスタマイズ - MONOLOGUE CAFE
 これは上のサイトを参考にしました。管理ページからデザインをクリックし、スタイルシートの欄に以下の文章を書きます。

h1 { background-color: #色;}

 こうするとタイトル部分の背景の色を変えられます。色の指定の仕方ですが、すこし分かりづらいのでこのサイトを参考にしてください。
WEB色見本 原色大辞典 - HTML Color Names

 また背景を画像にするときは

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

 のようにします。画像のURLですが、素材サイトによっては画像の直リンクを禁止していたりするので、サイトのURLを書くことはやめましょう。まず、欲しい画像をダウンロードしてから、はてなフォトライフにアップロードしましょう。(サイズを800pxから1000pxに変更してください。また、公開範囲を自分のみに設定してください。)

タイトルの文字色を変える

 これは背景を変えるよりも簡単です。

h1 a, h1 a:visited {
  color: #FFFFFF;
 font-size:120%;
  text-decoration: none;
}

 ただh1のfontsizeを変更するだけでは文字色は変わりません。タイトルはリンクになっているのでリンクしている文字の色を変更するタグを書きます。ここでh1 aはクリックする前のリンクの色(青がおおいです)h1 a:visitedはクリック後のリンクの色です。またマウスのカーソルを合わせているときに文字色が変更するようにしたいときは、a hoverを書き換えます。

a:hover{
   color: #CC3333;
  text-decoration: none;
}

おわりに

 無料のはてなダイアリーもデザイン次第で格好よくなります。ぼくももう少しページ全体をいじってみようと思います。

 タイトル背景の画像はこちらのサイトから使わせていただきました。なかなか横長のきれいな写真素材(しかも無料)って見つからないんですよね。ありがとうございます。

 ・・・ N O I O N ・・・ (無料写真素材サイト)


関連記事:
洗練されたデザインのブログに必要なのは見出しアイコン! - マトリョーシカ的日常

はてなブログテーマ「Mistilteinn」を魔改造してみた。 - マトリョーシカ的日常