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

Test Post Field (8) ページスイッチをスイッチらしく

2009年 08月 14日
ページスイッチに関しては、Test Post Field(4)で、ページの最上段と最下段に置くデザインにしている。

最近は細かい事が気になって困る。IEではLINK文字を押すと文字列の周囲に細かなドットの枠が表示されてしまう。これが矩形ならまだ許せるが、改造元にしたスキンのデフォルトでは英フォント「>」「<」と漢字フォントが混ざるため、途中で高さの変わる変な枠になる。 他のブラウザ環境ではこのドットを表示させない方法があったり、JAVAを使ってIEでも消せる様だが、余りややこしい事をしたくない。

CSSのBODYを見ると、
Test Post Field (8) ページスイッチをスイッチらしく_b0174191_17484745.jpg
などと、フォントが指定されていて、このページスイッチでも英フォントが「VERDANA」に、漢字は「MS Pゴシック」が採用されているらしい。 表記の順番の最初に「MS Pゴシック」を持って来れば、漢字・英字ともこちらが採用され、高さが揃うので少なくとも異形の枠ではなくなるはず。 もっとも、英字の「VERDANA」は気にいってるので、全体に影響の出るBODYの書き換えは控えた。

それで、ページスイッチ周囲でCSS修飾を行い、スイッチだけ「MS Pゴシック」を指定することにした。 また、頻繁に使用されるスイッチなのに、いまひとつ目だたないし、リンクの無い末尾ページでの表示も判断し難い。 弄りついでに文字の背景画を入れてスイッチらしくし、リンク動作を確認し易くした。

+

HTMLのページスイッチ部分は以下の部分に納められているので、これを書き換えた。
Test Post Field (8) ページスイッチをスイッチらしく_b0174191_1827517.jpg
注1)フォントはポイント指定することにし、参照環境で背景とのズレをなるべく生じさせない様にする。
注2)スイッチを納めるデータセル「TD~/TD」に「SEND」というCLASS名を付けて、CSSで修飾する。
注3)元は1行をデータセル3個に分けていたが、背景画の幅を文字の幅に合わせるために、空白セルを追加して5個に分割している。
注4)幅の割り当ては実際の表示テストで調節し「32%」「16%」となった。フォントが大きくなるとスイッチが上下に改行されるので、固定ポイントとせざるを得ない。
注5)以上は下段のHTML表記部分にもコピーして使える。

この書き換えにあわせた、CSS側での修飾追加項が以下。
Test Post Field (8) ページスイッチをスイッチらしく_b0174191_18471895.jpg
注1)「MS Pゴシック」「10PT」を指定しているが、環境により幾らかズレを生じるかも。
注2)文字色「#8CCEEC」は、端のページになり「次ページがない時」に表示される文字色になる。これをスイッチ背景画の色にほぼ合わせ、スイッチが見えなくなる様にしている。
注3)次の項でリンク文字の振る舞いを指定しているが、次ページがある場合は「黒」で、ポイントした時にバックがホワイトアウトして明瞭にした。
注4)背景画の適当な高さに文字が表示される様にPADDINGを調節している。
上PADDINGで高さの位置が変化するので先ず設定し、下PADDINGを背景画が全て表れるまで少しずつ増す。増し過ぎると、背景画の繰り返しの2段目が表示されてしまう。

+

以上の書き換えの成果が下図。矩形のドット枠になり、背景画で余り気にならなくなった。
Test Post Field (8) ページスイッチをスイッチらしく_b0174191_1992422.jpg

by Ataron | 2009-08-14 19:09 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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