2009-03-17 はてなダイアリーのちょっぴりカスタマイズ
■[はてなにときめき]
このエントリで25日分となります。しばらくはデフォルトで使っていましたが、初心者なりにウェブに掲載されている「はてなダイアリー」のカスタマイズ記事を漁って３点ほど試してみました。パクリということになりますが、備忘も兼ねて記事にしときます。
試してみるときは、はてなダイアリーの「管理」→「デザイン」と進んで、スタイルシートのテキストエリアにそれぞれコピペで記述してください。
◆フォントの指定（種類、サイズ、色）、画像ファイルを使ったブログ背景
好みのフォントや大きさ、色を指定します。また、画像を使ったブログ背景にしてみましょう。
body {
font-family:"Verdana","ＭＳ Ｐゴシック";
font-size:12pt;
color:#454545;
background-image:url(http://**************);background-attachment: fixed;
}
font-family:"Verdana","ＭＳ Ｐゴシック";
フォントの種類を指定します。ここでは "Verdana" と "ＭＳ Ｐゴシック" を指定しました。"Verdana" で表示できない環境の場合は "ＭＳ Ｐゴシック" で表示されます。
font-size:12pt;
本文の文字の大きさを指定します。
color:#454545;
本文の文字色を指定します。
background-image:url(http://**********);background-attachment: fixed;
ブログの背景画像のパスを http:// で指定します。画像ファイルはレンタルサーバなどにアップロードしておく必要があります。
画像を用いないで好みの色にしたい場合は、background-color:#f5f5f5; のように指定します。
◆引用部分の枠線と背景色
デフォルトでは引用部分の枠線の色が薄いですよね。ここでは枠線の種類や色・太さ、引用部分の背景色、文字の大きさや色を指定します。
div.hatena-body div.section blockquote {
background-color:#f6f6f6;
border-color:#a4abb4;
border-style:solid;
border-width:2px;
font-size:11pt;
color:#454545;
padding:5px 8px;
}
background-color:#f6f6f6;
引用部分の枠線に囲まれた部分の背景色を指定します。
border-color:#a4abb4;
枠線の色を指定します。
border-style:solid;
枠線の種類を指定します。solid が実線、dotted が破線です。
border-width:2px;
枠線の太さを指定します。
font-size:11pt;
引用部分のフォントサイズを指定します。本文より１〜２サイズ小さいといいかもしれません。
color:#454545;
引用部分の文字色を指定します。
padding:5px 8px;
枠線から文字までの離れ具合を指定します。最初のpxが上下、後ろのpxが左右です。（不要なら除外してかまいません）
◆コメント記載欄の行数と横幅固定
私が使っている Hatena2 のコメント記載欄（テキストエリア）は３行しかないので、コメントが書きづらい感じがします。また、デフォルトではアルファベットの単語が途中で切れないように、文字を入力し始めるとテキストエリアが右横にビロ〜ンと伸びてしまいます。ここではテキストエリアの行数を増やし、横幅を固定して右横にビロ〜ンと伸びないようにしてみましょう。
.comment textarea {
border:1px solid #a9a9a9;
width:550px;
margin:5px 0px;
padding:2px;
color: #000000;
background-color:#f5f5f5;
height:10em;
}
border:1px solid #696969;
テキストエリアの枠線の太さ、枠線の種類、枠線の色を指定します。
width:550px;
テキストエリアの横幅をピクセル値で指定します。通常は 500〜600px 程度でしょうか。
margin:5px 0px;
テキストエリアの配置上の離れ具合を指定します。
padding:2px;
テキストエリアの枠線から入力した文字までの離れ具合を指定します。
color: #000000;
文字色を指定します。
background-color:#f5f5f5;
テキストエリアの背景色を指定します。
height:10em;
テキストエリアの行数を指定します。10em で10行となります。
＜きょうの名言＞
時間は存在しない。存在するのは、瞬間だけである。
出典-四文字熟語データバンク
