Riszw で配布している Serene Bach / sb 用テンプレート「Transparently」のカスタマイズ方法解説です。
主に CSS テンプレートの編集項目について詳しくご説明します。
このテンプレートは簡単に色を変更できて見た目もそれなりになるように作りましたが、幅固定の画像を使っているため画像編集の知識がないと本文やナビゲーションの幅を変更することは難しいです。
でも、色の変更は 6 文字書き替えるだけでできますし、特に背景色の変更をするだけでガラッと雰囲気が変わって楽しめると思いますのでお試しください。(背景色に合わせて文字色の調整も忘れないでくださいね)
@charset
CSS の文字コードを示すもので、sb の場合は対応する独自タグがないため記述されていません。
通常は編集しません。
@prefix から始まるコメント数行
DOAS という記述方法を使った CSS の情報表示です。CSS の内容や作成日・更新日、作成者などが書かれています。
通常は編集しません。
import (この部分は編集しないでください)
@import で外部の CSS を読み込むもので、上記の通り編集しないでください。
外部 CSS の保存場所は、ディレクトリを変更していなければ Serene Bach / sb インストールフォルダ内の template フォルダの中にあります。
color
この項目では文字色及び背景色についての指定を行います。
変更しやすいものだけを載せていますので、ここにないものについては import で読み込んでいる外部 CSS を編集するか、新たに記述してください。
背景色と文字色を設定するときは、淡い背景色のときは濃い文字色・濃い背景色のときは淡い文字色にするなどして、読みづらくならないようにお気をつけください。
ページ全体の背景色と文字色を指定
body,
#header {
color: #666666;
background-color: #7fb167;
}ページ全体の背景色は、後で指定する画像によりグラデーションとなります。Windows InternetExplorer 6 (以下 IE 6 ) については透過 png の表示ができないため、ここで指定した背景色が単色で表示されます。
ブログ説明文の文字色を指定
p.description { color: #666666; }IE 6 については後で別途指定します。
ナビゲーションの背景色を指定
#navigation {
background-color: #fdfcf2;
}後で指定する画像の都合で以下の 2 色から選択していただくことになります。こんな色を増やしてほしいというリクエストがありましたらご連絡ください。
- クリーム色 #fdfcf2
- 淡いグレー #eeeeee
ナビゲーションのタイトル ( Entries など) の背景色と文字色を指定
#navigation dt {
color: #ffffff; /* 通常時の文字色 */
background-color: #3b828d; /* 通常時の背景色 */
}
#navigation dt:hover {
color: #eeeeee; /* マウスカーソルが乗ったときの文字色 */
background-color: #69a7b0; /* マウスカーソルが乗ったときの背景色 */
}ページ全体の背景色と同様、後で指定する画像により立体的なボタンとなります。IE 6 では通常時の背景色が単色で表示されます。また、IE 6 ではマウスカーソルが乗ったときの指定は無視されます。
リンク文字色を指定
(前半は省略)
/* フッタの文字色とリンク文字色を指定します。 */
#footer { color: #eeeeee; } /* 通常の文字色 */
#footer a { color: #ffffff; } /* 通常のリンク文字色 */
#footer a:hover { color: #eeeeee; } /* マウスカーソルが乗ったときの文字色 */
/* ( IE 6 対策・先頭の _ は消さないでください・#footer に指定した color と同じ色を指定してください) */
p.description { _color: #eeeeee; }
それぞれお好みの色に変更可能です。
最後の IE 6 対策の部分はコメントにある通り #footer に指定したものと同じ色を指定してください。これは、IE 6 以外ではページ上部がグラデーションで白っぽくなるのに対し IE 6 では背景色がそのまま表示されるので、両者で同じ文字色にした場合 IE 6 で読みづらくなる恐れがあるためです。
記事タイトル上部の罫線の色を指定
div.section {
border-top: 3px solid #69a7b0; /* 上の罫線 */
}
h2 {
margin-top: 1px; /* 上下の罫線の余白 */
border-top: 2px solid #dddddd; /* 下の罫線 */
}設定項目はコメントにある通りです。お好みの色・太さ・線の形状 (実線・点線など) に変更可能です。
ブログタイトルの背景色を指定
h1 {
_background-color: #3b828d;
}
IE 6 以外ではページ全体の背景色に透過 png を重ねることによってブログタイトル部分を立体的なボタン風に表現していますが、IE 6 では透過 png の表示ができないためここで指定した背景色が単色で表示されます。
_background-color の先頭にある _ は、この項目を IE 6 にだけ読み込ませるためのものですので消さないでください。
image
この項目では画像についての指定を行います。
変更しやすいものだけを載せていますので、ここにないものについては import で読み込んでいる外部 CSS を編集するか、新たに記述してください。
あらかじめ以下の 4 パターンの CSS を記述してありますので、使用したい部分のコメントを外し、不要な部分をコメントアウトすることで見た目を変更できます。
ページ右下の ↑ 部分 (ページの先頭へ戻るリンク) は背景色よりも白っぽくなるものと黒っぽくなるものの 2 種類ありますので、いずれか見やすい方を指定してください。
IE 6 についてはここで指定した透過 png の表示ができないため CSS テンプレートの一番最後で別途指定しています。
- クリーム色
- 淡いグレー
- クリーム色・上部グラデーションなし
- 淡いグレー・上部グラデーションなし
other
色と画像以外の指定を行います。
変更しやすいものだけを載せていますので、ここにないものについては import で読み込んでいる外部 CSS を編集するか、新たに記述してください。
ブログタイトル文字列の表示位置を指定
h1 a {
/* タイトル文字列の上部余白を指定します。 */
padding-top: 24px;
/* タイトル文字列の左寄せ・中央寄せ・右寄せを指定します。 */
text-align: center;
}
配布時の状態だとタイトルが 1 行で収まる場合にちょうどよい場所に表示されるように指定してありますが、ブログタイトルが長くて改行されたりする場合はここで調節してください。
左寄せ・右寄せなどはお好みでどうぞ。
本文の表示について
div.text {
/* 本文の行間を指定します。単位は不要です。 */
line-height: 1.4;
/* 本文の文字サイズを指定します。13px = 100%, 14px = 108%, 15px = 116% */
font-size: 108%;
}記事本文の行間と文字サイズを指定します。文字サイズについては外部 CSS にて Yahoo! UI Library: Fonts CSS を適用しており、コメント内の数値を指定することにより異なるブラウザにおいて指定したサイズで表示することができます。
IE 6 の画像を指定
****** で囲まれた部分で IE 6 用の画像を指定しています。
ここは通常編集しませんが、大幅にカスタマイズしたい方や IE 6 の確認環境があっていじりたいという方についてはこの限りではありません。
IE 6 用の画像はただの角丸でアンチエイリアスもかけていませんので、透過を扱える画像ソフトがあればナビゲーションの背景部分の色を変更などは範囲選択・塗りつぶしで簡単にできると思います。
