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

Test Post Field (11) 「PageUp」スイッチを追加

2009年 08月 27日
あるページで「前のページ」「次のページ」の間に「ページのトップへ戻る」スイッチを作っている人がいた。 ページの記述が多い方だし、これはうちも導入することにしました。^^;
加工するのは最下段のページスイッチだけで、ここにページの最初にある「ID=TOP」の区画へのリンクを作れば良い。もともと、ページスイッチのTABLEは、「前のページ」「次のページ」の間に空白スペースの欄があるので、ここにリンクを書き込んでいる。

HTMLの新たな記入は以下の青い文字の部分。
Test Post Field (11) 「PageUp」スイッチを追加_b0174191_0135719.gif
注1)リンク文字はデザイン上の目的で改行して2行にしている。
このリンクを書き込んだ区画「TD.SENDM」のCSS修飾を追加したのが下の青い文字の部分。
Test Post Field (11) 「PageUp」スイッチを追加_b0174191_0192557.gif
注2)フォントは両横のページスイッチに一応合わせた。
注3)文字サイズは2行を納めるために少し小さく8ポイントにしている。
注4)更に、行間隔を詰めて「line-height:70%」を指定。
注5)「▲」印を中央にもって来るため、中央揃え「text-align:center」を指定。
注6)やはり、両横のスイッチに上下位置を揃えるため、同じPADDINGを指定。
注7)これらは上段のページスイッチの中央部にも影響するが、そちらには文字記入が無いので表面上の変化は無い。

以上の結果で、最下段の「PageUp」スイッチは以下の様なデザインとなった。
Test Post Field (11) 「PageUp」スイッチを追加_b0174191_0331695.jpg


+

注4)行間隔を後に修正し「line-height:65%」にした。

よく調べると、このスイッチと同様のスイッチが、デフォルトの機能に在った。
Test Post Field (11) 「PageUp」スイッチを追加_b0174191_10155380.jpg
左隅の「▲」マークだが、これは「投稿月指定」「タグ検索」など抽出操作で複数ページを表示した場合にのみ、各投稿の末尾に表示される仕組みの様だ。その他の場合は表示されないので、やはり投稿内容が縦長な場合には、こちらで作っておく方が良いだろう。

デフォルトの「▲」は、抽出だと縦に長く羅列されるという考えから付加したのだろうと思う。しかし、ページに一度に表示される件数は最大30件も設定出来るので、そんな設定の人のためにも常設しとけば良いと思われるが?

また、上図の「#」マークは、「投稿月指定」「タグ検索」「カテゴリ」で表示される。投稿の一件のみ選択するスイッチらしい。コメント等が沢山記入される人のページでは、それらを展開表示させる意味があるのだろう。
by Ataron | 2009-08-27 00:37 | スキン等の覚書き | Trackback | Comments(0)
名前
URL
削除用パスワード

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