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

2024.03.222026.10.28

SWELLのヘッダー、メインビジュアル、フッターなどを調整するCSS例を、変更する場所ごとにまとめています。

必要な例を一つずつ選び、追加前の状態を保存してから試してください。

CSSを貼る場所と適用範囲

サイト共通のCSSは「外観 → カスタマイズ → 追加CSS」に追加します。

このページの例は同時にすべて貼るためのものではありません。

同じ場所を対象にする例は、後から書いた指定などによって結果が変わります。

追加CSSは、条件が合うほかのページにも適用されます。

一部のブロックだけを変える例では、本文で指定する追加CSSクラスも設定してください。

PHPは追加CSSへ貼り付けません。

子テーマを使うか迷う場合は子テーマの要否と導入前の確認を参照してください。

保存前に追加CSS全体をテキストファイルなどへ控え、変更する例を一つだけ追加します。

PCとスマホのプレビューで対象箇所と隣接する箇所を見てから公開してください。

確認した範囲は、SWELL環境での中央揃えH2の下線と、スマホ幅390pxで親グループにu-lb-offを付けた画像の拡大停止です。

掲載26例すべて、メインビジュアル、960px境界、複数例の組合せは未確認です。

WordPress・SWELLの版と既存設定によって結果が変わるため、必要な例を個別に確認してください。

追加前後を比べるときは、ページのURLとブラウザーの表示幅をそろえてください。

WordPressとSWELLの版、追加した例、元の設定値を一緒に控えると、再確認の条件が分かります。

幅で切り替える例は、境界の直前と直後で別々に確認しましょう。

ヘッダーなら通常表示とスクロール後、メインビジュアルなら画像と文字の重なりも確認対象です。

CSSが効かない場合の対処と元に戻す方法

最初に、対象のブロック・クラス名・画面幅が条件に合っているかを確認します。

次に保存とキャッシュを確認し、それでも変わらなければ、同じ要素を対象にした既存CSSとの競合を調べます。

原因を確認せずに!importantを増やさないようにしてください。

戻すときは今回追加した範囲だけを削除し、付け足したクラス名も外します。

追加CSS全体を削除すると別のカスタマイズまで消えるため、変更前の控えと比べて作業してください。

一部の幅だけで崩れる場合は、その幅を控えて今回のCSSを外し、元の表示と比較してください。

元に戻しても崩れる場合は、別のCSSを足さず、追加前の状態でも起きる問題かを切り分けます。

文字が隠れる、リンクを押せない、横にはみ出す状態なら、公開を見送って原因を確認しましょう。

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

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

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

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

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

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

この指定は幅960px以上で適用されます。

960px未満ではこの例による幅の上書きを行わず、テーマと既存CSSの設定が使われます。

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

ロゴを上下中央に配置

.c-headLogo__link {
    display: flex;
    align-items: center;
}

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_">

画像を右半分に表示（PCのみ）

PCのみ、右半分だけ画像（メインビジュアル）を表示したい場合

@media  (min-width: 960px) {
  .p-mainVisual__imgLayer.c-filterLayer__img {
      width: 50%;
      left: 50%;
  }
}

メインビジュアルとテキスト縦並びに（スマホのみ）

メインビジュアルの画像とテキストを縦並びに表示

「外観 → カスタマイズ → トップページ → メインビジュアル」で「メインビジュアルの高さ設定」を確認します。

当サイトの現在の画面には「画像・動画サイズのまま」「コンテンツに応じる」「数値で指定する」「ウィンドウサイズにフィットさせる」があります。

下のCSSは高さを固定しない構成を想定していますが、現行版との組合せは未確認です。

設定を変更する前に元の値を控え、公式の高さ設定と利用中の画面を確認してください。

メインビジュアルの高さ設定。現在値は画像・動画サイズのまま。 — WordPress 7.1.3・当サイトのSWELL環境を2026年10月12日に閲覧して撮影。現在値は「画像・動画サイズのまま」。設定を変更していないため、PC/SPの数値欄は表示されていません。

あとはCSSを挿入。

@media  (max-width: 959px) {
  .p-mainVisual__slide {
      display: flex;
      flex-direction: column;
  }
  .p-mainVisual__textLayer {
      position: relative;
      justify-content: end;
      padding-bottom: 2em;
  }
  .p-mainVisual__imgLayer.c-filterLayer__img {
      position: relative;
      height: auto;
  }
}

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

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

この例では幅960px未満でフッターメニューを縦並びにします。

端末名ではなく表示幅で切り替わるため、タブレットや幅を狭めたPCウィンドウにも適用されます。

@media not all and (min-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;
}

フッターウィジェットとコピーライトの表示範囲を揃える

情報を左寄せにしたい時に

/* フッターウィジェットの表示範囲 */
.l-container.w-footer {
    max-width: 90%;
}

/* フッターの表示範囲 */
.l-footer__foot {
    max-width: 90%;
    margin: 0 auto;    
    padding-left: var(--swl-pad_container, 0);
    padding-right: var(--swl-pad_container, 0);
}

.l-footer__foot .l-container {
    max-width: 100%;
    padding-left: 1em;
    padding-right: 1em;
}

.l-footer .copyright {
    text-align: left;
}

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

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

ページネーションの最初と最後のナンバーの位置を修正したい

ページネーションの最初と最後に位置のずれがある場合の調整例です。

ずれがない環境には追加する必要はありません。

.c-pagination .page-numbers:first-child {
    margin-top: 4px!important;
}

.c-pagination .page-numbers:last-child {
    margin-bottom: 4px!important;
}

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

#content {
    margin-bottom: 0;
}

見出し下に下線

中央揃えにしたH2見出しを対象にする装飾です。

左揃えの見出しには適用されません。

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

画像を拡大したくない

画像ブロックの「高度な設定 → 追加CSSクラス」に u-lb-off を入力すると、SWELLの画像拡大機能の対象から外せます。

入力欄には先頭のドットを付けません。

CSSのセレクターとして書く場合だけ .u-lb-off と表記します。

親のグループブロックに同じクラスを付けると、その中の画像にも適用できます。

画像に設定済みのリンク先を削除する機能ではありません。

メディアファイルや外部ページへのリンクも止めたい場合は、画像ブロックのリンク設定を別に確認してください。

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

対象のリッチカラムブロックの「追加CSSクラス」に waza-card-columns を付けて使います。

同じクラスの中だけで、ボタンの位置を下にそろえる例です。

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

投稿リストのカードの高さを揃える

カードの高さがバラバラなのは微妙ですよね。

次の指定は投稿リストの各項目をflexコンテナーにする例です。

カードの高さが揃うかは、親要素の配置とカード内の既存スタイルにも依存するため、対象のリストで確認してください。

.p-postList__item {
    display: flex
}

1列目固定のスクロールするテーブルの枠線を維持する

/* スクロール＋1列目固定テーブル */
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] {
  --waza-table-cell-bg: rgb(239 239 239);
}

figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] {
  border-right: 1px solid #000;
}

figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] table {
  border-collapse: separate;
  border-spacing: 0;
}

figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] th,
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] td {
  border: 1px solid #000;
  border-left: none;
}

/* 行間の重複ボーダー防止 */
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] tbody tr:not(:first-child) th,
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] tbody tr:not(:first-child) td {
  border-top: none;
}

/* 1列目：左ボーダー復活 */
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] th:first-child,
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] td:first-child {
  border-left: 1px solid #000;
}

/* 最終列：右ボーダー削除（スクロールエリアの線と重複防止） */
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] th:last-child,
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] td:last-child {
  border-right: none;
}

/* 1列目の背景色 */
figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] th:first-child {
  background-color: var(--waza-table-cell-bg);
}

figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] td:first-child {
  background-color: #fff;
}