GUSH2 背景をカスタマイズして差をつけよう！
gush2は素のままでも使えますが、個性を出すためにヘッダーの背景・ボディーの背景とフッターの背景画像を変更してみました。
- gush2は素でも使える。でも個性を出すためにカスタマイズしよう
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いいたします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
背景にする画像を決める。
私は師匠（勝手に師匠扱いしています）である“Ellora”様が推奨している背景素材の中から決めています。
背景素材 ⇒ Subtle Patterns
種類が豊富です。背景画像を決めていない人は、“Naifix”の
素人でもブログをちょっとだけオシャレにできるデザインテクニック
を参考にするとある程度自分が作りたいと思っているイメージのヒントが出てくると思います。
画像を圧縮する。
少しでもブログを軽くするために、画像を圧縮しておきます。
見た目を変えずに圧縮してくれるTinyPNG
を使って画像を圧縮します。
使い方は
上記「見た目を変えずに圧縮してくれるTinyPNG」をクリックする。
圧縮したい画像を、表示されているパンダの横にドラッグ＆ドロップする。
次に「download」ボタンをクリックして保存する。
保存箇所は、通常はブログテーマ（gush2）内の「images」フォルダーに、私の場合は子テーマを作成していますので、その中の「images」フォルダーに保存します。
ボディーの背景を画像に変更
スマホからＰＣまですべて表示したかったので、子テーマのスタイルシートに下記コードを記述した。
[css]
/*————————————–
全体定義ボディー背景の追記
————————————–*/
body {
margin: 0;
padding: 0;
background: #fff url(images/foggy_birds.png) left top repeat;
/* thnx! http://subtlepatterns.com/ */
}
[/css]
ヘッダーの背景画像の変更
ヘッダーの背景画像の変更と同時に、タイトル文字の大きさを変更とホバー時のシャドウの割合を変更して強調してみた。
子テーマのスタイルシートに下記コードを記述した。
[css]
/*————————————–
ヘッダ見出し
————————————–*/
#header {
text-align: center;
padding: 0 0 12px;
border-bottom: 1px solid #fff;
background: #666 url(images/brushed_alu_dark.png) left top repeat;
/* thnx! http://subtlepatterns.com/ */
}
#header .top_title {
margin-bottom: 12px;
font-size: 32px;/* タイトル文字の大きさを変更 */
}
#header .top_title a {
color: #efefef;
text-shadow: 1px -1px 0 rgba(0,0,0,1);
font-weight: bold;
background: url(images/sumaho hedda rogo.png);/* スマホ用ヘッダー画像を追記 */
}
#header .top_title a:hover {
color: #444;
text-shadow: -1px 1px 0 rgba(255, 255, 255, .7);/* シャドウの割合を0.4から0.7に変更 ホバー時を強調 */
}
[/css]
ヘッダー説明文の文字の大きさの変更と枠の装飾を一部変更
ヘッダーの説明文が長いので、子テーマのスタイルシートに下記コードを記述した。
[css]
/*—————————–
ヘッダー説明文のフォント変更
——————————*/
#header .caption {
color: #fff;
font-size: 14px;
padding: 0.8em 0.5em;
border: 1px solid #666;
box-shadow:inset -1px -1px 0 rgba(255,255,255,0.6);
margin: 0 12px;
}
.hgroup {
margin: 24px 0 0;
}
[/css]
タイトルの前にロゴ画像を挿入
ブログにアクセスした時、少しでも長く滞在してもらえるようにブログタイトルの前にロゴ画像を設置してみました。
尚、この表示はＰＣのみの設定です。
GIFアニメの作成のやり方は、
以前紹介した「stinger5 ヘッダーカスタマイズ タイトルの前にロゴ画像を挿入」
を参照してください。
子テーマのスタイルシートに下記コードを記述した。
[css]
/*————————————–
PC表示設定箇所に追記
————————————–*/
@media screen and (min-width : 1024px) {
/*—————————–
ヘッダーの前にロゴ画像挿入
——————————*/
#header .top_title a:before {
background: url(“images/logo.gif”) repeat scroll 0px 0px #EEEEEE;
border-radius: 120px;
box-shadow: 2px 4px 10px -3px #555555;
content: “”;
display: inline-block;
font-family: optima;
height: 100px;
line-height: 1;
margin-top: -15px;
margin-left: 0;
margin-right: 10px;
text-align: center;
vertical-align: middle;
width: 100px;
}
}
[/css]
ブログのタイトルの長さ等によって、margin・paddingおよびfontの大きさを変更する必要があります。
フッター背景画像の変更
子テーマのスタイルシートに下記コードを記述した。
[css]
/*————————————–
フッター
————————————–*/
#footer {
padding: 12px 0 24px 0;
color: #fff;
text-align: center;
background: #444 url(images/always_grey.png) left top repeat;
/* thnx! http://subtlepatterns.com/ */
overflow: hidden;
}
[/css]
コメントアウトした箇所
スマホからＰＣ表示まで同じ背景画像にするため、以下のコード箇所をコメントアウトする。
親のスタイルシートをコメントアウトするやり方が正解だと思ったが、出来るだけ親のコードを変更したくないために、あえて子テーマに以下のコードを記述した。
[css]
/*————————————–
以下のＰＣ表示箇所をコメントアウト
————————————–*/
/*————————————–
ここからPC表示設定
————————————–*/
@media screen and (min-width : 1024px) {
/*————————————–
1024px 全体
————————————–*/
/* 全体に薄いグレーのテクスチャ */
body {
/*background: #fff url(images/sos.png) left top repeat;*//*コメントアウト*/
/* thnx! http://subtlepatterns.com/ */
}
/*————————————–
1024px ヘッダー
————————————–*/
/* ヘッダーに濃いグレーのテクスチャ */
#header {
/*background: #004 url(images/grey_wash_wall.png) left top repeat;*//*コメントアウト*/
/* thnx! http://subtlepatterns.com/ */
}
/*————————————–
1024px フッター
————————————–*/
#footer {
width: 100%;
margin: 0 auto;
clear: both;
/*background: #444 url(images/grey_wash_wall.png) left top repeat;*//*コメントアウト*/
/* thnx! http://subtlepatterns.com/ */
}
}
[/css]
まとめ
レスポンシブなので、すんなりとはカスタマイズ進まなかったけど、出来た時はなんか達成感がありました。
あらためてgush2はいいな、カスタマイズしがいがありますね！！！
へっだーのタイトルをスマホのみ画像にしています。
この解説は後日紹介します。
コメント