1.8.6 Released !

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ

今回は、ロゴ画像を画面サイズいっぱいに表示するカスタマイズ方法について紹介します。まずはどのような見た目になるのか、ということを紹介します。

通常の場合

今回のカスタマイズでこうなる

画像がデカデカと表示されるようになります。ちなみに「SANGO」という文字は、画像に含まれるものです。このように画像上にタイトルを表示できるわけではないのでご注意ください。

通常の場合(スマホ表示)

今回のカスタマイズにより(スマホ表示)

スマホだと上のようになります。使用する画像によっては、ハンバーガーメニューはオフにするのが良いかと思います。


ロゴ画像を横いっぱいに表示するカスタマイズ手順

それではここからカスタマイズ手順を解説していきます。

手順1:カスタマイザーで設定

まずは[外観]⇒[カスタマイズ]⇒[サイトの基本設定]⇒[基本情報とロゴの設定]を開きます。

↑ロゴ画像をアップロードし、さらに[ロゴ画像だけを表示]と[大画面表示時にもロゴを中央寄せ]にチェックを入れます。

手順2:専用のCSSを貼り付ける

次にロゴ画像を横全体に表示するためのCSSを適用させます。子テーマのstyle.cssに貼り付けることをおすすめします。子テーマの使い方は下の記事を参考にしてくださいませ。

WordPressの子テーマとは?安全にカスタマイズを行う方法

CSSは以下になります。

style.css
/*ロゴ画像を横全体に表示*/
#inner-header, #drawer + #inner-header, #logo {
    width: 100%;
    max-width: 100%!important;
    margin: 0;
    padding: 0;
}
.header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
}
.header--center #logo {
    padding: 0;
}
/*END ロゴ画像を横全体に表示*/

これでカスタマイズは完了です。

この方法の問題点

しかし、この方法だと常に横幅いっぱいにロゴ画像が表示されることになります。つまり、画面サイズが大きいパソコンで見たときにはロゴ画像のサイズが恐ろしいことになるわけです。

大きい画面でも横いっぱいに表示されてしまう

ちょっと主張が強すぎますよね。画像がぼやけてしまいそうですし。そこで、最大の横幅に制限を設けるのがおすすめです。というわけで、一旦さきほどのCSSをまるっと消してくださいませ。

ロゴ画像の最大幅を指定する場合のCSS

style.css
/*ロゴ画像を横全体に表示*/
#inner-header, #drawer + #inner-header, #logo {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 600px;
}
.header--center #logo {
    padding: 0;
}
/*END ロゴ画像を横全体に表示*/

赤字の部分で最大の横幅を指定しています。すると、これ以上のサイズには大きくならなくなります(それ以下の画面サイズで見たときには、横いっぱいに表示されます)。

ただし、ロゴ画像が背景色となじむようにする必要はありますね。

ロゴ画像の最大幅をメインコンテンツと合わせるCSS

上の画像のように「ヘッダー下のコンテンツ部分と、ロゴ画像の幅を揃えたい」という場合もあるかと思います。以下のCSSを使うことで(さきほどのCSSを貼っている場合には消してください)、コンテンツ幅と揃えることができます。

style.css
/*ロゴ画像を横いっぱいに*/
#inner-header, #drawer + #inner-header, #logo {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 1000px;
}
.header--center #logo {
    padding: 0;
    background: #323232;
}

@media only screen and (min-width: 1030px) {
    .single #logo img, .page #logo img {
        max-width: 92%;
    }
}

@media only screen and (min-width: 1240px) {
    .single #logo img, .page #logo img {
        max-width: 1180px;
    }
}
/*END ロゴ画像を横いっぱいに*/

↑上のコードのうちbackground: #323232;でロゴ画像の左右の背景色(上の画像の黒色の部分)を指定しています。必要に応じて色コードは変えて頂ければと思います。

73 COMMENTS

May 2019/11/20

お世話になっております。

こちらの記事の”ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ”を施しておりますが、スマホで見たときにヘッダーの上に隙間ができてしまいます。(PCでは問題なし)

画像のサイズは2580 x 294 ピクセルです。

ロゴ画像に推奨サイズはない、との情報をこちらのスレッドで確認しましたが、スマホで見たときにヘッダーの上に隙間ができないように、ロゴ画像をいっぱいに表示するためにはどのように設定したらよいでしょうか?

回答を見る
美波 2019/10/18

いつもお世話になっております。

ご質問させてください。
上記の「ロゴ画像の最大幅を指定する場合のCSS」を使用しているのですが、スマホは違うサイズで指定したいと思っています。

どのようにすれば良いでしょうか?
(PCはサイズ大きめ設定、スマホは小さめ設定にしたい)

/*ロゴ画像を横全体に表示*/
#inner-header, #drawer + #inner-header,#logo{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.header–center #logo img {
padding: 0;
height: auto;
width: 100%;
max-width: 600px;
}
.header–center #logo {
padding: 0;
}
/*END ロゴ画像を横全体に表示*/

よろしくお願いいたします。

回答を見る
轟元気 2019/10/03

いつもお世話になっております。
ヘッダーに背景画像を設定しようと思い、CSSに
.header{
background-image: url(abcd.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #56b1bf;
}
と記述したのですが、どうも上手いきません。
自分で色々と調べてみたのですが、答えが見つからなかったのでご質問させて頂きました。
お忙しい中、恐縮ですが、お手すきの際にでもご教授いただけると幸いです。

回答を見る
【タイ語翻訳通訳マイちゃん】 2019/09/04

先日、サンゴのテーマを購入しました。
SANGO Child: スタイルシート (style.css)にコードを書き込んでいますが、ロゴが小さいままです。
ご指導お願い申し上げます。

回答を見る
ヤザワ 2019/08/06

お世話になります。恐縮ですが
ロゴ画像が大きく表示されないです。
SANGO Child: スタイルシート (style.css)
に以下のコードを書き込んでいます。
間違っていますか?
すいませんがご教授ください

@charset “UTF-8”;
/*
Theme Name: SANGO Child
Theme URI:
https://saruwakakun.design
Author: SARUWAKA
Author URI: https://saruwakakun.com
Template: sango-theme
Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
/*ロゴ画像を横いっぱいに*/
#inner-header, #drawer + #inner-header,#logo{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.header–center #logo img {
padding: 0;
height: auto;
width: 100%;
max-width: 1000px;
}
.header–center #logo {
padding: 0;
background: #323232;
}

@media only screen and (min-width: 1030px) {
.single #logo img, .page #logo img {
max-width: 92%;
}
}

@media only screen and (min-width: 1240px) {
.single #logo img, .page #logo img {
max-width: 1180px;
}
}
/*END ロゴ画像を横いっぱいに*/

回答を見る
ホンマ 2019/03/21

お世話になります。
ロゴ画像の背景が黒くなってしまったのですが、原因が分からないので教えてください。
もともと透過されている画像を設定していましたが、黒くなってしまうので現在はやむなく白い背景の画像を設置しています。それでもPCで見たときは黒い部分が見えてしまうのでとても困っています。
カスタマイズの「色」の欄は白に設定しています。
お手数ではございますが、よろしくお願い致します。

回答を見る
naba 2019/03/12

サイトでヘッダーを枠いっぱいにする方法が乗っていたので、それ通りに試したのですが、真ん中に小さい画像がぽつんとあるだけでした。
なにか対策があれば教えていただきたいです。
よろしくお願いします。

回答を見る
山崎雄大 2019/01/04

すみません。
今見たらPC上でしっかり大きく表示されていました。
しかし、なんだかピンボケな感じがします、、
もっと鮮明にしたい場合はどうしたらよいでしょうか?

お手数をおかけします。

回答を見る
山崎雄大 2019/01/04

ヘッダー画像を入れてみたのですが、PC上だと小さいままになってしまいます。
また、iPhoneで見た場合、なぜかロゴの下に青い空間ができてしまいます、、

どのように対処すればいいでしょうか?
お手数をおかけしますがよろしくお願いします。

回答を見る
ゆか 2018/11/25

ロゴ画像の横の背景を白にしたく、#ffffffを入力したのですが、エラーになりサイトを壊す可能性になりますみたいなメッセージが出ます。
どうしたらよろしいでしょうか?

回答を見る
カプラ 2018/11/04

こちらの記事を参考に初めてヘッダー画像入れてみました。画像自体は無事に入ったのですが、ヘッダー画像のパスがhttpになってしまいました。

色々検索したところ、cssの中にある、#headerの中に、httpsでパスを直接指定すればよいという情報を見つけたのですが、cssの中にそれが見つからず…。そもそも、そういうのが必要だとすれば記事内で紹介されているはずでしょうから私の環境だけおかしいのかもしれませんが、何か解決方法があればご教授頂ますようよろしくお願いします。

回答を見る
みほ 2018/10/12

ヘッダーアイキャッチ画像を入れましたが高さが足らず途中で切れてしまっています。横幅は大丈夫なのですが、高さを出したいときはどのような設定にすればいいのでしょうか?

回答を見る
みなみ 2018/09/06

いつもお世話になっております。
ロゴ画像の最大幅を指定する場合のCSSを設定したらスマホの左上のメニュー(三本線)のしたにロゴが入り込んでしまいます。
どのように対応したら良いでしょうか?

回答を見る
山本 2018/09/02

SANGOを購入して2つ目のHPを作成しているのですが、ロゴ画像を横いっぱいに表示する事が出来ません。

ひとつめは上手くいったのですが、ふたつめは上手くいきません。

回答を見る
SEN 2018/08/26

いつもお世話になっております。
当初はロゴ(ヘッダータイトル)のサイズがPCもスマホも正常に表示されていましたが、気づいたらスマホもPCも横に広がっていました。
特にPCやタブレットの広がりが大きいです。
(縦幅そのままで横幅だけ広がり、文字が潰れた状態)
もしかすると、なにか設定を触ってしまったのかもですが、原因わかりますでしょうか?
ロゴの元画像は、横×縦:490×80サイズでアップロードしていますが、実際のPC表示は610×80程度で横だけ拡大表示されています。
PCは中央寄せをすると少しマシになりますが、左寄せの場合は原型と明らかに異なります。
よろしくお願いいたします。

回答を見る
2018/06/07

背景#323232を変更したところエラーが出ます。
expected colon at line xxxxxxx, col xxx
エラーが出たまま、もとの#323232に書き換えてもなぜか消えません。

カラー以外は全く変更を入れていませんが、何回やっても同じです。
そのまま更新していいものか悩んでいます。

回答を見る
KEN 2018/06/06

こんにちは、ヘッダーの高さとロゴの画質についての質問です。

PCで表示した際に高さを90pxぐらいにしたいと思ったため、CANVAを使ってロゴを幅1200 x 高さ90 のサイズで作成しました。
「ロゴ画像を横いっぱいに表示するカスタマイズ手順」を参考に設定したところ、PC・スマホ表示においてそれぞれ以下の様な状態になり、どうにか解決できないものかと模索しております。

【PC】
ロゴの画質が粗い・・・

【スマホ】
↓の画像内に赤い矢印がある部分(見にくくてすみません)がメニューの背景色になってしまう。

https://drive.google.com/open?id=1OdSIgIIqEf2gte1riNG6YHPNFx0QA3p3

ロゴ自体の高さを高くすれば解決できるのですが、そうするとPCで表示した際に高くなりすぎてしまいます・・・

PC表示において高さを90pxぐらいにしつつ、スマホ表示においては赤い矢印の部分まで白くしたいのですが、なにか解決策がありますでしょうか?

よろしくお願いいたします。

回答を見る
田中 2018/06/04

お世話になります。

質問なのですが、ヘッダーアイキャッチ画像をフルサイズ(横幅いっぱい)で表示させることはできますでしょうか?

可能でしたら、そのやり方をご教示できればと思います。
よろしくお願いします。

回答を見る
taka 2018/05/13

いつもお世話になっております。

質問させて頂きたいのですが、
ロゴ画像について、こちらの「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」のコードをそのまま「SANGO Child: スタイルシート (style.css)」に入れさせて頂くことで上手く表示はされているのですが、なぜか「記事ページ」のみロゴ大きさが異様に大きくなってしまいます…(PCで表示したときに発生します)

解決方法をご教授頂けますと幸いです。

回答を見る
Kumi 2018/05/06

いつもお世話になっております。1つ質問がございます。
ttps://dogfood-media.com
上記サイトのヘッダーのように、500×100のヘッダー画像を中央揃えで表示したいのですが、どのように揃えればいいでしょうか?具体的なCSSなどのコードをご教授いただけますと幸いです。

回答を見る
hiroa 2018/02/26

初めまして。
「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」で揃えてみたのですが、
PC表示でヘッダーメニューの背景も一緒に揃えることは可能でしょうか?

回答を見る
まゆ 2017/12/20

こんにちは。いつもこちらのサイト様には、大変お世話になっております。
質問してもよろしいでしょうか。
ロゴ画像の拡大には成功したのですが、ヘッダーの縦幅の調節は出来ますでしょうか?(もう少し縦幅を狭めたいです。)

#inner-header, #drawer + #inner-header,#logo の部分に、heightを追加してみたのですが、上手くいきませんでした。
アドバイス頂ければ幸いです。宜しくお願い致します。

回答を見る
竹田 正志 2017/11/04

ロゴ画像の推奨サイズはありますか?

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン