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

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

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

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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;
}

メニューの間隔を調整する

.c-gnav>.menu-item>a {
    padding: 0 1.2em;
}

SWELLのメインビジュアル周りでよく使うCSS

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

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

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

PCやスマホで改行

メインビジュアル等の文字の改行でつかいます。

SWELLのCSSを使うのでHTMLだけでOK

PCもスマホも改行したい時

<br>

スマホだけ改行したい時

<br class="sp_">

PCだけ改行したい時

<br class="pc_">

SWELLのフッター周りでよく使うCSS

フッターのメニュー周りの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;
}

モバイルの時メニューを縦並び

モバイル表示は縦並びにしたほうが見やすいので。

@media (max-width: 960px) {
    .l-footer__nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

フッターのリストの装飾を消す

リストブロックの丸等の装飾をけします。

.l-footer .post_content :where(ul:not([type])),
.l-footer .post_content ol ul,
.l-footer .post_content ul ul {
    list-style: none;
}

SWELLの本文・ウィジェット等でよく使うCSS

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

本文コンテンツ下の余白を消したい

#content {
    margin-bottom: 0;
}

見出し下に下線

サイズや間隔を調整できる装飾です。

h2.wp-block-heading.has-text-align-center:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -16px;
    width: 150px;
    height: 2px;
    background-color: #333;
}

通常ボタンの影を消す

.is-style-btn_normal a, .is-style-btn_normal a:hover{
    box-shadow: none;
}

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

いかにも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;
}

画像を拡大したくない

画像に.u-lb-offのクラスをつけると拡大表示しなくなります。

またグループなどにつけると複数画像まとめて、適応できます。

リッチカラムの各カードのボタンを下合わせにする

カードの高さも揃えます。

.l-mainContent .swell-block-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.l-mainContent .swell-block-column .swell-block-button {
    margin-top: auto;
    width: 100%;
}

まとめ

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

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

  • URLをコピーしました!
目次