WordPress5.5への更新について

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

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

通常の場合

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

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

60 COMMENTS

アバター
Tetsuko 2020/09/10

テーマエディター経由で入力しても反映されません

初めまして、お世話になります。 こちらのページを参考に、cssを「外観→テーマエディター(子テーマのstyle.css)」からコードを入力したところ反映しませんでした。 (キャッシュ削除もしてみましたが、見た目が変わりませんでした) でも、「外観→カスタマイズ→追加css」で入力した際にはきちんと反映され、表示を変えることができました。 個人的な使い心地として、テーマエディターからcssを入力して…

回答を見る
アバター
Kazuki 2020/08/16

スマホで見たときヘッダーのロゴ画像を横いっぱいに表示されない問題

はじめまして。上記タイトルの問題に直面いたしました(PCサイトでは横いっぱいに表示されていて問題ございません)。どのようにすれば、解決できますでしょうか。ご教示をお願いいたします

回答を見る
アバター
Shun 2020/04/25

ロゴ画像が大きくならない

記事通りにCSSを書き加えたのですが大きくなりません。どうしてでしょうか。

回答を見る
アバター
May 2019/11/20

スマホで見たときにヘッダーの上に隙間ができる

お世話になっております。 こちらの記事の”ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ”を施しておりますが、スマホで見たときにヘッダーの上に隙間ができてしまいます。(PCでは問題なし) 画像のサイズは2580 x 294 ピクセルです。 ロゴ画像に推奨サイズはない、との情報をこちらのスレッドで確認しましたが、スマホで見たときにヘッダーの上に隙間ができないように、ロゴ画像をいっぱいに表示する…

回答を見る
アバター
美波 2019/10/18

PCとモバイルでロゴ画像のサイズを変えたい

いつもお世話になっております。 ご質問させてください。 上記の「ロゴ画像の最大幅を指定する場合のCSS」を使用しているのですが、スマホは違うサイズで指定したいと思っています。 どのようにすれば良いでしょうか? (PCはサイズ大きめ設定、スマホは小さめ設定にしたい) /*ロゴ画像を横全体に表示*/ #inner-header, #drawer + #inner-header,#logo{ width…

回答を見る
アバター
轟元気 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: S…

回答を見る
アバター
ホンマ 2019/03/21

ロゴ背景

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

回答を見る
アバター
naba 2019/03/12

ヘッダーを枠いっぱいにできない

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

回答を見る
アバター
山崎雄大 2019/01/04

ロゴ画像がぼやける

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

回答を見る
アバター
カプラ 2018/11/04

ロゴ画像がhttpで読み込まれてしまう

こちらの記事を参考に初めてヘッダー画像入れてみました。画像自体は無事に入ったのですが、ヘッダー画像のパスがhttpになってしまいました。 色々検索したところ、cssの中にある、#headerの中に、httpsでパスを直接指定すればよいという情報を見つけたのですが、cssの中にそれが見つからず…。そもそも、そういうのが必要だとすれば記事内で紹介されているはずでしょうから私の環境だけおかしいのかもしれ…

回答を見る
アバター
みほ 2018/10/12

ヘッダーアイキャッチ画像が切り取られてしまう

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

回答を見る
アバター
みなみ 2018/09/06

ロゴ画像の最大幅を指定するCSSを追加すると、ハンバーガーメニューの下にロゴが入り込んでしまう

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

回答を見る
アバター
SEN 2018/08/26

ロゴ画像が崩れる

いつもお世話になっております。 当初はロゴ(ヘッダータイトル)のサイズがPCもスマホも正常に表示されていましたが、気づいたらスマホもPCも横に広がっていました。 特にPCやタブレットの広がりが大きいです。 (縦幅そのままで横幅だけ広がり、文字が潰れた状態) もしかすると、なにか設定を触ってしまったのかもですが、原因わかりますでしょうか? ロゴの元画像は、横×縦:490×80サイズでアップロードして…

回答を見る
アバター
KEN 2018/06/06

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

回答を見る
アバター
Kumi 2018/05/06

ヘッダー画像を中央揃えで表示したい

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

回答を見る
アバター
hiroa 2018/02/26

PC表示でヘッダーメニューの背景色を合わせたい

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

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。