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

2 min 45 views
akira

akira

2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在Youtube、ブログアフィリエイト、バイトと貯金で生活しています。人生山あり谷あり。早く寛解したいです。
>>ブログで収入を得る方法は無料で公開しています

FOLLOW

こんにちは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のスタイルを入れていかないと、隙間はできてしまうかもしれません。

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

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

カテゴリー:
ブログで月5万円収入を得る方法

アルバイトはしていますが、僕は現在定職にはついていません。ブログとYoutubeのアフィリエイト収益で生計をたてています。アフィリエイトでお金を得るのは決して楽なことではありませんが、調子の悪いときは休んで、調子の良い時だけ仕事をするという自分のペースで作業をすることも可能です。以下のリンク先ではブログで収益を得る方法を紹介しています。少しでも興味のある方は読んでみてください

関連記事

2 件のコメント

  1. CSSをこのブログの通りに変更しましたが、ヘッダーの部分に画像いっぱいに広がりませんでした……。

    • かなり前の記事ですので、今のワードプレスのバージョンだと適応されないのかもしれません。追記します。

コメントを残す

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