AIを使って月10万円を楽に稼ぐブログ

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;でロゴ画像の左右の背景色を指定しています。   この色をコンテンツ部分の背景色に合わせます。