「Gush2」初心者によるカスタマイズ③:背景テクスチャ削除とカラー変更

 

シェアしていただけると嬉しいです。
はてブ  Pocket 

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

前回エントリー:「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(ロゴを画像化しただけの状態)

gush2_140908_2

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

gush2_140908_3

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

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

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

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

WordPress Theme Gush2

wp-gush.com

では再見。

スポンサーリンク

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。