SANGOでヘッダーのロゴ画像を設定すると、小さなロゴが表示されます。
このロゴ画像を横一杯に表示するカスタマイズの手順です。
手順1：カスタマイザーで設定
まずは［外観］⇒［カスタマイズ］⇒［サイトの基本設定］⇒［基本情報とロゴの設定］を開きます。
ロゴ画像をアップロードし、さらに［ロゴ画像だけを表示］と［大画面表示時にもロゴを中央寄せ］にチェックを入れます。
手順2：専用のCSSを貼り付ける
次にロゴ画像を横全体に表示するためのCSSを適用させます。
カスタマイズの追加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です。
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;でロゴ画像の左右の背景色を指定しています。
この色をコンテンツ部分の背景色に合わせます。
