前回ロゴ画像とファビコンをオリジナルに変更しましたが、全体感で見るとほぼ変わった感がありません。やはりぱっと見の印象を大きく変えるには色目をガラッと変えなければなりません。

前回エントリー：「Gush2」初心者によるカスタマイズ②：ロゴを画像化してファビコン差し替え

ブログ全体の色目を変える

白黒モノトーンが好きな私。デフォルトだと全体的にグレイッシュなので、これをホワイトに変えていきます。

ボディカラー：グレー→ホワイトに変更

まずはボディ部分の背景テクスチャを削除します。スタイルシート（style.css）から下記記述部分を見つけてください。

そしたら下記の文言部分を削除します。images フォルダにある sos.png という画像がリピートされるということなので、この命令を削除すればテクスチャが消えます。

url(images/sos.png) left top repeat;

削除したら更新ボタンを押して保存し、ブログを更新してみましょう。グレイッシュなテクスチャ素材が消えて、背景が真っ白になっていると思います。

ヘッダー：グレー→ホワイトに変更

ヘッダー部分も白くスッキリさせようと思います。同じくスタイルシート（style.css）から。

見つかったらまずは下記文言を削除。

url(images/grey_wash_wall.png) left top repeat;

ただしこのままだと背景色がグレー（#444）のままなので、ここをホワイト（#fff）に修正します。

終わったら更新ボタンを押して再確認。

これで全体からテクスチャ削除&白背景となり、ずいぶん雰囲気を変えることができました。

※10/10追記：スマホ、タブレットでのヘッダーカラー変更

こちらメールでご質問いただきましたので追記します。全体定義でのヘッダー見出し部分。

デフォルトだと背景色がグレー（#666）となっているので、ここを任意のカラーに変更しましょう。当ブログの場合はもちろんホワイト（#fff）となります。

これで保存してスマホやタブレットで確認すれば変更されています。

サイト説明文のフォントカラーを変える

ただしサイト説明文のフォントカラーはホワイトなので、このままだと何も見えません。なのでフォントカラーを他の文字色に合わせます。

ホワイト（#fff）になっている 部分を他の文字色と一緒（#333）に変更しました。更新して確認すると、説明文がちゃんと見えているはずです。

サイト説明文のボックスを削除する

これでだいぶ整いましたが、もう1つやりたいことがあります。サイト説明文のボックスは要らないかなと思うので、これもついでに削除しちゃいます。

手を入れる箇所は前述の部分と一緒です。ここから下記文言をすべて削除。

border: 1px solid #444;
box-shadow:inset -1px -1px 0 rgba(255,255,255,0.4);
margin: 0 12px;

削除したら更新を忘れずに。

今回のビフォーアフター

Before（ロゴを画像化しただけの状態）

After（全体の色目をホワイトベースに変更）

今回はけっこう変わった感が出ましたね。

ただ全体をホワイトベースにしたことで、スッキリはしたものの逆にヘッダー周りが少し寂しいかな？という気付きも。ここをどうするかはまた追々考えようかな。

という初心者カスタマイズ第2回でした。1か所変えるたびにプレビュー→（あかん！）→元に戻して別の場所いじる→プレビューの繰り返しw 「それは削除しなくてもいいのに」「これ変えれば一発なのに」という意見もあるかと思いますが、緩やかにご覧いただければ。

また今回の変更点は Gush2 サイトにも書いてありますよ。

では再見。