手順その2 - CSSを変更する
提供: GeeklogJpWiki
手順その2 - CSSを変更する
（以下の記事は，Eric WarrenさんがglLabsに投稿されたものをmystral-kkが翻訳したものです。原文はこちら）
準備が全て整ったので，Geeklog用にカスケィデンィング・スタイルシート(CSS)の変更に取りかかることができます。まず最初に，スタイル宣言を構成している様々な部分をのぞいてみましょう。次に示すものは，www.w3schools.comから取ってきたもので，この手引きで扱う範囲を越える追加情報を含んでいます。CSSがどのように機能するか知りたい人はみな目を通すことをお勧めします。次に示すのは基本の部分だけです。
表記法
CSSの文法は，セレクタ，属性，値の3つで構成されている。
セレクタ {属性: 値}
セレクタとは，ふつう，定義したいHTML要素/タグであり，属性とは変更したい項目のことであり，属性ごとに1つずつ値を取ることができます。属性と値の間はコロンで区切り，波括弧({})で囲みます。
body {color: black}
値が複数の単語で構成される場合，値を引用符(””)で囲みます。
p {font-family: “sans serif”}
複数の属性を指定したい場合は，属性の間をセミコロン(;)で区切らなければなりません。下に示す例では，文字色を赤にして段落をセンタリングしています。
p {text-align:center;color:red}
スタイル定義を読みやすくするために，次のように1行に1つずつ属性を記述することもできます。
p
{
text-align: center;
color: black;
font-family: arial;
}
グループ化
セレクタをまとめて指定することもできます。セレクタをコンマで区切って並べてください。下に示す例では，すべての見出し要素をまとめて指定しています。すべての見出し要素で，文字色が緑になります。
h1,h2,h3,h4,h5,h6 { color: green }
上記を念頭に置いて，基本的に私たちが今からやろうとしていることは，2つのファイルをつきあわせ，片方のファイルにある{属性:値}をもう一方のファイルの同名のセレクタに上書きしてゆくということです。共通するセレクタを対応させた後で，独自のセレクタ {属性:値}をGeeklogのstyle.cssに追加してゆきます。ずいぶん変更するように思えるかもしれませんが，実際にはかなり速く終わります。さあ，始めましょう! 
1. デスクトップ上のrefresh/Refresh_Original/imagesフォルダを開き，オリジナルのRefresh.cssをNotepad++で開きます（ファイルを右クリックし，ポップアップメニューの「Notepad++で編集」を選択）。次に，同様にして，refresh/style.cssを開きます。
2. Notepad++で，style.cssという名前の2番目のタブを右クリックし，「別のビュー」を選択します。この時点で，ファイルが2つ横に並んで表示されているはずです。
3. Begin at the top of the Refresh.cssの最上部から始めます。
/********************************************
AUTHOR: Erwin Aligam
WEBSITE: http://www.styleshout.com/
TEMPLATE NAME: Refresh
TEMPLATE CODE: S-0002
VERSION: 1.0
*******************************************/
をコピーし，style.cssの中の
These are the rough rules:
- always put a ';' after the last entry
- always a linebreak before .
- always a linebreak after , ; { and }
- always a . before all classes
- two spaces indent
- no tabs
- no spaces after colons
*/
のすぐ後に貼り付けます。
4.
{ margin: 0; padding: 0; }
をコピーし，
/* SEMANTICS ******************************************************************/
のすぐ後に貼り付けます。
5. bodyセレクタからすべての属性:値の組（{ }内のすべてのもの)をコピーし，
background: #CCCCCC; font: 70%/1.5em Verdana, Tahoma, arial, sans-serif; color: #333; text-align: center;
style.css内のbodyセレクタ内に貼り付けます。既に，属性:値の組がある場合は上書きします。次のようになります。
body {
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
6.
a, a:visited {
text-decoration: none;
color: #4F82CB;
background: inherit;
}
a:hover {
color: #4EBF37;
background: inherit;
}
をコピーし，上書きしながら貼り付けます。
a:link {
background:transparent;
color:#0000FF;
}
a:visited {
background:transparent;
color:#800080
}
a:hover {
background:transparent;
color:#008000
}
a:active {
background:transparent;
color:#FF0000
}
ul要素ではない要素の外見も変更します。それには，
a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
color:#000000;
background:transparent;
text-decoration:none;
}
を
a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
color:#FFF;
background:inherit;
text-decoration:none;
}
に変更します。この変更は，次のセクション(手順その3 - ヘッダを変更する)の最初の手順で使用します。
7.
h1, h2, h3 {
font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
font-weight: Bold;
}
h1 {
font-size: 120%;
}
h2 {
font-size: 110%;
text-transform: uppercase;
color: #88ac0b;
}
h3 {
font-size: 110%;
color: #666666;
}
をコピーし，
h1 {
font-size:125%;
}
h2 {
font-size:100%;
}
h3 {
font-size:100%;
margin:0px;
}
に上書きしながら貼り付けます。
8.
img {
border: 2px solid #CCC;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
をコピーし，
img {
border:0;
}
に上書きしながら貼り付けます。
9.
h1, h2, h3, p {
padding: 10px;
margin: 0;
}
をコピーし，
h3 {
font-size: 110%;
color: #666666;
}
の後に貼り付けます。
10.
ul, ol {
margin: 5px 20px;
padding: 0 20px;
color: #88ac0b;
}
ul span, ol span {
color: #666666;
}
をコピーし，
select {
color:#000000;
font-size:.9em;
}
の後に貼り付けます。
11.
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 10px;
padding: 0 0 0 28px;
border: 1px solid #f2f2f2;
background: #FAFAFA url(quote.gif) no-repeat 5px 5px;
}
をコピーし，
body {
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
の後に貼り付けます。
12.
form {
margin:10px; padding: 0 5px;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
をコピーし，
form {
margin-top:5px;
margin-bottom:5px;
}
に上書きしながら貼り付けます。
13.
label {
display:block;
font-weight:bold;
margin:5px 0;
}
をコピーし，
input,
submit,
td {
color:#000000;
}
の後に貼り付けます。
14.
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
をコピーし，
input {
font-size:.9em;
}
に上書きしながら貼り付けます。
そして，次の行から，'input,'を削除します。
input,
submit,
td {
color:#000000;
}
15.
textarea {
width:400px;
padding:2px;
font-family: Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
をコピーし，
textarea {
color:#000000;
font-family:arial,sans-serif,verdana,tahoma,helvetica;
}
に上書きしながら貼り付けます。
16.
input.button {
margin: 0;
font: bolder 12px Arial, Sans-serif;
border: 1px solid #CCC;
padding: 2px 3px;
background: #FFF;
color: #88ac0b;
}
をコピーし，
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
の後に貼り付けます。
17.
form.search {
position: absolute;
top: 35px; right: 25px;
background: transparent;
border: none;
}
form.search input.textbox {
margin: 0; padding: 1px 2px;
width: 120px;
background: #FFF;
color: #333;
}
form.search input.button {
background: #CCC url(headerbg.gif) repeat-x;
color: #333;
border: none;
width: 70px; height: 21px;
}
をコピーし，
form fieldset div.notes p.last {
margin:0em;
padding-bottom:5px;
}
の後に貼り付けます。
18. 最後に，Refresh.cssに残っている次のコードをコピーし，
/********************************************
LAYOUT
********************************************/
#wrap {
width: 820px;
background: #CCC url(content.jpg) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 0 auto;
}
#header {
width: 820px;
position: relative;
height: 106px;
background: #CCC url(header.jpg) no-repeat center top;
padding: 0;
font-size: 14px;
color: #FFF;
}
#header h1#logo-text {
position: absolute;
margin: 0; padding: 0;
font: bolder 3.3em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
color: #FFF;
text-transform: none;
/* change the values of top and left to adjust the position of the logo*/
top: 28px; left: 50px;
}
#header h2#slogan {
position: absolute;
margin: 0; padding: 0;
font: normal .8em 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;
/* change the values of top and left to adjust the position of the slogan*/
top: 74px; left: 58px;
}
/* Menu */
#menu {
clear: both;
margin: 0; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
height: 26px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 8px;
color: #FFF;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ECECEC;
color: #333;
}
#menu ul li#current a {
background-color: #FFF;
color: #333;
}
/* Main Column */
#main {
float: right;
width: 72%;
padding: 0; margin: 0;
}
#main h1 {
margin-top: 10px;
font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
color: #88ac0b;
padding: 5px 0 5px 25px;
border-bottom: 1px solid #EFF0F1;
background: #FFF url(square-green.png) no-repeat 3px 50%;
}
.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 10px 0 10px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
/* Sidebar */
#sidebar {
float: left;
width: 26.5%;
padding: 0; margin: 0;
}
#sidebar h1 {
margin-top: 10px;
padding: 5px 0 5px 10px;
font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
background: #EEF0F1 url(headerbg.gif) repeat-x left bottom;
border: 1px solid #EFF0F1;
}
#sidebar .left-box {
border: 1px solid #EFF0F1;
margin: 0 0 5px 0;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 3px 0 8px 0; padding: 0;
text-decoration: none;
}
#sidebar ul.sidemenu li {
border-bottom: 1px solid #EFF0F1;
background: url(go.gif) no-repeat 5px 5px;
padding: 2px 0 2px 25px;
margin: 0 2px;
}
#sidebar ul.sidemenu a {
font-weight: bolder;
text-decoration: none;
background-image: none;
}
/* Footer */
#footer {
color: #666666;
background: #CCC url(footer.jpg) no-repeat center top;
clear: both;
width: 820px;
height: 55px;
text-align: center;
font-size: 92%;
}
#footer a { text-decoration: none; }
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* display and additional classes */
.clear { clear: both; }
.gray { color: #CCC; }
style.cssの最後部にある
.poll-vote,
.poll-vote-results {
background:transparent;
color:#000000;
font-size:smaller;
}
の後に貼り付けます。
/********************************************
LAYOUT
********************************************/
を
/********************************************
REFRESH SPECIFIC LAYOUT
********************************************/
に変えておくのは，良い考えです。
19. さあ，ほとんど終わりました。スタイルシートを点検して，画像ファイルが間違いなく正しいディレクトリから読み込まれているのを確認する必要があります。オリジナルのRefreshテーマでは，画像とスタイルシートはともにimagesディレクトリにありました。制作者が画像を参照する際に，彼は適切にURLを書いています。しかしながら，Geeklogの場合，スタイルシートはimagesディレクトリの1つ上のディレクトリにあるので，この違いを考慮してCSSを変更する必要があります。
次のように.jpgや.gifなどの画像ファイルを参照している箇所を見つけたら，
background: #FAFAFA url(quote.gif) no-repeat 5px 5px;
次のように変更して，
background: #FAFAFA url(images/quote.gif) no-repeat 5px 5px;
パスに適切なimagesディレクトリが含まれるようにします。
このファイルの中を探してみると，変更する必要のあるセレクタは次の通りでした。
- blockquote
- form.search input.button
- #wrap
- #header
- #menu
- #main h1
- .post-footer .date
- .post-footer .comments
- .post-footer .readmore
- #sidebar h1
- #sidebar ul.sidemenu li
- #footer
20. Refreshテーマに関しては，実際にはプラグイン固有の色情報をCSSで調節する必要はありません。ヘッダの青及び他の要素の灰色とよく調和しているからです（まるでそうなるよう計画されていたみたいで，うまくいくなんて不思議ですね! 
）。でも他のテーマに関しては，何らかの編集を行う必要があるでしょう。私が見つけた最も簡単な方法は，主要な繰り返し使用されている色を書き留め，Notepad++で検索/置換するというものです。style.cssのプラグイン関係の部分だけを選択・反転させてから，Notepad++で「検索」メニューをクリックしてから「置換」を選択します。ダイアローグの中で，変更前の色のコードと変更後の色のコードを入力し，「選択範囲のみ」にチェックを入れてから，「全て置換」をクリックします。これで一丁上がり! 置換したい色すべてに関してこの作業を繰り返します。
21. さて，新しくなったstyle.cssを保存し（変更するごとにコントロール+Sをクリックして保存していないなら，格好悪いですよ），Webサイトにアップロードして，(public_html)/layout/refresh/ディレクトリ内の既存のファイルに上書きします。Webブラウザでサイトを開き，読み込み直します（上述のように，ブラウザのキャッシュをクリアするのを忘れずに）。
少し野暮ったいですね? 
大丈夫，この時点ではスタイルシートしか変更していないからです。次は，.thtmlファイルをいくつか変更してレイアウトを変更し，新しくなった セレクタ {属性:値} を参照するようにします。
