人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

ページの幅構成の整理

2015年 04月 30日
殆ど私自身の覚書きになりますが、ブログページの幅設定について整理しておきます。
予定されるコメント記入欄復活で、調整にページの幅設定がからんで来るかもしれないので。

当方のスキンの原型はエキサイト提供「ワイド」で、それをアレンジしたものです。
ページの幅構成の整理_b0174191_09153920.png
ウインドウの横方向への拡大に応じて、「本文」内容が幅を拡げて表示される構成。 これに併せ、ブログ名を表示した「ブログタイトル」「投稿タイトル」「コメント表示枠」「ページャー」等は、自在に横拡張する仕様です。

●「本文幅」はデフォルトが720px(最小値)と設定していて、本文コンテンツ(動画・ブロック要素等)の最大幅がそれを超える場合は、その値が本文幅の最小値となる。 但し本文コンテンツが幅720px以上の写真画像(静止画)の場合は、幅720pxに縮小掲載される。 つまり、この種のコンテンツを含む本文幅の最小値は720pxとなる。
(注)ブログスキンの編集画面の本文幅設定ボックスにより、本文の掲載画像の幅上限値が設定される。 またこの値に応じて、システムの指定CSSの部分が書換えられる。 その場所は、知りうる限り以下に書く「.bbs_preview」である。 私の場合、本文幅フレキシブル化のアレンジで上書きしている可能性があり確実でないが、システムが本文幅の指定をする場所は他にもあるかも知れないし、またスキンによって異なるかも知れない。

●この最小値を押し拡げない様に「他記事のサムネイル画像」(5個)の幅を各140px、計700px に設定。 この部分のCSS設定が、実際の本文幅の最小値の指定になっている。
.bbs_preview { width: 720px; }

●ページ末尾の「ポストテイル」(投稿日時|カテゴリ|トラバ|コメント|等の行)がブラウザの文字サイズ最大時も行あふれしない値として、「本文幅」のデフォルト720pxは適当。

●最上段の「エキサイトヘッダー」で右端にCMが入り、「ログイン」ボタンが隠れる場合がある。 これはウインドウ幅が980px以上では生じないので、「ブログ全体の表示幅」を980px以上として設計すると都合が良い。

●「右メニュー」(固定幅)は見易さを勘案すると180pxが欲しい。 メニュー上のリンク文字が途切れがちなのは、せりだしで改善。

おうよそ以上のことが幅設計の要件で、ノートPCや小型端末からの参照も考慮し、なるべくコンパクトに収めるのが基本。(幅があるページは小型画面では横スクロールが必要となる) スマホは専用スキンが適応されるので考えに入れない。

この条件で煮詰めたのが現在の幅設定です。
ページの幅構成の整理_b0174191_02225326.png

A: 本文左マージン 40px
B: 他記事サムネイル画像 計700px
C: ポストテイル
D: メニュー左マージン 40px
E: メニュー幅 180px
F: メニュー右マージン 10px
G: 本文幅 デフォルト(最小値) 720px

「ブログ全体の表示幅」は 40px+720px+40px+180px+10px=990px
これは本文内容が幅720px(最小値)以下の場合で、内容の幅が最小値を超えると、990px以上の幅となる。

+

ブログ名を表示する「ブログタイトル」はウインドウサイズに応じて幅が拡縮します。 ここはHtml上では以下の様にtableで構成されています。

<table width="100%" align="center" id="HEADLOGO" border="0" cellspacing="0" cellpadding="0">
~~~~~~~
</table>

この構成は元スキンから受継いだものですが、実はちょっとした問題があります。
「ブログ全体の表示幅」より狭いウインドウで表示した場合、当然ウインドウには横スクロールバーが出ます。 この状態から、
(1) ウインドウ枠のドラッグでウインドウ幅を拡げた場合は、「ブログタイトル」は設計通りに横に拡がり、ウインドウ幅が「ブログ全体の表示幅」を超えた所で横スクロールバーが消えます。
(2) 横スクロールバーを右へドラッグして、ウインドウ幅を変えずに画面の隠れた内容を表示させると、「ブログタイトル」の右側は途切れたまま表示されます。(下図)
ページの幅構成の整理_b0174191_02362239.png
(2)は私の意図した結果ではありません。
この様な操作をして気付く閲覧者は少ないかもしれませんが、余り嬉しいものではありません。

この問題を、少し改善する方法があります。 「ブログタイトル」(table)の幅の最小値を、あらかじめ「ブログ全体の表示幅」の最小値より少し大きめ(ここでは1000px)に指定してしまうのです。

table#HEADLOGO {
min-width: 1000px;
box-shadow: 0px 6px 8px #aaa; }

このページ内の最大幅の表示物を「ブログタイトル」に設定したわけです。 これにより、ウインドウ幅が1000px以下では必ず横スクロールバーが出ます。 この時(2)の操作をしても「ブログタイトル」は1000px以上の幅なので、先の様に切れることはありません。

しかし、この方法にも限界があります。 「本文幅」がデフォルト値の720pxを10px以上超えた場合です。 (「本文」に幅の大きなブロックなどの内容がある場合です) この場合は「ブログ全体の表示幅」が1000pxを超えます。 この条件でバーの右端までスクロールさせると、「ブログタイトル」の右端が表示されてしまいます。 要するに、「ブログタイトル」が最大幅の表示物でなくなったので「端」が見えてしまうのです。
...えっ、「min-width値」を十倍にしたら? そういうのもアリだけど、必ず横スクロールバーが出るページになるからね ^^;

写真画像等に関しては、スキン基本設定での「本文:720px」の指定に従って、システムが画像幅を自動的に720px以下にして表示します。 そういう影の援助のおかげで、普通は「本文幅」がデフォルト値を超えることはなく、ページデザインのバランスが保たれ、タイトル切れも生じ難くなっています。
しかし、Html編集で幅のあるブロック要素を指定したり、幅のある動画を取り込んだ場合など、まれにタイトル切れが生じてしまいます。

下に敢えて「幅 800px」のブロックを造り、このページで「ブログタイトル」の右端が見れる様にしました。

 <-- 幅は800pxです --> 
<div style="background: lightcyan; border: 1px solid black; border-image: none; width: 800px;">

上の水色のブロック右端が隠れるまで、ブラウザのウインドウ幅
を狭くします。(PC環境の話です)
ウインドウの下端に横スクロールバーが出ているでしょうか。
その状態で、
●下のスイッチを押してこのページ上部に移動する
●次に、横スクロールバーを使ってページ右端を表示させる

     [スイッチ]

実際にタイトルバー端の切れるのが見れましたでしょうか ^^;



by Ataron | 2015-04-30 03:41 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。