スポンサーリンク

GUSH2 背景をカスタマイズして差をつけよう!

2015年8月27日gush2カスタマイズ, タイトル, 背景画像

gush2

スポンサーリンク

GUSH2 背景をカスタマイズして差をつけよう!

 

gush2は素のままでも使えますが、個性を出すためにヘッダーの背景・ボディーの背景とフッターの背景画像を変更してみました。

  • gush2は素でも使える。でも個性を出すためにカスタマイズしよう
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

 

背景にする画像を決める。

 

私は師匠(勝手に師匠扱いしています)である“Ellora”様が推奨している背景素材の中から決めています。

背景素材 ⇒ Subtle Patterns
種類が豊富です。

背景画像を決めていない人は、“Naifix”の

素人でもブログをちょっとだけオシャレにできるデザインテクニック

を参考にするとある程度自分が作りたいと思っているイメージのヒントが出てくると思います。

 

画像を圧縮する。

 

少しでもブログを軽くするために、画像を圧縮しておきます。
見た目を変えずに圧縮してくれるTinyPNG

を使って画像を圧縮します。

 

使い方は

 

上記「見た目を変えずに圧縮してくれるTinyPNG」をクリックする。

圧縮したい画像を、表示されているパンダの横にドラッグ&ドロップする。

次に「download」ボタンをクリックして保存する。

保存箇所は、通常はブログテーマ(gush2)内の「images」フォルダーに、私の場合は子テーマを作成していますので、その中の「images」フォルダーに保存します。

 

ボディーの背景を画像に変更

スマホからPCまですべて表示したかったので、子テーマのスタイルシートに下記コードを記述した。

 

ヘッダーの背景画像の変更

ヘッダーの背景画像の変更と同時に、タイトル文字の大きさを変更とホバー時のシャドウの割合を変更して強調してみた。
子テーマのスタイルシートに下記コードを記述した。

 

ヘッダー説明文の文字の大きさの変更と枠の装飾を一部変更

ヘッダーの説明文が長いので、子テーマのスタイルシートに下記コードを記述した。

 

タイトルの前にロゴ画像を挿入

ブログにアクセスした時、少しでも長く滞在してもらえるようにブログタイトルの前にロゴ画像を設置してみました。

尚、この表示はPCのみの設定です。

 

GIFアニメの作成のやり方は、

以前紹介した「stinger5 ヘッダーカスタマイズ タイトルの前にロゴ画像を挿入
を参照してください。

 

子テーマのスタイルシートに下記コードを記述した。

ブログのタイトルの長さ等によって、margin・paddingおよびfontの大きさを変更する必要があります。

 

フッター背景画像の変更

子テーマのスタイルシートに下記コードを記述した。

 

コメントアウトした箇所

スマホからPC表示まで同じ背景画像にするため、以下のコード箇所をコメントアウトする。

親のスタイルシートをコメントアウトするやり方が正解だと思ったが、出来るだけ親のコードを変更したくないために、あえて子テーマに以下のコードを記述した。

 

 

まとめ

レスポンシブなので、すんなりとはカスタマイズ進まなかったけど、出来た時はなんか達成感がありました。

あらためてgush2はいいな、カスタマイズしがいがありますね!!!

へっだーのタイトルをスマホのみ画像にしています。

この解説は後日紹介します。

 

スポンサーリンク