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

Test Post Field (9) ページスイッチに拘る

2009年 08月 16日
ブログという形式は時間軸が記事の順番になるので、続きものの記事を後ろから読まされる傾向がある。章わけにした様な連続した記事を読もうとした場合、「前のページ」「次のページ」という表記があだになり、何度も間違い逆戻りしてしまう事がある。「以前の日の」「次の日の」と逆方向に受け取りそうになるからだろう。タグなどで抽出しても、時間軸の方向で必ず整理されて来るのだから、いっそのこと「NEW」「OLD」なんかで表記した方が良いのではと思うが。こういう不明快さは、慣れない人を仕組みの理解から遠ざけてしまう事になるのではと思っている。ブログをホームページ代わりにしている方が間違っていると言われれば仕方がないが...

そんなわけで、本当はページスイッチの文字を書き換えたいところだが、これは少々ややこしいテクが必要になるだろう。そんな事を考えるから、つい拘って別の事をしてしまう^^; ここに至る経過は以下にあるので、興味のある方は参照してください。

Test Post Field (4)...ページスイッチを上段と下段に配置
Test Post Field (8)...背景画でスイッチらしくする

+

前回で、スイッチに背景を入れ好結果だったから、もうすこしデザインに手を入れた。先ず、スイッチの角を取り丸みを付けた。影もそれに合わせて書き換えた。
Test Post Field (9) ページスイッチに拘る_b0174191_415810.jpg
これまでのは上図の真中のパーツだけで表していたが、角をとるには左右のパーツが必要になってくる。どうせ二つ作るので、デフォルトの「<」「>」を使ったのより見栄えのする方向マークを入れた。これは、文字と位置を合わせて「<」「>」を隠してしまう案だ。

HTML側のアレンジは以下。
Test Post Field (9) ページスイッチに拘る_b0174191_1216880.gif
注1)TABLEを「SENDTB」、いままで一緒にしていた3つの「SEND」を別個に「SENDL」「SENDM」「SENDR」のCLASS名で指定しなおした(上赤い部分)。このCLASS名で各セルを修飾し背景画を入れた。
注2)ページスイッチの要素「$prepage type=1$」はセル内で右詰「ALIGN=RIGHT」、「$nextpage type=1$」は左詰め「ALIGN=LEFT」と、HTML側で修飾されている。CSS側で修飾しても良さそうだが、そのまま使った。
注3)青文字にしたが、デザイン上の理由でスイッチ全体の幅を少し広くした。
以上に対応してCSS側でのアレンジは以下。
Test Post Field (9) ページスイッチに拘る_b0174191_1355887.gif
注1)「FONT-FAMILY」「FONT-SIZE」「COLOR」の指定は、「TABLE.TABLETB」でまとめて指定出来そうだが、どういうわけか無効になる。仕方がないので、「TD.SENDL」「TD.SENDR」の各項で指定している。
注2)リンク文字の振舞い指定は、「TABLE.TABLETB」でテーブル内の全てに反映した。
注3)「background-position」で、文字要素に合わせて背景画の右詰、左詰をしている。スイッチ画像と文字の左右の位置合わせは、画像を差し替えて微調整。(PADDINGでは上手く行かない) 参照環境によってはズレるだろう。少しは救えるかと方向マークを少し大きめにしている。
注4)文字要素と背景画像の縦位置は、「background-position」を使うと画が上方向に微妙にズレた。「PADDING」の「1PX」「10PX」はそれを修正した結果。また「TD.SENDM 」で不必要な「background-position」を指定したのは、バーの画がここだけ上下にズレてしまうからだ。

+

この様な微細な位置合わせをするデザインは、他環境で悲惨にズレる可能性を感じるが、プロじゃないし。なんでも経験だ。
by Ataron | 2009-08-16 05:00 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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