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

2024.03.222026.10.12

SWELLのヘッダー、メインビジュアル、フッターなどを調整するCSS例を、変更する場所ごとにまとめています。必要な例を一つずつ選び、追加前の状態を保存してから試してください。

CSSを貼る場所と適用範囲

サイト共通のCSSは「外観 → カスタマイズ → 追加CSS」に追加します。このページの例は同時にすべて貼るためのものではありません。同じ場所を対象にする例は、後から書いた指定などによって結果が変わります。

追加CSSは、条件が合うほかのページにも適用されます。一部のブロックだけを変える例では、本文で指定する追加CSSクラスも設定してください。PHPは追加CSSへ貼り付けません。子テーマを使うか迷う場合は子テーマの要否と導入前の確認を参照してください。

保存前に追加CSS全体をテキストファイルなどへ控え、変更する例を一つだけ追加します。PCとスマホのプレビューで対象箇所と隣接する箇所を見てから公開してください。

確認した範囲は、SWELL環境での中央揃えH2の下線と、スマホ幅390pxで親グループにu-lb-offを付けた画像の拡大停止です。掲載26例すべて、メインビジュアル、960px境界、複数例の組合せは未確認です。WordPress・SWELLの版と既存設定によって結果が変わるため、必要な例を個別に確認してください。

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

最初に、対象のブロック・クラス名・画面幅が条件に合っているかを確認します。次に保存とキャッシュを確認し、それでも変わらなければ、同じ要素を対象にした既存CSSとの競合を調べます。原因を確認せずに!importantを増やさないようにしてください。

戻すときは今回追加した範囲だけを削除し、付け足したクラス名も外します。追加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;
}

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

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

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

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

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

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

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

/* フッターウィジェットの表示範囲 */
.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;
}

画像を拡大したくない

画像に.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;
}