レスポンシブ対応をされている方必見!WordPressの投稿でやってはいけない2つのこと

pc

あなたは記事を投稿した際、スマホでも記事をチェックしていますか?
最近はPCだけでなく、スマホからもサイトを閲覧されることが多く、レスポンシブ対応のテーマを導入されている方も少なくないはずです。
レスポンシブ対応とは、PCで見た時とスマホで見た時とで適切な画面レイアウトを表示する仕組みのことです。
今日はレスポンシブ対応のテーマで、投稿時にやってはいけないことについて紹介します。

1.改行タグ<br>を使う

改行タグを使うと任意の場所で改行できるので、一見すると便利なタグに思えます。
ですが、PCの画面サイズとスマホの画面サイズは全然違います。
画面サイズが違うと、1行で表示できる文字数も違います。

例えば下記のように長い文章を入力し、キリのいいところで改行タグを入れたとします。
PCでは上手い具合に表示されていますが、スマホで見ると意図しないところで改行されてしまい、ガタガタの文章になってしまいがちです。

「おはようございます!今日もいい天気ですね。本当にもうすぐ
クリスマスのシーズンですが、
みなさん予定の方はいかがでしょう?
僕は彼女とイルミネーションを見に行く予定です。」

なので、改行タグは特別な理由がない限りは使わないほうがよいです。

2.テーブルタグ<table>で、セルの幅や高さを数値で指定する

情報をより見やすくするための手段として、テーブルタグを使う方がいるかと思います。
テーブルのセルの中で1行で文字が表示されるよう、セルの幅や高さを数値で指定する方もいるかと思いますが、これも実はNGです。
例えば下記の例を見てください。上のテーブルが数値指定ありのテーブル、下が数値指定なしのテーブルです。

項目名1ここに項目名1の情報が入ります!項目名1の備考欄です!さらに情報があればここに書きます。
項目名2ここに項目名2の情報が入ります!項目名2の備考欄です!さらに情報があればここに書きます。

 

項目名1ここに項目名1の情報が入ります!項目名1の備考欄です!さらに情報があればここに書きます。
項目名2ここに項目名2の情報が入ります!項目名2の備考欄です!さらに情報があればここに書きます。

上のテーブルをスマホで見た時に、テーブルが途中で途切れています。これではせっかくの重要な情報も隠れてしまいます。

こちらも1同様、スマホの画面サイズとPCの画面サイズの違いにより起こります。
下のテーブルのように数値指定しなければ、画面の幅に合わせて表示してくれるので、数値指定はしないようにしましょう。ただ、ビジュアルからテーブルを作成すると強制的に数値指定が入ってしまうようなので、もし可能であれば自自分で値を消すか、HTMLに詳しい方に直していただくのが良いでしょう。

まとめ

いかがでしたでしょうか?
WordPressを使うときは基本的にPCで投稿するので、PC上で問題なく表示されていればOKなように見えますが、ユーザはスマホからもWebサイトを閲覧します。むしろ、スマホで見られることのほうが多いです。PCで見たらOKでも、スマホで見たら見にくいなんてことがないように、記事を投稿したら、必ずスマホでも確認したほうが良いでしょう。

お読みいただきありがとうございました(^^♪

この記事をお読みになられたあなたは、
ぜひ次に『ライバルと競合せず、安売り市場を脱却する3つのポイント』をお読みください!オススメです(*‘ω‘ *)

 

The following two tabs change content below.
福田 泰仁

福田 泰仁

現状維新代表デザイナー
消費者に向けて、製品やサービス、企業のストーリーをビジュアライズし、ロゴ、キャラクター、HP、パンフレット、名刺などの販促ツールによって伝えることで、さらなる共感を生み出し、より満足度の高い「ユーザー体験」を生み出している。 詳細はこちら
pc

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

福田 泰仁

現状維新代表デザイナー
消費者に向けて、製品やサービス、企業のストーリーをビジュアライズし、ロゴ、キャラクター、HP、パンフレット、名刺などの販促ツールによって伝えることで、さらなる共感を生み出し、より満足度の高い「ユーザー体験」を生み出している。 詳細はこちら