【マテリアル】カスタマイズ ヘッダー画像を画面いっぱいに表示する方法

こんにちはAKIRA(@harusukisuki200)です。
今回はワードプレスのテーマ「マテリアル」のヘッダーのカスタマイズ方法です。

カスタマイズ場所はヘッダー画像部分で、これを画面いっぱいに広げる方法です。

デフォルト

マテリアル カスタマイズ ヘッダー画像を画面いっぱいに表示する方法
デフォルトでヘッダー画像を設定すると上記のようになります。

この画像を画面端から端まで広げます。

変更箇所

テーマの編集から「style.css」を開きます。
こちらの「204行目」は下のようなコードになっています。

.header-inner{
	width: 1058px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
}

これを下のコードに変更します。

.header-inner{
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0 auto;
}

マテリアル カスタマイズ ヘッダー画像を画面いっぱいに表示する方法
変更すると上の画像のように画面いっぱいに広がりますが、メニューバーとヘッダー画像の間に少しだけ隙間があきます。

気になるのでこの隙間もなくします。

変更箇所は217行目付近に下ののようなコードがあります。

.header-img{
	max-width: 100%;
	padding: 20px 0 10px;
}



この部分に「 margin-bottom: -10px;」を追加します。

.header-img{
	max-width: 100%;
	padding: 20px 0 10px;
     margin-bottom: -10px;

}

マテリアル カスタマイズ ヘッダー画像を画面いっぱいに表示する方法

追加すると上の画像のように隙間がなくなります。

これでパソコンからのヘッダー画像の隙間はなくなりましたが、スマフォやタブレットから閲覧すると隙間ができてしまいます。

スマフォのレイアウト

スマフォのヘッダー画像の下のすきまをなくすには、1830行目付近にデバイスごとにレイアウトの調整のスタイルがありますので、こちらを変更します。

デバイスごとに下のコードを入れていけば大丈夫です。

画像の縦×横の比率によって「 margin-bottom: -40px;」こちらの値は変わってくると思いますが確認しながら調整してみてください。

下のコードは例



.header-img{
	max-width: 100%;
	padding: 20px 0 10px;
        margin-bottom: -40px;

}


ちなみに上のコードだけだとスマフォで閲覧した時の、ヘッダー画像の高さが少し低いので height:100px; を私は入れました。こちらもお好みで調整してください。

マテリアル カスタマイズ ヘッダー画像を画面いっぱいに表示する方法

@media screen and (max-width: 700px)
@media screen and (max-width: 600px)
@media screen and (max-width: 450px)
@media screen and (max-width: 350px)
かなり細かく横幅によってのスタイルが設定されています。

格幅ごとに.header-imgのスタイルを入れていかないと、隙間はできてしまうかもしれません。

検証してないのでちょっとわからないですが・・・

以上、カスタマイズ方法でした。

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です