WordPress

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

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

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

2年以上前のワードプレスのバージョンでの結果ですので、現在のものに適応されるかは調べていません。自己責任でお願いします

デフォルト

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

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

変更箇所

テーマの編集から「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のスタイルを入れていかないと、隙間はできてしまうかもしれません。

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

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

ABOUT ME
akira
akira
2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在無職で闘病中です。人生山あり谷あり。早く寛解したいです。

Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /home/harusuki/akira-t.com/public_html/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048