SWELLブレイクポイント変更術！スマホとタブレット表示を最適化
こんにちは。hakubi code 代表のてらだです。
SWELLを使ってサイト制作をしていると、PCとスマホの表示切り替えのタイミングや、タブレットでの予期せぬレイアウト崩れに悩まされることはありませんか。
特に960pxという数値はSWELLにおける大きな分岐点であり、ここの挙動を正しく理解していないと、ヘッダーメニューが崩れたり、カラム落ちが発生したりと、デザインの品質を大きく損なう原因になります。
私自身もSWELLを使い始めた当初は、独自のCSS設計に戸惑い、タブレット実機で確認して初めて表示のズレに気づくという失敗を経験しました。
この記事では、現役のマークアップエンジニアの視点から、SWELLのブレイクポイントの仕様を解剖し、カスタマイズや変更を行う際の安全なテクニックまでを徹底的に解説します。
- SWELLのブレイクポイントの正確な数値と適用範囲
- 960pxと600pxの境界で発生しやすいレイアウト崩れの原因
- CSSを使って特定のデバイスのみデザインを調整する具体的なコード
- タブレット表示を最適化するためのクラス活用と設定テクニック
【仕様】デフォルトの分岐点と「960pxの壁」
SWELLで思い通りのレスポンシブデザインを実現するためには、まずテーマが標準で定めている「境界線」を正確に把握することがスタートラインです。ここを曖昧にしたままCSSを書くと、意図しない画面幅でデザインが崩れる原因になります。
3つのデバイス定義（PC・タブレット・スマホ）
SWELLのレスポンシブ設計において、最も重要となる数値は「960px」と「600px」の2つです。今や個人のインターネット利用機器としてスマートフォンがパソコンを大きく上回っている現状（出典：総務省『令和5年 通信利用動向調査』）を踏まえると、特に600px以下のモバイル表示がいかにユーザー体験を左右するかお分かりいただけるでしょう。
一般的なCSSフレームワークであるBootstrapなどが細かく分岐点を持っているのに対し、SWELLは非常にシンプルな構造になっています。
具体的には、以下の3つの範囲でデバイスを定義しています。
| デバイス分類 | 画面幅（ピクセル） | 主な挙動 |
|---|---|---|
| PC（デスクトップ） | 960px 以上 | グローバルナビ出現、サイドバー表示（2カラム時） |
| Tablet（タブレット） | 600px 〜 959px | ハンバーガーメニュー、コンテンツはPCライク |
| Smartphone（スマホ） | 599px 以下 | 完全なモバイル表示、1カラム固定 |
まずは「960px以上がPC」「599px以下がスマホ」という基本ルールを頭に叩き込んでください。この間の数値がタブレット領域となります。
最近のiPhoneなどの高解像度スマホは「物理ピクセル」が横幅1000pxを超えるものもありますが、Webサイトの表示に使われる「CSSピクセル」は400px前後が主流です。ですので、基本的にはスマホであれば「599px以下」のスタイルが適用されると考えて問題ありません。
タブレット表示の範囲と挙動の確認
SWELLをカスタマイズする上で、最も厄介なのが「600px 〜 959px」のタブレット領域です。この範囲は「PCとスマホのハイブリッド」のような挙動をします。
例えば、ヘッダー周りは「ハンバーガーメニュー」になりスマホと同じ動きをしますが、記事コンテンツ部分のカラムなどはPCの設定を引き継ぐことが多いです。iPad（縦持ち：768px）やiPad Pro（縦持ち：834pxなど）がこの領域に該当します。
iPadを横向きにした場合（1024pxなど）は、SWELLの定義上は「PC」扱いとなり、グローバルナビゲーションが表示されます。タブレットだからといって常にモバイルメニューが出るわけではない点に注意が必要です。
960pxの壁とPC切り替えの仕組み
多くのSWELLユーザーが直面するトラブルの一つに、「960pxの壁」があります。これは、画面幅が960pxになった瞬間にPC用のグローバルナビゲーション（横並びメニュー）が表示される仕様によるものです。
960pxという幅は、現代のWebデザインにおいては決して広いとは言えません。もしあなたのサイトのメニュー項目が多かったり、ロゴ画像が横長だったりすると、960pxから1100pxくらいの「狭いPC画面」において、メニューがロゴに重なったり、2行に改行されてレイアウトが崩壊したりします。
これを防ぐためには、メニュー項目の文字数を減らすか、後述するCSSカスタマイズでブレイクポイントの挙動を調整する必要があります。
端末別で要素を表示や非表示にする設定
SWELLには、特定のデバイスでのみ要素を表示・非表示にするための便利なクラスが標準で用意されています。これを使えば、CSSをわざわざ書かなくても、ブロックエディター上で簡単な出し分けが可能です。
- .pc_only：PC・タブレットサイズ（600px以上）でのみ表示
- .sp_only：スマホサイズ（599px以下）でのみ表示
ここで非常に重要なのが、SWELLの「.pc_only」はタブレットも含むという点です。「PC専用」という名前ですが、iPadでも表示されます。
ブロックの「高度な設定」にある「追加CSSクラス」にこれらのクラス名を入力するだけで機能します。また、SWELL専用ブロックであれば、設定パネルの「デバイス制限」からチェックを入れるだけで同様のことができます。
なぜSWELLは「960px」を採用しているのか？
なぜSWELLは960pxという独自の数値を採用しているのでしょうか。これはSWELLが「ブログ」や「読み物」としての体験を最重視しているからだと私は推測しています。
記事の可読性を保つための最適な一行の文字数や、サイドバーを含めた全体のバランスを考慮した結果、かつてのWebデザインの黄金比である960グリッドシステムの名残を感じさせるこの数値が採用されているのでしょう。Bootstrapなどの汎用フレームワークが「どんなレイアウトも作れる」ことを目指しているのに対し、SWELLは「ブロガーが迷わず美しい記事を書ける」ことに特化しているため、ブレイクポイントも最小限に抑えられているのです。
【カスタマイズ】CSSで表示崩れを防ぐ調整術
基本仕様を理解したところで、ここからは実務で使える具体的なカスタマイズ手法を解説します。SWELLの便利な機能は活かしつつ、少しこだわったデザイン調整を行っていきましょう。
基本：メディアクエリでの上書き方法
ブレイクポイントの数値を変更したい場合、テーマ本体のファイルを直接編集するのは絶対NGです。アップデートで消えてしまいますし、SWELLのJavaScriptの挙動に影響を与えるリスクがあります。
カスタマイズを行う際は、必ず「カスタマイザーの追加CSS」か「子テーマのstyle.css」を使用し、メディアクエリを使って上書き（オーバーライド）を行います。
例えば、スマホのレイアウトを640pxまで拡張したい場合などは、以下のようにメディアクエリを記述して調整します。
/* 640px以下をスマホとして扱う場合の記述例 */
@media screen and (max-width: 640px) {
/* ここにスマホ用のスタイルを上書き記述 */
}
CSSが反映されない場合は、詳細度（優先順位）が足りていない可能性があります。その際は、セレクタを強くするか、やむを得ない場合のみ !important を検討してください。
もし、CSSを書いてもどうしても反映されない場合は、以下の記事で解説している原因と対策をチェックしてみてください。詳細度の概念についても詳しく触れています。
メニューが崩れる時のヘッダー調整術
先ほど触れた「960pxでメニューが崩れる問題」への対処法です。最もスマートな解決策は、「PCメニューに切り替わるタイミングを遅らせる」ことです。
例えば、画面幅1200pxまではハンバーガーメニューのままにしておき、1201pxからPCメニューを表示するようにCSSで調整します。SWELLのヘッダー構造を理解して記述する必要がありますが、基本的には以下の要素の表示・非表示を切り替えます。
（メニューの出し分けに関わるセレクタの一例）
- .c-header__menuBtn（ハンバーガーボタン）
- .c-gnav（グローバルナビ）
主にこの2つをメディアクエリを使って制御することで、タブレットや狭いPC画面でもハンバーガーメニューを表示させ、レイアウト崩れを完全に防ぐことができます。
※実際のHTML構造を調査してセレクタを正確に指定する必要があります。
便利技：「タブレット専用」クラスを自作する
SWELL標準には「タブレットだけ（600px〜959px）」を表示するためのクラスが存在しません。しかし、iPadユーザーが多いサイトでは、PCともスマホとも違う「タブレット専用のデザイン」を見せたい場面があります。
そこで、私はよく以下のクラスを自作して追加CSSに登録しています。
/* タブレットのみ表示するクラス */
@media screen and (max-width: 599px) {
.tab_only {
display: none !important;
}
}
@media screen and (min-width: 960px) {
.tab_only {
display: none !important;
}
}
このCSSを追加しておけば、ブロックに tab_only クラスを付与するだけで、タブレット端末でのみ表示されるコンテンツを簡単に作成できます。
ボタンのサイズ感などをデバイスごとに細かく調整したい場合にも、このテクニックは非常に有効です。ボタンのデザイン調整については、以下の記事でも詳しく解説しています。
リッチカラムの列数設定とスマホの挙動
SWELLの「リッチカラムブロック」は、デバイスごとの列数を細かく設定できる優秀なブロックです。しかし、設定をサボるとタブレット表示で痛い目を見ます。
PCで3列、スマホで1列という設定はよく行いますが、「タブレットでの列数」を検証せずデフォルトのままにしていませんか？実際の表示をよく確認しないままにしておくと、900px程度の幅で3列を表示しようとして窮屈になったり、逆に2列になって意図しない余白ができたりします。
特に画像の並びなどでは、タブレット時は明示的に設定することで、コンテンツのバランスが劇的に良くなります。必ずプレビュー機能を使って、中間サイズでの見え方を確認する癖をつけましょう。
まとめ：仕様を理解して「崩れない」サイトへ
SWELLのブレイクポイントは960pxと600pxというシンプルな数値で構成されています。この仕様は、多くのユーザーにとって迷いを減らすメリットがある反面、こだわったレイアウトを作ろうとすると「壁」になることもあります。
しかし、今回紹介したようなCSSによる微調整や、標準クラスの挙動を正しく理解していれば、SWELLの使いやすさを損なわずに自由なデザインを実現することは十分可能です。無理にテーマの根幹を書き換えるのではなく、SWELLの設計思想に寄り添いながら、必要な部分だけをピンポイントで調整するのが、不具合を避けてサイトを長持ちさせるコツです。
ぜひ、あなたのサイトでも実機での表示を確認しながら、ユーザーにとって最適なブレイクポイント設定を見つけてみてください。