ワードプレスでサイト作成やブログ運営をする人は多いですが、大抵は作っただけで満足しています。これはあまり良くありません。

ワードプレスに限らず全てのサイト作成には共通することですが、ウェブページ情報をネットに公開したらサイトのレイアウトくらいは確認した方がいいです。なぜなら、ブラウザやデバイスによってはサイトのレイアウトが崩れているかもしれないからです。

作成したサイトは1つだけかもしれませんが、ウェブページ情報を表示するブラウザや機器は複数あります。その為、ブラウザによって表示のレイアウトが変わることもありますし、機器（デバイス）によってレイアウトが変わることもあります。

なので、サイト作成をしたら、どんな風にウェブページ情報が表示されているかを自分の目で確認することが大事です。

というわけで今回は、サイトやブログ更新をしたらウェブページ情報の表示を確認する方法を紹介しようと思います。

サイトやブログを更新したら確認すべき2つのチェックポイント

サイトやブログを更新したら確認すべきことは以下の2つです。

  1. ブラウザ毎で確認する
  2. デバイス毎で確認する

説明します。

１，ブラウザ毎で確認する

インターネット上でウェブページ情報を画面上に適切に表示するためにはブラウザが必要です。ブラウザには何種類もあるが、確認すべきブラウザは以下の4つでです（最低限これだけでも十分）。

  1. Internet Explorer（インターネットエクスプローラー）
  2. Safari‎（サファリ）
  3. Google Chrome（クローム）
  4. Mozilla Firefox（ファイヤーフォックス）

一応説明しておくと、インターネットエクスプローラーはマイクロソフト社が開発したウェブブラウザ。これはウィンドウズのパソコンを購入したら標準装備されているものです。

サファリはApple社が開発したウェブブラウザで、MACを購入したら既にインストールされているもの。サファリはインターネットエクスプローラーと比べると、表示や操作方法はぜんぜん違います。

Googleクロームやファイヤーフォックスは無料で提供されているブラウザでインターネットエクスプローラーやサファリよりもセキュリティーが高く、表示速度も速いのが特徴です。その為、近年では、Googleクロームやファイヤーフォックスは世界中で多くの人に利用しています。

ブラウザは人の好みによって使われていますが大抵、上の4つが主流です。なので、この4つさえおさえておけばインターネットの中のほとんどは網羅できます。

さて、ブラウザの確認方法ですが。

これらブラウザをひとつずつ開き、自分のサイトを検索し（実際にURBANを入力してもいい）、表示をチェックするだけです。

その上で、チェックする箇所は以下の5箇所。

  • レイアウト
  • 文字の大きさ
  • 文字化け
  • 画像（動画）の配置
  • 画像（動画）の大きさ

これらを隈無く確認し、崩れていれば適切に表示されるように修正していきます。まだ、サイトをチェックをしていない方は今すぐ確認してみましょう。

デバイス毎で確認する

ひと昔前までは、ウェブページ情報が閲覧できるデバイスはパソコン1つだけでした。しかし時代は進み、今ではスマホやタブレットもあります。どこにいても手軽にウェブページ情報を見ることができるようになったわけです。ホント、凄い時代になったと思いますが、実はデバイス毎でサイトやブログの表示が変わっているのをご存知でしょうか。

例えば、パソコンではキレイなレイアウトで表示されていたとしても、スマホで表示してみると文字が小さかったり、画像がムダに大きくてサイトの枠からはみ出ていたりすることがあります。なので、デバイス毎でサイトのレイアウトを確認しましょう。

例えば、iPhoneでみたり、アンドロイドで見たり、iPadでみたりなどをするということです。その上で、文字化けやレイアウトの崩れ、画像の配置などを隈無くチェックしていきます。もちろん、レイアウトやデザインもろもろが崩れていたら、即座に対応していきます。

スマホやタブレットに対応したレスポンシブ

スマホやタブレットには『レスポンシブ』というのがあります。レスポンシブは複数の機器や画面サイズに対応させるためのWebデザインで、一度設定すれば、ほとんどのデバイスを網羅できるようになっています。

なお、ＨＴＭＬで作成したサイトはかなり面倒臭い設定が必要ですが、ワードプレスにはレスポンシブが標準採用されています。つまり、ワードプレスでサイトやブログを作成すれば、勝手にレスポンシブになるというわけです。とても便利ですよね。

パソコン上でレスポンシブを確認する方法

実はパソコン上でレスポンシブを確認する方法があります。

僕はこのやり方を教えてもらうまでは、ブラウザやデバイス毎に1つずつ確認していましたが、そんなことをしなくても確認できる方法がありました。それは、パソコン上の画面のサイズをスマホ位に小さく変更すればいいのです。すると勝手にレスポンシブの表示になるので、いちいちデバイスをもって確認しなくてもいいようです（以下、動画を参照）。

なお、画像の説明では解りにくいと思うので、以下の動画を作成してみました。興味がある方はご覧ください。

今回の記事はこれで終了です。

くどいようですが、サイトを作成したら、必ずデバイスやブラウザの表示はチェックしましょう。

関連記事はこちら