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

新ページャーの配色で悶々

2015年 04月 06日
これは私の場合に限った悩みでしょうが...

新ページャーのスイッチボタン、これは機能上の重要さを考えると、私のスキンデザイン上では「影付き」のランク扱いは必至です。
で、影(box-shadow)を色々と調整した結果、タイトルと同じ設定で良いという結論になりました。
box-shadow: 4px 4px 6px #aaa;

続いて設定したボタンの配色は、タイトルと同色(文字背景色#d7e3ec)で統一したものでした。
color: #314e6b;
background: #d7e3ec;
border: 1px solid #d7e3ec;

新ページャーの配色で悶々_b0174191_07465011.png
しかしこれ、目の錯覚なんでしょうが、下のタイトルに比べてボタンが暗くくすんで見えます。 これに耐え切れず^^; ボタンの配色を少し明るめ(#d5eaf4)に変更。
color: #314e6b;
background: #d5eaf4;
border: 1px solid #d5eaf4;

新ページャーの配色で悶々_b0174191_07474964.png

+

さて、これで良しとすれば良いものを、次に気になりだしたのが現在のボタン選択を示す「白」反転(上のサンプルでは「7」)です。 選択ボタンの配色は下の設定です。
color: #000;
background: #fff;
border: 1px solid #fff;

これが周囲の4個よりなんか小さく見える様な...(400%などに拡大して見るとそうでもないんですが)これはボタンが背景とコントラストがないからではと、ボタンの枠線を周囲のと同色(#d5eaf4)にしてみると...
color: #000;
background: #fff;
border: 1px solid #d5eaf4;

新ページャーの配色で悶々_b0174191_07485177.png
あきません、上辺の並び感は良くなったけど、下辺や左右は枠線分だけ余計に小さくなっちゃった。
いっそボタン文字の背色も同色にしたら...そらあかんでしょ、選択されてるのがどれか判らないじゃん。

そもそも「白」が間違いの元やね、文字背色も枠線もブログヘッダーのブルーにしてみたら?
そこで「At Studio TA」あたりの基本色(#8acbeb)にしてみる。
color: #000;
background: #8acbeb;
border: 1px solid #8acbeb;

新ページャーの配色で悶々_b0174191_07495130.png
あぁ、やっぱり目の錯覚が! 周囲より大きく感じるし、ヘッダーよりくすんでるし、それに「7」が見えにくくない? 注文が多いんだからまったく。
じゃあ、ボタン文字の背色はもう少し明るく(#a9daf3)して、枠線は周りと同じ(#d5eaf4)でどうよ?
color: #000;
background: #a9daf3;
border: 1px solid #d5eaf4;

新ページャーの配色で悶々_b0174191_07503119.png
うむ、これいいんじゃない。 大きさも違和感ないし「7」も見易くなったし、あぁでも色が周りと近いなぁ...
こんなわけで、私のスキン配色は、様々なブルーを使った水墨画状態の傾向を強めたのです。

+

〔追記〕
このページのハードコピー、文字がスイッチの中央より上にズレているのに気付かれましたでしょうか。 これ、IEの画面の拡大率によって、ちょうど良く見えたり、上にズレて見えたりする様です。 それにスイッチの影で、余計に上付きに見えます。 当初からスイッチ枠に対する文字の上下位置は気にしていたのですが、上のハードコピー時より下げ目に修正しました。(拡大すると中央より下付きですが、100%~125%程度の標準的な拡大ではちょうど良さそうに見えます)

ちなみに文字位置の調整は「a要素」の paddingを調整しても可能ですが、スイッチ枠の大きさが変わります。「a要素」の line-height(行の高さ)を変えると枠内で文字の位置だけが上下するので、ここでは都合が良いです。

変更に対処する (5) 深層モード総集編」では、下の部分です。(関連部分のみの表示です)

.MpageTool a {
line-height: 24px; } /* スイッチ枠内での文字位置調整 新ページャー共通デザイン */

変更に対処する (6) 表層モード総集編」では、下の部分です。(関連部分のみの表示です)

.pagerNavLink .current, .pagerNavLink a, .pagerNavLink a:hover {
line-height: 24px !important; } /* スイッチ枠内での文字位置調整 */

ハードコピー時 23px → 24px の変更です。



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

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