Diverのサイト幅は%指定よりもPixel指定がオススメな理由

WordPressテーマ「Diver」ではサイトサイズを「パーセント指定」と「ピクセル指定」の2種類で設定することが可能です。

補足

サイトサイズが設定できるのはPC表示のみでスマホ等モバイル表示は固定で横幅100%表示となります。

目次

ピクセル指定がオススメな理由

ピクセル指定がオススメな理由

理由は単純明快で「パーセント指定時の表示結果は訪問者の環境(画面解像度)に依存してしまうため」となります。

解像度の違いによる表示差異

2つの解像度でパーセント指定、ピクセル指定それぞれを設定した場合のサイトを表示を確認してみます。

画面解像度:1920×1080(16:9)

フルHDの解像度です。それぞれの表示を見て見ましょう。

パーセント指定(90%)
サイトトップ画面
投稿記事画面

ピクセル指定(1200px)

サイトトップ画面
投稿記事画面

パーセント指定では画面めいっぱいに伸びた形で表示されています。1行辺りに表示される文字量も変わってきますので、手元でいい感じに改行した文章も訪問者の環境如何では大変見づらい改行となってしまっている場合もあるでしょう。

画面解像度:2560×1080(21:9)

いわゆるウルトラワイドの類ですが、それぞれの表示を見て見ましょう。

パーセント指定(90%)
サイトトップ画面
投稿記事画面
ピクセル指定(1200px)
サイトトップ画面
投稿記事画面

画面が横に広いのはワイド液晶の特徴でありメリットですが、フルHDよりも更に間延びしてしまってどうも締りがなく見づらい印象を受けます。

サイトサイズの変更方法とオススメ設定値

サイトサイズの変更方法とオススメ設定値

WordPressダッシュボードより「外観」>「カスタマイズ」を選択します。

「サイズ設定」を選択します。

「Diver」では訪問者の画面解像度に応じた表示制御が可能となっています。中サイズに対応するメジャーな解像度は「800×600」「1024×768」「1200×1024」といったものが挙げられますが、ピクセル指定で固定値にしてしまうと、設定値以下の解像度では横スクロールありきでの表示となってしまうため、パーセント指定をオススメします。こだわりがなければデフォルト値(96%)で十分です。

一方、大サイズについては上限が際限なくなってしまうため、ピクセル指定で固定値とすることをオススメします。狭くもなく広すぎることのない妥当なサイズは「1200px」程度かなと個人的には感じておりオススメの設定値です。逆に大きすぎる数字(例えば2000px)にしてしまうと、設定値以下の解像度では横スクロールありきでの表示となってしまうため、ご注意ください。よって中サイズとの境界値でもある「1200px」がオススメになります。

(参考)1200px以外のサイズを設定した場合のイメージ

800px

1000px

1100px

1400px

1600px

サイドバー編

サイドバーのサイズ指定もサイト全体のサイズと同様にパーセント指定とピクセル指定が選択可能です。

サイドバーは可変(解像度によって伸縮)であるメリットはほぼありませんのでデフォルト値に近い値をピクセル指定で設定しておくことをオススメします。私はあえて「300px」としていますが、デフォルト値「310px」は数字のキリが悪いように見えるため。という些細な理由から来ているものですのでお好みでどうぞ。

まとめ

普段ブログを書いているご自身の画面では訪問者に見やすい形を意識されている事かと思いますが、パーセント指定では訪問者の環境に依存する形での表示となってしまうので、特に大サイズの解像度はピクセル指定でバッチリ決めておくことをオススメいたします。そうすることである程度本来見せたい形を訪問者に提供することが出来るでしょう。ちなみに「Diverのデモサイト」ではサイト全体のサイズが1200px、サイドバーのサイズが310pxで設定されているようです。

サイトレイアウトによってもベストなサイズは細かに違いがありますので、大体のサイズを決めたら10px、50px、100px単位の調整で様子を見ながら設定してみてください。

当サイトで使用しているWPテーマ

<初心者でも簡単に利用することが可能な高品質高機能ワードプレステーマ>

品質・機能共に非常にハイスペックなWordPressテーマでありながら、HTMLやCSSといった知識が無くとも画面操作のみで美しいデザインのブログを簡単に構築することが可能となっています。カスタマイズ性に富んでいる為、同じテーマを使っているサイトと似たようなデザインにもなりにくく、オリジナリティ溢れるサイトデザインを作り上げる事が出来ます。

デザインのみならず、Googleの規約に準拠したSEO対策、無期限・無制限で利用可能なメールサポート、継続的な機能追加(バージョンアップ)等々、サイト構築・運営にひとしきり必要なサポートが非常に手厚いのも特徴です。

また、Diver開発にはアフィリエイトプログラムの開発に携わっていた技術者が思考をこらした工夫が盛り込まれており、収益化を目指すブログに最適なテーマとなっています。更に一度購入すれば自身が所有する複数サイトに追加料金なしで適用できるというお値打ち仕様も魅力の一つとなっています。

Twitterでフォローしよう

おすすめの記事