AIで稼ぐ

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;でロゴ画像の左右の背景色を指定しています。

 

この色をコンテンツ部分の背景色に合わせます。