パソコン・タブレット・スマホの表示(見え方)について

目次

1.レスポンシブについて

エッジプラス1テンプレートはレスポンシブになっていますので、
パソコン・タブレット・スマホの表示(見え方)が違いがあります。
各画面サイズにあわせたレイアウトになるように調整しています。

レスポンシブサイトをパソコンのブラウザで確認するときに、
ブラウザの幅を広げたり縮めたりすると、どのようなレイアウトになるか確認できます。

テンプレートを調整しているコード(タグ)によって、パソコンのブラウザで確認できないものもありますので、
できるだけスマートフォンやタブレットでも表示(見え方)の確認をすることをおすすめします。

2.E004のカテゴリー一覧・タグ一覧・検索結果一覧などの表示

カテゴリー一覧・タグ一覧・検索結果一覧などの表示は、
パソコンのブラウザで見るときとスマホで見るときの文字数制限が異なります。

<?php if(wp_is_mobile()): ?><?php if(!wp_is_mobile()): ?> というタグで分岐させ、
記事本文の表示をパソコンで見るときは120文字、スマートフォンで見るときは25文字で制限しています。

<?php if(wp_is_mobile()): ?> はパソコンとタブレットを認識、
<?php if(!wp_is_mobile()): ?> はスマートフォンを認識して表示させています。

■ 見え方について

SnapCrab_NoName_2015-6-4_10-58-14_No-00● パソコンのブラウザで見たとき

左はパソコンのブラウザを縮めて見たときのレイアウトです。
これも記事本文の文字数制限をかけて表示しているのですが、
パソコンのブラウザで見ているので
スマホのような画面サイズに縮めてもパソコンでの表示と認識し、
120文字になって表示されています。

IMG_1177● スマートフォンで見たとき

左はスマートフォンで同じページを表示させた時の画像です。
パソコンではなくスマートフォンで表示の確認をしていますので、
スマホの文字数制限(25文字)が適用されています。

※ TOPページの記事一覧の部分に関しましては、レイアウトの関係で記事本文は表示されません。
(カテゴリーカラーアイコンや日付などもいっしょに表示させているとひとつひとつの記事枠が縦に長くなってしまうので)

パソコンのブラウザの幅を縮めて表示の確認をしたときに、
「あれ?文字が多くてレイアウトがかっこ悪いな。。」と思うかもしれませんが、
スマホで見てる方にはきちんと文字数制限がされたレイアウトになっていますので、安心してください。

コメントを残す