「SWELLのヘッダーバーをスマホでも表示させたい。CSSを書いたのに効かない」
この記事はそんな方に向けて書いています。
結論から言うと、CSSでの上書きはほぼ無理です。理由と、実際に動いた解決方法をコピペできるコードつきで解説します。
この記事でわかること
- なぜSWELLのキャッチフレーズはスマホで消えるのか
- なぜCSSで上書きできないのか（4つの失敗パターン）
- スマホでも表示させる具体的な方法（コピペOK）
SWELLのキャッチフレーズとは
WordPressのカスタマイズ画面でヘッダーの上に表示できる細い帯のことです。店名の下に「Web制作勉強中！」のような短いキャッチコピーを入れられます。
PCでは表示されますが、スマホでは最初から非表示になっています。これはSWELLの仕様です。
なぜスマホで消えるのか
SWELLは内部でこんなCSSを使っています。
@media not all and (min-width: 960px) {
.pc_, .pc_only {
display: none !important;
}
}「960px未満の画面では .pc_ クラスを非表示にする」という命令です。キャッチフレーズバーにはこの .pc_ クラスが付いているため、スマホでは消えます。
ポイントは !important がついていること。これが上書きを難しくしています。
CSSで上書きしようとすると失敗する4つのパターン
失敗① ブレークポイントの数値が違う
/* ❌ 効かない */
@media screen and (max-width: 767px) {
.l-header .c-catchphrase {
display: block !important;
}
}SWELLは 767px ではなく 960px を境界にしています。また、キャッチフレーズの文字だけを表示させようとしても、その外側の箱が非表示のままなので見えません。
失敗② クラス名が違う
DevToolsで見ると pc_only に見える場合がありますが、実際のHTMLのクラス名は pc_（アンダースコア1つ）です。
<!-- 実際のHTML -->
<div class="l-header__bar pc_">失敗③ メディアクエリの書き方が違う
@media screen and (max-width: 959px) と @media not all and (min-width: 960px) は意味は同じですが、ブラウザは別々のルールとして扱います。SWELLと書き方を完全に一致させないと、同じ条件として認識されません。
失敗④ 中身のサイズがゼロになっている
外側の箱（.l-header__bar）を display: block にしても、中身（.l-header__barInner）のサイズがゼロに潰れているため、テキストが見えない状態になります。CSSだけでこの状態を直すのは複雑です。
解決方法：JavaScriptでスタイルを直接書き込む
CSSの上書きではなく、JavaScriptを使ってページ読み込み時に直接スタイルを適用します。
なぜこの方法が効くのか
JavaScriptで直接書いたスタイル（インラインスタイル）は、!important つきのCSSよりも強い。SWELLのルールに関係なく、確実にスタイルを適用できます。
設置場所
WordPress管理画面 →「外観」→「カスタマイズ」→「高度な設定」→ </body>直前 に出力するコード の欄
コピペ用コード
<script>
if (window.innerWidth < 960) {
var bar = document.querySelector('.l-header__bar');
if (bar) {
bar.style.setProperty('display', 'block', 'important');
bar.style.setProperty('width', '100%', 'important');
var inner = document.querySelector('.l-header__barInner');
if (inner) {
inner.style.setProperty('display', 'flex', 'important');
inner.style.setProperty('width', '100%', 'important');
inner.style.setProperty('padding', '4px 16px', 'important');
}
var catchphrase = document.querySelector('.c-catchphrase');
if (catchphrase) {
catchphrase.style.setProperty('display', 'block', 'important');
catchphrase.style.setProperty('width', 'auto', 'important');
catchphrase.style.setProperty('color', '#fff', 'important');
catchphrase.style.setProperty('font-size', '12px', 'important');
}
}
}
</script>手順
- 上のコードをコピーする
- WordPress管理画面 →「外観」→「カスタマイズ」を開く
- 左メニューの「高度な設定」をクリック
</body>直前に出力するコード の欄に貼り付ける- 「公開済み」ボタンを押して保存
- SWELL設定 → キャッシュ → 全てのキャッシュを削除
- スマホで確認
注意点
SWELLがアップデートされてクラス名が変わると動かなくなる場合があります。アップデート後に表示が崩れたら、クラス名が変わっていないか確認してください。
まとめ
SWELLのキャッチフレーズをスマホで表示するには、CSSでの上書きではなく「高度な設定」の </body>直前 にJavaScriptを設置するのが確実です。
CSSで詰まったら「JavaScriptで直接書く」という方法があることを覚えておくと、SWELLに限らずWordPress全般で役立ちます。
コメント