Gush2カスタマイズ ヘッダーの背景画像削除&変更方法

   2015/04/24

このブログでは、Elloraさんが作成したWordPressテーマ「Gush2」を使用しています。

Gush2は、そのままでも使用で来ますが、アレンジしていく事で、ブログ独自の色を出す事が出来ます。

前回は、ブログのタイトルロゴを設置する方法を紹介しました→Gush2カスタマイズ タイトルロゴを指定する方法

そこで、Gush2でカスタマイズした事はこのブログに記しておこうと思います。

今回は、ヘッダーです。ブログを訪問した人はまずヘッダーを注目します。ブログの玄関です。

Gush2においてデフォルトで設定されているものを解除してみようと思います。

スポンサーリンク

Gush2カスタマイズ ヘッダーの背景画像を削除する方法

Gush2のstyle.cssの流れとしては、次のようになっているようですね。

スマホ用の記述はどのサイズにも通用する基本的な設定で、タブレットやPCで見たときは設定が上書きされるイメージですね。
レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ

まず、スマホのデザインを設定し、必要に応じて、タブレット・PCでのデザインを記述していく感じです。

デフォルトのヘッダーのstyle.cssは以下のようになっています。

これを以下のように編集しました。

変更した点は、

  • 文字色を白色に指定
  • 背景を指定した画像へ変更

です。

backgroundには、背景にしたい画像をアップロードしたURLを記載しています。

背景として利用した画像は、本家で紹介されていたSubtle Patternsを利用しました。

Subtle Patterns | Free textures for your next web project.

これによって、プレビューが次のように変化しました。

gush2カスタマイズ ヘッダー画像を変更する方法

▲背景を指定した画像へ変更することができました。

また、1024px以上のヘッダー部分の記述も変更します。

ここは、スマホと異なるデザインにしたい場合に変更します。

現在の場合、スマホとPCで同じデザインで良いので、以下のように、コメントアウトだけ行います。

以上で、スマホとPCとタブレットで同じ背景画像に指定する事が出来ました。

最後に、ヘッダーの「ページの概要」にあたる部分の枠線を消しておきます。

Gush2カスタマイズ ヘッダーの枠線を消す方法

の記述を以下のように変更します。

枠線となっている部分をコメントアウトしておきました。

gush2カスタマイズ ヘッダーの背景画像変更方法

▲右側では、枠線が取れていることがわかります。

最初の方は、style.cssの記述に戸惑いましたが、構造がわかってくると、編集しやすいようになっていると感じました。

Gush2はそのまま使っても良いですが、玄関にあたるヘッダーをカスタマイズすると、ひと味違うブログになると思います。

関連記事

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

コメント一覧

  1. WordPressでのブログ作成~忘備録①タイトルロゴを指定したい!!!~ より:

    […] 「Gush2カスタマイズ ヘッダーの背景画像削除&変更方法」を参考にしてください。 […]

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

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

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