Gush2 ブログ運用

【Gush2カスタマイズ】ヘッダーとロゴを変更する

2016/05/22

ご案内 紆余曲折を経て、現在はStinger7を使用しています。

 

Stinger5に比べると情報が少ないGush2のカスタマイズ。

僕も大したことはやっていないですが、自分用の備忘録も兼ねてまとめていきたいと思います。

まず第1回めは基本中の基本ですが、ヘッダー・フッター・背景の変更です。

スポンサーリンク

Gush2のヘッダーをカスタマイズする

まずはヘッダー。ブログのイメージを決定する大事な部分ですので、こだわりたいですね。

スマホとパソコンで分かれていますので、それぞれ漏れなく設定していきます。

画像を用意し、アップロードする

まず、メディアに背景の画像をアップします。

繰り返しで並べた時に変な継ぎ目ができないように、似たような柄が続くものを使うといいでしょう。

例えばこんな感じで。

banner2

自分でつくるなり使う画像がもう手元にある人はそれでいですが、アテがない人はphotoACあたりで調達するとよいでしょう。

無料の会員登録さえすれば、よさ気な素材が手に入ります。

Photo AC(無料)

 

画像のURLをコピーし、CSSを変更する

2015-0704-01b

ここです。

 

あとはCSSの背景部分を書き換えてあげましょう。

ポイントは2つ。

  1. 画像の変更指定
  2. 画像が表示されなかった時に表示される背景色の指定

 

完成図

うまいこといきましたでしょうか?

背景を薄くしたせいでブログタイトルと説明文が見えなくなってしまいました。

説明文を囲っている枠も邪魔です。

もうちょっといじってやらなきゃいけません。

 

ちなみにこのブログでは背景を真っ白にしているので、こんな感じにしています。

#fffの部分を好きな色にすれば、単色のヘッダーをつくることができます。

Gush2のブログタイトルをカスタマイズする

ブログタイトルのカスタマイズ方法は2つ。

  1. テキスト形式のまま、大きさや色を変える
  2. 画像のロゴを使う

PHPで分岐してやればスマホとパソコンで振り分けることもできますが、原則は共通仕様になります。

テキスト形式のまま、大きさや色を変える

CSSを変更するだけで対処できます。

この記述を探して変更しましょう。

ロゴ画像を使う

テンプレートをいじってやる必要があります。

といってもそう難しくはありません。

ロゴをつくってアップしてから、外観>>テーマの編集>>ヘッダーと進みます。

ここに書き込む

あとは

 

一つ注意したいのは、ロゴに使う画像は背景を透過したものを使うことです。

理由は・・・やってみればわかります。

残念なロゴ

Gush2のブログ説明文の部分をカスタマイズする

これはCSSだけで対処できます。

 

最小限のポイントだけ書きましたが、位置や余白を変えたい場合はpaddingやmarginをいじってやることになります。

これでパソコン用の画面のヘッダーのカスタマイズはおしまいです。

お疲れ様でした。

Gush2のスマホのヘッダーをカスタマイズする

これだけだとスマホのヘッダーは何も変わっていません。

特にブログタイトルの文字色を変えたり、ロゴに差し替えた場合、そのままだと違和感全開になってしまいますので、必ず確認しましょう。

スマホのヘッダーの背景を変更する

CSSの変更だけで終わります。

ただ、スマホの場合画面が小さいので安易に背景に模様を入れると見にくくなりますので、注意しましょう。

 

色だけ変えることもできます。

このブログの場合は真っ白にしていますが、お好きにどうぞ。

スマホのメニューの色を変える

スマホ用の表示でヘッダーの背景を変えると、一つ問題が起こります。

トップに置いてあるアコーディオンメニューが見えにくくなります。

メニューが見えない

赤枠でくくった部分、メニュー開いているのですが、まったくわかりません。

これじゃせっかく来てくれた人が呆れて帰っちゃいます。

メニューの背景とテキストの色を変えましょう。

CSSの変更だけでOKです。

 

ただし!!

スマホ用とタブレット用の2ヶ所変更しなきゃだめです。

nav#menu ul li a { で始まる表記部分は3ヶ所ありますので、上2つを変更します。

 

まず一番上にあるnav#menu ul li a { で始まる部分を変更。

これでスマホでの表示が変わります。

 

次に2番めにあるnav#menu ul li a { で始まる部分を変更

これでタブレットでの表示を変更できます。

 

バナーの背景にあまり凝った模様の画像を使うと、メニューが使いにくくなりますので、僕のオススメは淡い単色です。

まとめ

カスタマイズが終わったら必ずパソコンだけではなく、スマホ・タブレットでの見え方も確認するようにしてください。

たまにパソコンで見るとすっごいセンス溢れてるのに、スマホで見ると頭にはてなマークが飛びまくるブログがあります。

実際にスマホとタブレットで確認するのが一番ですが、両方持っていない人はパソコンでもブラウザの幅を変えると、それぞれでの見え方を確認できます。

 

こんなこと偉そうに言いながら、僕も自分のブログでタブレット用のメニューが調整できていませんでした。

これからも自分のブログチェックしつつ、まとめ記事として書かせていただこうと思います。

スポンサーリンク

-Gush2, ブログ運用

(たかなし むつき)と読みます。元某大手通信系コールセンター派遣社員。36歳で派遣脱出を達成!今はシステム運用の中の人です。コールセンター仕事術や転職など、自分でいうのもアレですが、いいこと言ってます。 >> 詳細プロフィール


【運用ブログ】

WinF
日常を理系目線で鋭くえぐる大人の読み物
http://winfriede.com/

WinF-JC
30代から派遣を脱出する方法満載の転職ブログ
http://winfriede.com/jobchange/

WinF-FX
FXを使って1日2分で作業と月々5,000円の積立を7,000万円にする方法まとめ
http://winfriede.com/FX/

しょうもないことばっか送りつけるのであまりSNSのフォローはオススメしません。。

【Instagramやってます】
Instagram

【LINE@やってます】
更新情報のほかに、毎朝7時と夜10時に”意識高い系の独り言"を配信します。
暇な時、気が向いたら返事するので気軽に話しかけてください。

友だち追加数

※@winfで検索でも友達登録ができます。