SWELLテーマを利用されている方の中には、ヘッダーの中身の幅が狭いと感じる方も多いのではないでしょうか。
SWELLのヘッダーコンテナーは、ページのコンテンツ幅と連動しているため、再現したいデザインによってはカスタマイザーで調整できないため、CSSを追加して微調整する必要があります。
1行追加してあげるだけで簡単に解決しますので、もしお困りの方がいらっしゃったらぜひ参考にしてみてください。
目次
サンプル画像
うちのサイトで言うとこんな感じになります。
カスタマイズする前：コンテンツ幅
▼
カスタマイズ後：ヘッダーの内容が全幅に
ブラウザ幅に対し、ロゴが左端に寄り、ナビゲーションは右寄せになっていますね。
実際のコード
以下のコードを追加することで、
- ヘッダーバー（キャッチコピー、SNSアイコン）
- ヘッダーナビゲーション（メニューのボタン）
この２箇所に対して100%の幅になります。
追加するCSS
CSS
.l-header__barInner,.l-header__inner.l-container,.l-fixHeader__inner.l-container{
max-width: 100%;
}コード解説
.l-header__barInner | キャッチコピー、SNSアイコンのバー |
.l-header__inner.l-container | はじめに表示されているヘッダー |
.l-fixHeader__inner.l-container | スクロールしたら出てくるヘッダー |
この３つの要素に対してmax-width: 100%;を指定しています。
こうすることで、ヘッダー全体のインナーが100%になり、ワイドな表現にすることができます。