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

「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ

2014年 05月 06日
スイッチデザインが自由に出来る条件が揃い、タイトル部の文字並びをより精密に整然とさせたい欲が出て来ました。

タイトル外枠
タイトル文字 (フォントサイズmedium 漢字/英字)
スイッチ枠
スイッチ文字 (フォントサイズsmall 英字)

フォントをメイリオとし、IEの全ての文字サイズで、高さのバランスが大きく崩れない事を目標にします。
また、スイッチ右側にタイトルが透けて見える様にして、タイトルが長い場合に使い易いデザインとします。



タイトル部のHtmlは、前々回前回と変化はありません。

Htmlです。
    <div class=POST_HEAD>
<div class=POST_TTL><$postsubject$></div>
<div class=POST_ADM><$postadmin type=2$></div>
</div>



今回は、文字配置の調整を最初からやりなおします。
先ず、漢字/英字でフォント高が判り易い文字をタイトルに書き込み、タイトル枠がフォントに密着した状態を作りました。 タイトル枠は全体を包む「POST_HEAD」ブロックの borderで、それに内接するタイトル文字の容器「POST_TTL」ブロックが、その大きさを決定します。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_16225929.png
上図は、メイリオの特徴が良く出ていますが、
●漢字ベースラインを高くして英字とバランスさせている
●border-bottomの下線が離れ、background-colorの上下バランスが悪い
といった点は、調整に直接関係します。

タイトル文字に対する「padding」を「POST_TTL」に指定して、タイトル枠の大きさを変化させてみると、やはり漢字が中央に来る状態が落ち着きます。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_17315777.png
上下のクリアランスは好みですが、上記の値は妥当なものです。 この設定で文字サイズを変えても、常にタイトル枠のほぼ中央に収まりました。 文字サイズ最大で詰まり過ぎず、最小で空き過ぎずです。 英字は少し低くなりますが、これを以降の基準としました。

div.POST_TTL {
font-size: medium;
font-weight: normal;
padding: 0.44em 0em 0.22em; }



次に、前回の「Edit Del」スイッチの配置方法に準じて、スイッチのバランスを決めます。 「POST_ADM」の本来の位置で、背景色background-color と 枠border を付けただけのスイッチは下の様になります。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_18452086.png
エキサイトのオリジナルデザインにより、スイッチ文字の間に1文字「|」があり、その分の隙間が開きます。 これを寄せるのが「a要素」に対する「margin-left: -1.1em」の指定です。 この指定でスイッチが近付き、「|」は「Del」スイッチの下に隠れます。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_17521339.png
スイッチ文字が青い背景の中で少し上寄りです。 これは「a要素」の 上padding の 0.16em で、ちょうど文字が中央に来る様になりました。(今回はスイッチ文字のサイズをsmallとしていて、IEの文字サイズ変更で微妙な狂いは生じます) 更に、左右padding を 1em ずつ設定してスイッチボタンの体裁にしました。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_17593835.png
上図、0.16emの操作で、あたかもスイッチ上辺がタイトル枠に接した様に見えますが、それはたまたまで、それが目的ではありません。0.16emは、スイッチ文字がスイッチ面(文字背景)の真ん中になる様に求めたpadding値です。

下は、今までの「a要素」のCSS指定をまとめたものです。

div.POST_ADM a {
padding: 0.16em 1em 0em;
margin-left: -1.1em;
border: 1px #AAA solid;
background-color: lightSkyBlue; }



2個のスイッチの外側を包む「POST_ADM」ブロックは、タイトル全体の「POST_HEAD」の中にありながら、同居の「POST_TTL」のタイトル文字を全く排斥しない「宙に浮いた」ブロックの性質を与えます。 これは、「POST_HEAD」に「position: relative」、「POST_ADM」に「position: absolute」を指定して実現します。(過去記事を参照ください)

一方、スイッチを最適の場所に配置する最後の仕上げをするは、この「POST_ADM」ブロックの padding 設定です。 本来の「POST_ADM」はタイトル枠の右上に接していて、これに 上padding 0.38em を与えると、枠の高さのほぼ中央にスイッチが来ました。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_19524250.png
最後に 右padding の1emで、長いタイトルの場合にタイトル枠の右隅が見える様に全体を左に寄せています。下の様な状況の場合に、これは有効です。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_19595380.png
下は以上の設定をまとめたCSSです。

div.POST_ADM {
position: absolute;
top: 0px;
right: 0px;

font-size: medium;
font-weight: normal;
padding: 0.38em 1em 0em; }

div.POST_HEAD {
position: relative;
border: 1px #AAA solid;
background-color: #EEE; }



DOMを使い、IE画面の文字サイズを何度も変化させながら、納得の行くバランスを求めました。 フォントのサイズ変化に強くて、しかも固定サイズに逃げない、そういうCSSデザインが今後は求められる様に思います。 少しはそれに近付けたでしょうか。 今回の調整は、IEの文字サイズを最小でもスイッチは殆ど上下にずれず、なかなか良い結果と思っているのですが。
「Edit Del」スイッチのデザイン 最後の纏め / エキサイトブログ_b0174191_20064701.png


追記:
emを使い縦方向の間隔の調整を行ったので、文字の大きさに比例して間隔も拡がるため、タイトル文字の大きさが変わってもタイトル枠とのバランスが変わらない様です。(px等の固定単位を使うとバランスが変化する)
ただし精密に反省すると、タイトル文字にmedium、スイッチ文字はsmallを指定していて、ここにバランス変化の要因がありそうです。
IEが文字サイズの変更の際に、「medium文字とsmall文字」の高さの比を、正確に維持する保障が無いからです。 これが異なっていれば、スイッチのタイトル枠内での位置が上下にズレるはずです。 しかし、実際には殆ど気になりませんでしたので、この2種サイズの利用を許容しました。




by Ataron | 2014-05-06 20:44 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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