Windows7のサポート終了をきっかけにパソコンを買い替えた人も多いのでは...わたしも約10年近く使用したノートパソコンから久々にデスクトップパソコンに買い替えました。娘の治療先など、様々な都道府県で活躍してくれました。ご苦労さまでした...
Blogger日本語テーマQooQ 画面サイズで表示がどう変わるのか
ノートを使用していた頃からデスクトップのモニターでは、どんな風に表示されるのだろう...と漠然と想像していました。早速ブログ拝見！😨
そんなに大きくはないモニターですが...インパクト大でした。写真じゃ全然伝わらないけど、この2列の画像がめちゃくちゃ大きく表示されてボケてる...😞
一度、電気屋さんのデスクトップモニターで自分のブログを検索してみてください💦
センチで言うのも何ですが...ノートでは横幅20cmで表示されていた記事が32cmに。もちろん文字サイズは同じ。いちばん上の画像が比較です。10cm以上横幅が広くなるとどうなるかと言いますと...当然、余白が多くなり、行数も減り、視認性が落ちてしまいます。
☑ モニター画面が広くなっても、人は中心部しか見ないのだとよくわかります。
上の画像を見てわかる通りサイドバーの幅は変わらず、左のカラム（メインコンテンツ）だけが画面サイズに応じて限りなく広くなるようです。どのような設定なのかと言うと...メインコンテンツ幅は、全体からサイドバーと隣の余白を除いた幅を充てるというもの。
モニターサイズに応じてフロント・記事ページの横幅が広くなると困る理由
- フロントページのアイキャッチ画像が、記事トップに表示した元の写真サイズより大きく表示されてしまうため、ボケてしまう。ボケた写真が何枚も並ぶ事態に...
- フロントページの画像インパクトが強すぎて記事タイトルに目が行かない。
- メインコンテンツの横幅が広すぎると、画像は中央、文章はかなり左の方から始まり一行が長いことから視点が集中せず視認性が落ちてしまう。
- デスクトップモニターでプレビューしながらブログ編集するのに限界を感じる。
✅大画面を意識したBloggerテーマQooQに適したブログとは...
- 文字数が多く、かなり内容が充実したサイト。（私のブログはこの点でアウト...非常に殺風景な印象に...😓）こういう横幅を想定して作っていなかった...💧
- フロントページの画像が大きく表示されることを逆手にとって、写真サイトは目を惹く素敵なサイトになるかもしれません。Bloggerの場合、画像は最大横幅1600pxまで表示できるので、多少横幅が拡大されてもボケないサイズ設定を考える必要がありますね。
※ 新たにBloggerブログを始める方は、その辺のことも考慮して作り始めるといいですね。
☑ Bloggerの画像について興味深い記事がありました。
Bloggerの画像の小技 ふじろじっく
画像サイズによるブログ表示速度の変化を検証してみた インドアな日々
大きなモニターサイズにどう対応する？QooQの横幅
実際、ノートパソコン以上のモニターサイズで検索している人って、そう多くはいません。ノートパソコンサイズまでなら問題ないのです。ただ、年齢的なこともあって、いないこともないんですよね...無視？今更だけど記事数50のアイキャッチ画像を大きくする？もし、やったとしても記事幅32cmは変わらないわけだし...何より編集し辛い。他の有名ブログの実態を見てみました。結論を先に言うと...
デスクトップパソコンであれノートパソコンであれメインコンテンツの幅は変わらない！
横幅をセンチで言うなんてナンセンスですが、私のような素人には、これが一番イメージしやすい...なので私のデスクトップパソコン環境限定のメインコンテンツ幅の比較です。
バズ部さん...約19cm・サルワカさん...約20cm・ブログ部さん...約18.5cm BloggerテーマQooQのメインコンテンツ幅がいかに広くなるのかがわかります。(32cm)
ちなみに、2019年12月に発表されたシンプルで可愛いテーマ『veta』も画面いっぱいに広がります。(こちらはサイドバーの幅も変化する）
他のBloggerの皆さんはどうしているのだろう...
大半の方は、モニターサイズに応じて横幅が広く表示されている。その一方で、コンテンツ幅を％指定している方、固定幅にしている方...工夫されている方もいるようです。
記事幅が広くなると広告のサイズも大きくなって、かなりの圧力だったりする...😮
とりあえず、今までのノートパソコンと同じ編集環境・サイズになるように（それ以上幅広にならないよう）してみました。サルワカさんと同じ約20cmで...😅
企業のホームページでは、フロントページを全画面表示でインパクトを強くし、個別記事では視認性を重視して一定の横幅になるよう設定しているようです。
ちょうどBlogger公式テーマがそんなデザイン。とくにEmporioは大画面のフロントページでは通常2列のアイキャッチが３列表示に切り替わり、かなり目を惹きます。
個別記事表示時に、高さは上部1/2・横幅はモニター画面いっぱいに表示される背景ボケの効果が画面サイズが大きくなるほど活かされ洗練された印象になります。IEでは表示されなかった、この背景ボケ（Blur効果）、Edgeでは綺麗に表示されます。速度も改善されていて、以前はモバイルスコアが30～40だったのに対し、現在はモバイルスコア95・パソコンスコア100というのには驚きました。
✅追記：v1.27がリリースされました。ラムネグQOOQリリースノート2020.7.5
大型ディスプレーでの表示幅最大値の設定と新しいBlogger機能、表の罫線表示（暫定）を更新してくださっています。