このブログの横幅を固定サイズから自動可変方式に変更
◆まえがき
このブログの画面の幅は873画素の固定サイズにしていたのですが、それでは見づらいコンテンツが増えてきました。そこで今回、ブラウザのウインドウ幅に合わせて可変サイズで表示する方式に変更しました。なおこれはPCの画面で見た場合の話です。
この記事はその変更箇所を記録しておくために書いたもので、いわば自分へのメモです。電子工作ネタでは無いので、興味のある方だけお読みください。
◆変更の背景
先日マンデルブロベンチマークのページを作ったのですが、その記事の中の表が見づらくなっていました。また、これまでもプログラムのリストなど横幅の大きなコンテンツが見づらいのが気になっていました。
記事の横幅を広げれば良いのですが、どれくらいのサイズにすれば良いか悩ましいところです。実は2010年の10月30日に画面幅を800画素から873画素に拡大しています(この記事の最後の方に修正に要の記述があります）。再度修正して幅を1000画素くらいにしてみようかと考えたのですが、何度も変更するのも面白くありません。そこで画面幅は固定せず、ブラウザのウインドウ幅に合わせて表示するように変更することにしました。
◆変更のイメージ
従来と変更後のサイズを図で示すと以下のようになります。
全体の幅が873pxだったのを100%、つまりブラウザのウインドウ幅と同じになるようにしました。メインコンテンツ部は623pxだったのを相対比率で76%に、左のサイドメニューは200pixだったのを20%に変更しました。（他に余白の15ｐｘを1%に変更など）
【2022-1-31：上記修正は本文の幅が広くなりすぎることがあって感じが悪いので中止し、下記のように再変更】
◆スタイルシートの変更箇所
FC2が用意しているテンプレートのgreen fieldを使っているのですが、その下記を変更しました。
div#container
width: 873px; → 100%; → 1000px
div#header
padding-left: 90px; → 130px;
div#wrap
width: 723px; → 変更無し
div#main
width: 623px; → 76% → 723px
padding-right: 15px → 1%; → 15px
padding-left: 15px → 1%; → 15px
div#sidemenu
width: 200px → 20% → 227px
wrapはどう変えれば良いのか判らなかったので元のままにしています。
◆効果
マンデルブロベンチマークの結果一覧表は以下のように表示されます。
・変更前
画面幅に入るように横幅を詰めて表示されていました。
・変更後
無駄な改行が無くなって見易くなりました。
なお、ブラウザのウインドウ幅を変えればコンテンツの幅も自動調整されます。つまり従来より幅を狭くすることも可能になりました。
◆まとめ
大きな不具合は無さそうなので、このまま行けそうだと思います。でも、何かお気付きの点がありましたら、コメントで教えていただけると幸いです。
これまでの記事の部分の幅は約600画素だったので、写真などのコンテンツもそのサイズを超えない大きさで表示するようにしてきました。これからはもっと大きなサイズも表示出来るようになったので、コンテンツ作りが楽になるはずです。
ただ、ブログの見た目がブラウザの幅によって変わってしまうので、統一感のようなものが失われてしまうのがちょっと気になります。そういう点では、画面の幅を固定した方が良いのかも知れません。
世の中のWebページの幅がどうなっているのか調べて見ると、固定、可変どちらもあるようです。それぞれに事情というか考え方があるのでしょう。
・Yahooニュース：約1000画素
・Googleトップページ：可変幅
・マイクロソフト：可変幅
・Panasonic：約1200画素
・デジタル庁：約1080画素
・東京オリンピック公式：可変幅（折り返し無し表示は1250画素以上）
このブログの画面の幅は873画素の固定サイズにしていたのですが、それでは見づらいコンテンツが増えてきました。そこで今回、ブラウザのウインドウ幅に合わせて可変サイズで表示する方式に変更しました。なおこれはPCの画面で見た場合の話です。
この記事はその変更箇所を記録しておくために書いたもので、いわば自分へのメモです。電子工作ネタでは無いので、興味のある方だけお読みください。
◆変更の背景
先日マンデルブロベンチマークのページを作ったのですが、その記事の中の表が見づらくなっていました。また、これまでもプログラムのリストなど横幅の大きなコンテンツが見づらいのが気になっていました。
記事の横幅を広げれば良いのですが、どれくらいのサイズにすれば良いか悩ましいところです。実は2010年の10月30日に画面幅を800画素から873画素に拡大しています(この記事の最後の方に修正に要の記述があります）。再度修正して幅を1000画素くらいにしてみようかと考えたのですが、何度も変更するのも面白くありません。そこで画面幅は固定せず、ブラウザのウインドウ幅に合わせて表示するように変更することにしました。
◆変更のイメージ
従来と変更後のサイズを図で示すと以下のようになります。
全体の幅が873pxだったのを100%、つまりブラウザのウインドウ幅と同じになるようにしました。メインコンテンツ部は623pxだったのを相対比率で76%に、左のサイドメニューは200pixだったのを20%に変更しました。（他に余白の15ｐｘを1%に変更など）
【2022-1-31：上記修正は本文の幅が広くなりすぎることがあって感じが悪いので中止し、下記のように再変更】
◆スタイルシートの変更箇所
FC2が用意しているテンプレートのgreen fieldを使っているのですが、その下記を変更しました。
div#container
width: 873px; → 100%; → 1000px
div#header
padding-left: 90px; → 130px;
div#wrap
width: 723px; → 変更無し
div#main
width: 623px; → 76% → 723px
padding-right: 15px → 1%; → 15px
padding-left: 15px → 1%; → 15px
div#sidemenu
width: 200px → 20% → 227px
wrapはどう変えれば良いのか判らなかったので元のままにしています。
◆効果
マンデルブロベンチマークの結果一覧表は以下のように表示されます。
・変更前
画面幅に入るように横幅を詰めて表示されていました。
・変更後
無駄な改行が無くなって見易くなりました。
なお、ブラウザのウインドウ幅を変えればコンテンツの幅も自動調整されます。つまり従来より幅を狭くすることも可能になりました。
◆まとめ
大きな不具合は無さそうなので、このまま行けそうだと思います。でも、何かお気付きの点がありましたら、コメントで教えていただけると幸いです。
これまでの記事の部分の幅は約600画素だったので、写真などのコンテンツもそのサイズを超えない大きさで表示するようにしてきました。これからはもっと大きなサイズも表示出来るようになったので、コンテンツ作りが楽になるはずです。
ただ、ブログの見た目がブラウザの幅によって変わってしまうので、統一感のようなものが失われてしまうのがちょっと気になります。そういう点では、画面の幅を固定した方が良いのかも知れません。
世の中のWebページの幅がどうなっているのか調べて見ると、固定、可変どちらもあるようです。それぞれに事情というか考え方があるのでしょう。
・Yahooニュース：約1000画素
・Googleトップページ：可変幅
・マイクロソフト：可変幅
・Panasonic：約1200画素
・デジタル庁：約1080画素
・東京オリンピック公式：可変幅（折り返し無し表示は1250画素以上）
