見た目を個性的に！「Gush2」を使う時にやっておきたい最低限のカスタマイズ

Gush2が出て2カ月ぐらい。いくつかのサイトをGush2に換えてみた。Gush系を使っているサイトは少なくないので、個性を出すためにはヘッダーや背景は少なくとも変えておきたい。最低限のカスタマイズ内容を、備忘録も兼ねてまとめてみた。見た目は大事。オリジナルっぽくして目立ちたいものだ。

0.1 ヘッダー部分に背景画像をつける
0.2 グレーの背景画像を変更する
0.3 メニュー部分の背景色を変更
0.4 ヘッダー部分のブログタイトルをロゴに

1
- 1.1
2
3
- 3.1

ヘッダー部分に背景画像をつける

Gush2のCSSは「スマホ用」「タブレット用(768)」「PC用(1024)」の3層構造になっているので、それぞれ別々のヘッダー画像を使うことも可能。CSSの記述は次の通り。

/*--------------------------------------
  ヘッダ見出し
--------------------------------------*/
#header {
	text-align: center;
	background: url(images/header00.jpg) left top repeat;
	/*background: #666;*/
	padding: 0 0 12px;
	border-bottom: 1px solid #fff;
}

PC用はcssファイルの下の方にある次の記述を変更。

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

タブレット用を変更する場合は、768px向けの記述を新しく追加してやる必要がある。

/*--------------------------------------
  ここからタブレット表示設定
--------------------------------------*/

@media screen and (min-width : 768px){

/*--------------------------------------
  768px ヘッダー
--------------------------------------*/
#header {
	text-align: left;
	background: url(../../uploads/2014/11/header-image.png) left top repeat;	
}

グレーの背景画像を変更する

デフォルトだとページ全体にグレーの背景画像が使われているので、これを変更。CSSの下の部分に記述がある。

/*--------------------------------------
  1024px 全体
--------------------------------------*/
html {
	font-family: Meiryo, "メイリオ", verdana, sans-serif;
}

/* 全体に薄いグレーのテクスチャ */
body {
	background: #fff url(images/sos.png) left top repeat;
	/* thnx! http://subtlepatterns.com/ */
}

メニュー部分の背景色を変更

メニューを目立たせるために背景色を変更する。CSSでは”togmenu”と”menubtn”がそれぞれに色を持っているので、これを変更。

/*--------------------------------------
  ナビゲーション
--------------------------------------*/
nav#menu {
	margin-bottom: 24px;
}

.togmenu {
	display: none;
	color: #fff;
	background: #444;
}

.menubtn {
	padding: 8px;
	color: #fff;
	background: #444;
	text-align: right;
}

ただし、スマホ用のプルダウンメニューの背景色は少し下の”nav#menu ul”に色指定を追加してやる必要がある。

nav#menu ul {
	overflow: hidden;
	margin-bottom: 24px;
	background: #1d2088;
}

ヘッダー部分のブログタイトルをロゴに

ブログタイトルをテキストからロゴに変更。ついでにブログのキャプションをロゴの右に配置する。キャプションを右に寄せるのはPCの場合のみで、スマホでは行わない。

キャプションの右寄せを行うならば、style.cssの1024ヘッダーに次の記述を追加。

#h_title {
        width: 23%;
        float: left;
}

#h_caption {
        width: 76.6%;
        float: right;
        margin-top: 30px;
        text-align: left;
}

タイトルをロゴに差し替えるために、header.phpの記述を変更する。headerキャプション内に下記の記述があるので、それを丸ごと書き換え。ロゴ用の画像ファイルはあらかじめアップロードしておき、そのパスを記述する。

↓↓↓変更↓↓↓