google-site-verification: google3bd66dd162ef54c7.html
fc2ブログ

このブログの横幅を固定サイズから自動可変方式に変更

◆まえがき
このブログの画面の幅は873画素の固定サイズにしていたのですが、それでは見づらいコンテンツが増えてきました。そこで今回、ブラウザのウインドウ幅に合わせて可変サイズで表示する方式に変更しました。なおこれはPCの画面で見た場合の話です。

この記事はその変更箇所を記録しておくために書いたもので、いわば自分へのメモです。電子工作ネタでは無いので、興味のある方だけお読みください。

◆変更の背景
先日マンデルブロベンチマークのページを作ったのですが、その記事の中の表が見づらくなっていました。また、これまでもプログラムのリストなど横幅の大きなコンテンツが見づらいのが気になっていました。

記事の横幅を広げれば良いのですが、どれくらいのサイズにすれば良いか悩ましいところです。実は2010年の10月30日に画面幅を800画素から873画素に拡大しています(この記事の最後の方に修正に要の記述があります)。再度修正して幅を1000画素くらいにしてみようかと考えたのですが、何度も変更するのも面白くありません。そこで画面幅は固定せず、ブラウザのウインドウ幅に合わせて表示するように変更することにしました。

◆変更のイメージ
従来と変更後のサイズを図で示すと以下のようになります。
画面のサイズ

全体の幅が873pxだったのを100%、つまりブラウザのウインドウ幅と同じになるようにしました。メインコンテンツ部は623pxだったのを相対比率で76%に、左のサイドメニューは200pixだったのを20%に変更しました。(他に余白の15pxを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画素以上)
関連記事

コメントの投稿

管理者にだけ表示を許可する

No title

 毎回の記述、とても参考になります。
 どの「試し」もキチンと記されているので、コツコツたまった膨大な記事がそのまま資産になることに関心しきりです。
 私も作りっぱなし、試しっぱなしにはしないようにノートに残してはいるのですが、やはり人様に見せる文章にするとしないとでは大違いです。
 
●ページ様式改変のようなのでお願いを一つよろしいでしょうか?
  いつも末尾に記載されている記事の日付を、ページ冒頭に移していただけると便利だと思っています。いかがでしょう?

setoroさん、こんにちは

コメントありがとうございます。

日付が上の方にあれば、その記事がいつ頃の話なのかが先に判るので便利ですよね。実は私も以前同じことを思いました。

ブログのスタイルシートを修正すれば出来そうなのですが、ちょっと見た感じではややこしそうでした。すぐには難しいかも知れません。
カレンダー
03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
プロフィール

ラジオペンチ

Author:ラジオペンチ
電子工作を中心としたブログです。たまに近所(東京都稲城市)の話題など。60過ぎて視力や器用さの衰えを感じつつ日々挑戦!
コメントを入れる時にメールアドレスの記入は不要です。なお、非公開コメントは受け付けていません。
記事の内容のご利用は読者の自己責任でお願いします。

記事が気に入ったらクリックを!
最新記事
カテゴリ
最新コメント
リンク
FC2カウンター
検索フォーム
月別アーカイブ
RSSリンクの表示
QRコード
QRコード