Ver1.3.1をリリースしました(11/22)

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

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

通常の場合

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

画像がデカデカと表示されるようになります。ちなみに「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 ロゴ画像を横いっぱいに*/

2 Comments

コメントを残す

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