SWELL│よく使うCSSのカスタマイズ│ヘッダー・フッター

2024.03.222024.04.29

SWELLはフルサイトに対応していないので、ヘッダーやフッターのカスタマイズはCSSが必要になることが多いです。

よく使うのだけ備忘録として記載しておきます。

SWELLのヘッダー周りでよく使うCSS

グローバルメニュー周りのCSSを調整します。

ヘッダーの表示範囲を調整する

ヘッダーの左右の表示範囲はコンテンツの幅の設定に依存していますが、CSSで変更することができます。

max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px)*2);

また追従ヘッダーの設定も反映するために.l-fixHeader__inner.l-containerも追記しています。

タブレット・スマホの時は幅いっぱいに表示したいのでメディアクエリを使っています。

@media screen and (min-width: 960px){
    .l-header__inner.l-container,
    .l-fixHeader__inner.l-container {
        max-width: 90%;
    }
}

追従ヘッダーの影を消す

通常のヘッダーは影を消すオプションがあるものの、追従はないのでCSSで消すことがあります。

.-body-solid .l-fixHeader {
    box-shadow: none;
}

グローバルメニューの文字のサイズや太さを調整する

まとめてメニューの文字を調整するときは以下の通り。

.c-gnav {
    font-weight: bold;
    font-size: 1.2em;
}

ヘッダーのボタンのサイズを文字合わせに

ウィジェットのヘッダーにブログパーツを挿入。

そのブログパーツにボタンが入っている時、文言に合わせてボタンのサイズを可変します。

.w-header .swell-block-columns .swell-block-column {
    width: auto;
}

メインビジュアル

メインビジュアル周りのCSSを調整します。

メインビジュアルのボタンを下に表示

.p-mainVisual__textLayer {
    height: 90%;
    justify-content: end;
}

フッター

フッターのメニュー周りのCSSを調整します。

フッターの表示範囲を調整する

フッターの表示範囲もコンテンツの幅の設定に依存していますがCSSで変更することができます。

max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px)*2);

.l-container.w-footer {
    max-width: 100%;
}

フッターメニューの仕切りの縦線を消す

SWELLの特徴的な装飾であるフッターの縦の仕切り線を消します。

.l-footer__nav li:first-child a,
.l-footer__nav li a {
    border-left: 0;
    border-right: 0;
}

ウィジェット・その他

その他でよく使うCSSも紹介します。

親カテゴリーのファイルアイコンを削除

いかにもSWELLなので、アイコン周りも消します。

.widget_categories>ul>.cat-item>a:before, .wp-block-categories-list>li>a:before {
    content: "";
}
.widget_categories>ul>.cat-item>a, .wp-block-categories-list>li>a {
    padding-left: 0;
}

パンくずの記事タイトル

別記事でも書いてますが、パンクズは記事名まで表示させる派です。

.single .p-breadcrumb__item:last-child>span.p-breadcrumb__text {
    display: none;
}

まとめ

SWELLの次世代バージョンはフルサイトとのミックスだと思われますので、CSSによるカスタマイズはさらに減りそうですよね。

とはいえまとめて変更できるCSSは便利なので、SWELLでよく使うものは足していきたいと思います。