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

文書データ行(ページ末尾)の幅管理 / エキサイトブログ

2017年 07月 18日
当方のスキンでは今まで、ページ末尾の文書データ行のフォントサイズを「0.84em」と、本文の文字サイズ「1em」より小さく指定していました。

文書データ行(ページ末尾)の幅管理 / エキサイトブログ_a0349576_18370390.png

IEは簡単に表示文字サイズを変更出来、その「極大」時にこの文書データ行の行崩れを生じる事があります。 下図はその例で、文字サイズ「極大」、カテゴリ名が長い、スキンの本文幅が可変、ウインドウの狭い状態でブログを表示している事など、かなり極端な場合です。(下は末尾行のフォントサイズが「1em」の場合です) これを避けるためにフォントサイズを小さくしているわけです。

文書データ行(ページ末尾)の幅管理 / エキサイトブログ_a0349576_18401656.png

公式スキンを調べると、末尾行のフォントサイズを本文より小さくしたデザインが多い事に気付きます。 現行の公式スキン198件中、121件(約6割)がこの様な指定で、他の77件は殆どが本文と同サイズです。 本文幅が可変のスキンの場合や、固定幅でも本文幅が狭い設定の場合、行崩れが生じるのは、多くの場合にこの末尾行になります。 この問題を加味して、公式フォントはサイズを小さくしている場合が多いと思われます。

一方、この行の「Comments」はコメント欄を開くスイッチでもあるので、私は本文と同サイズにしたかったのです。 末尾行の崩れる様なモニターは減っているでしょうが、やはり最悪でも崩れない様にしたいものです。 そこで、行溢れの場合は左端に隠れる形に、アレンジする事にしました。

この行の構成のDOM表示は以下です。

文書データ行(ページ末尾)の幅管理 / エキサイトブログ_a0349576_19525256.png

「.POST_TAIL」がこの行の本体です。 以下の指定で左側に隠しますが、「text-indent: -8em」がミソです。「-8em」は適当に大きくて「-20em」でも良い。 本文最小幅の指定によって変わりますが、私の場合は「-8em」より少ないと行崩れする場合が出て来ました。

.POST_TAIL {
font-size: 1em !important;
text-align: right;
text-indent: -8em;
overflow: hidden; }

「font-size: 1em !important」は、末尾行のフォントが本文と同サイズなら不要な指定で、「text-align: right」も元から指定されている場合が殆どで、不要かも知れません。

上の指定でブラウザの文字サイズ「極大」でウインドウ幅を狭めた場合、下の様に本文幅が狭くなり、末尾行が左側に一部隠れます。

文書データ行(ページ末尾)の幅管理 / エキサイトブログ_a0349576_20131408.png

これで目的を達したのですが、いわばフェールセーフの指定です。 ブラウザの文字サイズ「中」にすれば、下図の様に通常は末尾行が左側に隠れる事はありません。

文書データ行(ページ末尾)の幅管理 / エキサイトブログ_a0349576_20241293.png

以上、使用中のスキンが本文幅が可変のタイプで、末尾行のフォントを本文と同サイズにした場合に、それによって行崩れが生じ得るのを防ぐ方法です。


by Ataron2 | 2017-07-18 20:25 | ブログスキンのアレンジ