Ver1.4.1をリリースしました(5/19)

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

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

通常の場合

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

画像がデカデカと表示されるようになります。ちなみに「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;でロゴ画像の左右の背景色(上の画像の黒色の部分)を指定しています。必要に応じて色コードは変えて頂ければと思います。

44 Comments

まゆ

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

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

返信する
サルワカくん

お世話になっております。
ロゴ画像の高さ=ヘッダーの縦幅となるかと思うので
ロゴ画像自体のサイズを変えてみてください。
(画像内の上下にスペースを切り取れば良いと思います)

返信する
まゆ

早速、ご回答頂きありがとうございます!
サイズ変更で、思い描いていたようになりました。
勉強になりました。ありがとうございます。

返信する
さぶ

ものすごく初心者でSANGOを購入させていただきました。
こちらのCSSをコピペして貼り付けるだけで良いのでしょうか?
そのようにしても上手く全体表示できない状況です。

返信する
サルワカくん

・ブラウザのキャッシュは削除されましたか?
・(それでもうまく全体表示されない場合)CSSはどちらに貼り付けましたか?

返信する
hiroa

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

返信する
サルワカくん

はじめまして。ヘッダーメニューの背景とは、背景色でしょうか。
背景色であれば、外観⇒カスタマイズ⇒色から変更できます。

返信する
hiroa

先ほどhiroaで投稿した者なのですが、言葉足らずで分かり難かったと思うので補足させて下さい。
URLのように「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」を貼り付けると、
PC閲覧時にロゴの左右の背景が黒っぽく残ったため、メインコンテンツの背景と同色に変更しました。
これだとヘッダーメニューの背景色の濃い赤色だけが画面の両端まで達してしまうため、
このヘッダーメニューの背景色もロゴ画像やメインコンテンツの幅に合わせたいと考えています。

URLは載せて欲しくないので、こちらは確認して頂けたら削除して頂けると助かります。

返信する
サルワカくん

あ、そういうことですね。

header.header {
  background-color: #色コード;
}

でいけるかと思います。

返信する
hiroa

早速のお返事有難うございました。
https://yahoo.jp/box/P13OuE
こんな感じにしたいと思ったのですが、
教わったものだと出来なかったのですが、
CSS内に普通に付け加えるだけで良いのですよね?
何度もお手数お掛けして本当に申し訳ありませんが
何卒よろしくお願いいたします。

返信する
サルワカくん

あー、なるほど。勘違いしておりました。
①以下のCSSを追加

nav.desktop-nav {
    max-width: 1000px;
    margin: 0 auto;
    background: #ee807a;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);/*影が不要であれば、この行削除*/
}
.header {
    box-shadow: none;
}

② ヘッダーの背景色は薄いピンク(全体の背景色と同じもの)にして頂けますか?

返信する
hiroa

無事出来ました!
何度もお手数お掛けして申し訳ありませんでした。
有難う御座いました!!

返信する
Hiroshi.SND

何とかSANGO を使わせていただいております超初心者ですが、
ここでの質疑を拝見しても、以下の用語について、どの部分をさしているのかが、
理解できないので、出来ましたら、画像にて教えていただければ、幸いです。

1)ヘッダーの場所はの「場所」とはどこをさしているの?

2)ヘッダーの背景色の「背景色」の位置はどこ?

3)ヘッダーメニューの背景色の「ヘッダーメニュー」のある位置は?

4)ヘッダーメニューの背景色、、の「ロゴ画像」の位置は?

5)ロゴの左右の背景が黒っぽくの「ロゴの左右の背景」の位置は?
前掲のhiroa様のご質問と同じ現象、
「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」を貼り付けた場合に、
PC閲覧時にロゴの左右の背景が黒っぽく残ったため」という現象が解決できずにおります。・・・」

実は、私もこれと同じ問題があり、未だに解決できていません。(黒色を変更したい)
ご教授よろしく、お願い致します。
尚、ここに至るまでには、サルワカ様のご指導のように、
子テーマのstyle.cssを編集し、子テーマを有効化して使用しております。
以上、よろしくお願いいたします。

返信する
サルワカくん

私の方も質問のやり取りの中でどこを指しているのかよく分からなくなってしまったので、整理して説明します。
まず、ロゴ画像の左右の黒色の部分は、以下のCSSのbackground: #323232;で指定されています。このコードは子テーマのstyle.cssにあるはずです。

.header--center #logo {
    padding: 0;
    background: #323232;
}

#323232を使いたい色コードに変えて頂ければと思います。

次に、左右端まで伸びるメニュー部分の背景色(ロゴ画像の下)は、外観⇒カスタマイズ⇒色⇒「ヘッダー背景色」から指定できます。デフォルトでは水色になっています。

最後に、ピンク色になってしまった部分は、前のコメント上のCSSをコピペされたからだと思います。ピンクなどにしたくない場合、こちらのCSSは削除して頂くのが良いと思います。

nav.desktop-nav {
    max-width: 1000px;
    margin: 0 auto;
    background: #ee807a;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);/*影が不要であれば、この行削除*/
}

もしピンク色の部分の色だけ変えたいという場合には、background: #ee807a;の色コードを変えて頂ければと思います。

返信する
ちょこ

どちらに質問したらよいか分からず、一番近いところで失礼します。
ヘッダーに問い合わせを挿入したいのですが、どうしたらよいでしょうか?
たとえば、メニューはロゴの下に、ロゴを左に寄せて、右側に電話番号などを表記したいです。

返信する
サルワカくん

スマホ表示ではどうなるイメージですか?
一定のサイズ以下の画面では非表示にするイメージでしょうか?

返信する
ちょこ

お返事が遅くなり申し訳ございません。
スマホ表示の場合は
ロゴを中央に、下にメニューで問い合わせは非表示で構いません。

返信する
ちょこ

お忙しい中、ご対応頂きありがとうございます!!
ご教示頂いた方法を参考に、無事希望通りの表記ができました!
ありがとうございました。

サルワカくん

確認しましたが、大きく表示されてますよー。ブラウザのキャッシュの削除のし忘れでは?

返信する
Kumi

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

返信する
サルワカくん

外観⇒カスタマイズ⇒サイト基本情報にて「大画面表示時にもロゴを中央寄せ」にチェックをいれたうえで、
子テーマのsytle.cssに

#logo img {
 height: 100px;
}

を追加すれば良いかと思います。

返信する
Kumi

ご回答ありがとうございます。

下記のcssも設定していることからヘッダー画像(ロゴ画像)も同じように、枠線が浮き出てしまいます。
特定の要素のみ(ロゴ画像)のみ画像が浮き出ないようにするにはどうしたらいいでしょうか。
/* 画像に枠線を付ける */
img {
border: solid 1px #808080; /* 枠線のスタイル 太さ 色 */
box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

お手数ですが、どうぞよろしくお願いいたします。

返信する
taka

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

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

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

返信する
サルワカくん

恐縮ですが、原因を突き止めるには、ちょっと情報不足です。
サイトURLを教えて頂けませんか?

返信する
田中

お世話になります。

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

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

返信する
サルワカくん

お世話になっております。
2分割ではなく、通常のヘッダーアイキャッチ画像でしょうか。
その場合、外観→カスタマイズ→ヘッダーアイキャッチ画像で
「画像の最大横幅に制限を設ける(推奨)」にチェックを入れなければ
横いっぱいに表示されるようになります。

返信する
KEN

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

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

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

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

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

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

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

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

返信する
サルワカくん

以下のCSSを追加してみるといかがでしょうか。

.header--center #logo {
    background: #FFF;/*ロゴ背面の色*/
}
@media only screen and (min-width: 1030px) {
 .header--center #logo img {
    max-width: 80%;/*最大幅に制限をもたせる*/
 }
}
返信する
KEN

できました!ありがとうございます!

また、画質についてもSVGに変換してみたらきれいになりました!

返信する

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

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

返信する
サルワカくん

エラーメッセージの通り、コロンをつけ忘れていませんか?
background:#323232;

返信する

カラーコードが変だったことがわかりました。デフォルトの背景と同じ色にしたかったので、色の背景にある #rrggbb としたのですが、正しくはどう指定したらいいのでしょうか。

返信する
サルワカくん

どの部分の背景色を変えたいのでしょうか?ロゴの背面であれば記事に書いてあるとおり

.header--center #logo {
    background: #rrggbb;
}

で良いと思います。

返信する

ロゴ画像をいっぱいにしたときの両端の黒っぽいところですが、他の色にすることはできるのに、#rrggbb はエラーになります。あきらめてよく似た色を指定することにします。

サルワカくん

なるほど。それは、その色コードがWebブラウザで対応していないからだと思います。
(テーマに関わらずエラーになります)

コメントを残す

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