Pocket

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

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

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

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

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

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

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

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

説明します。

1,ブラウザ毎で確認する

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

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

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

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

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

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

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

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

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

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

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

デバイス毎で確認する

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

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

これはスマホやタブレット対応ができていないサイトであるため、そのような表示になっているのですが、この辺をチェックしていないサイトは結構多いです。なので、これを読んでいるあなたは今すぐデバイス毎に自分のサイトをチェックしてみましょう。

例えば、iPhoneでみたり、アンドロイドで見たり、iPadでみたりなどです。

そして、文字化けやレイアウトの崩れ、画像の配置などを隈無くチェックしていきます。もちろん、レイアウトやデザインもろもろが崩れていたら、即座に対応していきます。

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

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

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

→ ワードプレスを始めたい方はこちら

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

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

僕はこのやり方を教えてもらうまでは全てのツールを使って確認していましたが、そんなものを使わなくても確認できる方法があります。

それは、パソコン上の画面のサイズをスマホのように小さく変更すればいいです。そうすると勝手にレスポンシブの表示になるので、いちいちデバイスをもって確認しなくてもいいです(以下、画像を参照)。

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

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

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

Pocket

SPONSORED LINK