SWELLでスマホの表示崩れを確認する方法と直し方

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

パソコンではきれいに見えているのに、スマホで開くと表や画像がはみ出している…そんなことはありませんか。読者の多くはスマホから訪れるため、気づかないうちに読みにくいページを見せてしまっているかもしれません。表示崩れは、正しく確認すれば早めに見つけられます。

この記事では、SWELLでスマホの表示崩れを確認する方法を手順付きでわかりやすく解説します。私が実際に読者から指摘されて気づいた失敗談も交えながら、パソコンだけでスマホ表示をチェックするコツもお伝えしますね。今日から公開前の確認が楽になりますよ。

▼あわせて読みたい：スマホでの表示速度も、読者の満足度を大きく左右します。ブログの土台になるサーバー選びはこちらで解説しています。

あわせて読みたい

エックスサーバーの評判は本当？初心者ブログで実際に使ってみた正直レビュー 本記事はアフィリエイト広告を含みます。 「エックスサーバーって評判いいって聞くけど、初心者の自分でも本当に使いこなせるのかな」と不安になっていませんか。 サー...

SWELLでスマホの表示崩れを確認する前に知っておきたい基本

SWELLはスマホ表示にしっかり対応したテーマなので、基本的な記事なら崩れることはほとんどありません。それでも、表や画像、追加CSSなどが原因で崩れることがあります。

大切なのは、公開前にスマホでの見え方を確認する習慣です。確認の方法はいくつかあるので、場面に合わせて使い分けましょう。

スマホで崩れやすいポイント

崩れやすいのは、列の多い表、横幅の大きい画像、カラムを重ねたレイアウトなどです。私も6列の比較表を作ったとき、パソコンでは問題ないのにスマホでは文字が詰まって読めなくなっていたことがありました。

パソコンだけの確認では気づけない

以前は記事をパソコンでしか確認しておらず、読者からの指摘で初めてスマホの崩れに気づいたことがあります。パソコンできれいでも、スマホで同じとは限らないと覚えておきましょう。

SWELLでスマホの表示崩れを確認する方法

ここからは、スマホの表示崩れを確認する具体的な方法を見ていきましょう。手軽なものから順番に紹介します。

以前使っていた別のテーマでは、スマホ表示を確かめるたびに実機で開く必要があり手間でした。SWELLならエディターやカスタマイザーから手軽に確認できるので、公開前のチェックがぐっと楽になりますよ。

まずはエディターのプレビューで確認する

記事を書いている途中なら、エディター上部のプレビューを「モバイル」に切り替えるのがいちばん手軽です。書きながら確認できるので、崩れにすぐ気づけますよ。

細かく確かめるならブラウザの検証機能を使う

Google Chromeの「検証」にあるデバイスツールバーを使えば、さまざまなスマホの画面幅で表示を確認できます。機種ごとの見え方を切り替えて比べられるのが便利です。

スマホの表示崩れを見つけたときの直し方

確認して崩れが見つかったら、次はスマホでも読みやすい形に直していきましょう。崩れやすい場所はある程度決まっているので、ポイントを押さえれば直すのは難しくありません。

大切なのは、パソコンの見た目に合わせて作り込みすぎないことです。スマホを基準に考えると、崩れにくい記事が自然と作れますよ。

表は列を減らすか分けて見やすくする

スマホで表が読みにくいときは、列を4つ程度までに減らすか、2つの表に分けるのがおすすめです。私も6列あった比較表を2つに分けたところ、スマホでも文字がしっかり読めるようになり、表の下にあるボタンのクリックも増えました。

カラムはスマホで縦に並べる設定にする

カラムブロックを選ぶと、右サイドバーに「モバイルでは縦に並べる」という設定があります。オンにすれば、スマホでは横並びが自動で縦並びに変わります。以前使っていた別のテーマではこの調整にCSSが必要でしたが、SWELLならクリックひとつで済みますよ。

▼あわせて読みたい：スマホでも読みやすい記事が作れたら、次は検索で読まれる記事を増やしましょう。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

あわせて読みたい

ラッコキーワードレビュー｜無料から使えるキーワード調査ツールはブログ運営に本当に使えるか正直に話... 本記事はアフィリエイト広告を含みます。 「ラッコキーワード、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事のネタを探...

SWELLのスマホ表示崩れの確認でよくある質問

ページが横に揺れて、右側に余白ができます。

横幅の大きい画像や埋め込み、表が画面からはみ出している可能性があります。Chromeの検証機能で、どの要素がはみ出しているか確認してみましょう。

iPhoneとAndroidで見え方が違います。

機種やブラウザによって文字の大きさや改行位置が少しずつ違います。検証機能で複数の機種を切り替えて、大きく崩れていないか確かめておきましょう。

PageSpeed Insightsで表示崩れも確認できますか？

PageSpeed Insightsは表示速度を調べるためのツールです。崩れの確認には、プレビューや検証機能、実機での確認を組み合わせるのがおすすめです。

どのタイミングで確認すればいいですか？

記事の公開前は毎回確認しましょう。あわせて、SWELLやプラグインを更新したあとも、人気記事をいくつかスマホで開いておくと安心です。

まとめ：公開前のスマホ確認を習慣にしよう

SWELLでスマホの表示崩れを確認するなら、エディターのプレビュー、カスタマイザー、Chromeの検証機能、実機の4つを使い分けるのが基本でした。崩れを見つけたら、表の列を減らしたりカラムを縦並びにしたりして直していきましょう。

読者の多くはスマホで記事を読んでいます。まずは今日公開する記事から、スマホでのプレビュー確認を習慣にしてみてください。

▼あわせて読みたい：小さな画面で読まれる文章ほど、誤字は目立ってしまうもの。お手頃価格で始められる日本語校正ツール「Shodo」を実際に使ってみた感想をまとめています。

あわせて読みたい

Shodo（ショドー）レビュー｜日本語校正ツールはブログ運営に本当に使えるか正直に話します 本記事はアフィリエイト広告を含みます。 「Shodo、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事を公開したあとに誤字...

おすすめ記事