SWELL│よく使うCSSのカスタマイズ│ヘッダー・フッター
SWELL│よく使うCSSのカスタマイズ│ヘッダー・フッター 2026 2/11 SWELLカスタマイズ 2024.03.222026.02.11SWELLはフルサイトに対応していないので、ヘッダーやフッターのカスタマイズはCSSが必要になることが多いです。
よく使うのだけ備忘録として記載しておきます。
目次著者
motokiWordPressのカスタマイズに困ったらご相談ください！
MOTOKI合同会社 カスタマイズの依頼・相談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%; } } メインビジュアルとテキスト縦並びに（スマホのみ）メインビジュアルの画像とテキストを縦並びに表示
まずはカスタマイズでトップページを選択。
スマホのメインビジュアルの高さをautoに
あとはCSSを挿入。
@media (max-width: 959px) { .p-mainVisual__slide { display: flex; flex-direction: column; } .p-mainVisual__textLayer { position: relative; justify-content: end; padding-bottom: 2em; } .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も紹介します。
ページネーションの最初と最後のナンバーの位置を修正したいSWELLはページネーションの最初と最後のナンバーの位置がずれているので調整
.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.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%; } 投稿リストのカードの高さを揃えるカードの高さがバラバラなのは微妙ですよね。
flexにするだけで高さが揃います。
.p-postList__item { display: flex } 1列目固定のスクロールするテーブルの枠線を維持する /* スクロール＋1列目固定テーブル */ :root { --color_main_thin: 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(--color_main_thin); } figure[data-table-scrollable="sp"][data-cell1-fixed="sp"] td:first-child { background-color: #fff; }まとめ
SWELLの次世代バージョンはフルサイトとのミックスだと思われますので、CSSによるカスタマイズはさらに減りそうですよね。
とはいえまとめて変更できるCSSは便利なので、SWELLでよく使うものは足していきたいと思います。
おまけです。
SWELLではフックもよく使うので、覚えておきましょう。
あわせて読みたい SWELL│フックを使ってコンテンツを挿入する場所まとめ SWELLのテーマにはフックがたくさん用意されているのが、良い点です。 他のWordPressのテーマだと子テーマを入れて、テンプレートを上書きするところを、フックでコード… SWELLカスタマイズ- URLをコピーしました！
WAZAの有料記事のサブスクリプションも開始しました。
あわせて読みたい アフィリエイト付き！有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 また有料記事の読み放題のサブスクリプション、そして有料記...サービス
Service
WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。
詳細を見る 全サービス一覧