「Gush2」カスタマイズ その5 カラーリング ヘッダーの変更

   2015/03/09

こんにちは、たけぞうです。

まだまだカスタマイズしていきます。

ヘッダーの変更

今回はヘッダー部分を直していきます。

ヘッダーカラーの変更

ヘッダーのカラーリングを緑にします。
style.cssを、

/* ヘッダーに濃いグレーのテクスチャ */
#header {
background: #444 url(images/grey_wash_wall.png) left top repeat;
/* thnx! http://subtlepatterns.com/ */
}

これを

/* ヘッダー背景 常磐緑に */
#header {
background: #2e792d;
}

こうします。
ボディと同じく、リピート画像をとって、色を#444(黒ですね)から#2e792d(常磐緑)に変えました。

スマホやタブレット向けにも修正します。

/*--------------------------------------
  ヘッダ見出し
--------------------------------------*/
#header {
	text-align: center;
	background: #666;
	padding: 0 0 12px;
	border-bottom: 1px solid #fff;

これを

/*--------------------------------------
  ヘッダ見出し
--------------------------------------*/
#header {
	text-align: center;
	background: #2e792d;
	padding: 0 0 12px;
	border-bottom: 1px solid #fff;

こう。
やってる事は同じで、#2e792d(常磐緑)を指定しています。

ヘッダー内説明文部の修正

あと、ついでにサイト名下の説明文(hibimai.comだと、「My Life is Journey of exploration」の部分)に付いている囲み罫をとって、文字色も変えます。

#header .caption {
	color: #fff;
	font-size: 16px;
	padding: 0.8em 0.5em;
	border: 1px solid #444;
	box-shadow:inset -1px -1px 0 rgba(255,255,255,0.4);
	margin: 0 12px;
}

これを

#header .caption {
	color: #333;
	font-size: 16px;
	padding: 0.8em 0.5em;
}

こうします。
文字色を#333(グレー)にしています。
また、border以降を取ることで、囲み罫を消しています。

ヘッダー周りは以上です。

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. […] 一応google先生に確認したら「日々是迷子」さんに「(Gush2)カスタマイズ その5 カラーリング ヘッダーの変更」という記事があったのでわからない方はこちらを参考にしてくださ […]

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

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

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