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

タイトルのリンク文字の領域を拡げる

2015年 04月 03日
ページャーの表層 → 深層の切り替え方法は、少し判り難い様に思います。 なんとなくページャーのスタイルが異なったが、どうすればそうなるのか判らないという人が、非エキサイトユーザーはもちろん、エキサイトユーザーにも増えそうです。

まあ、判らないでもブラウズが出来ますが、こういうの少しでもはっきりした方が良いはず。 とりあえず、表層ページャーでタイトル文字をクリックすれば深層ページャーになる事を、印象付けるのが良いと考えました。

以前のページャー環境では、このタイトル文字のクリックの意味が無いに等しく、私は敢えてタイトルのリンク文字をリンク文字とは判り難く設定していました。( hoverで文字色が紺色→黒に変化するだけ) しかし今度は逆で、リンク文字であることを強く示す必要があります。

+

最初に試みたのは、タイトル枠のどこにポインタが触れても、タイトル全体が白背景に反転する設定でした。 これは、タイトルの文字の「a要素」に「display: block;」を指定する方法です。 他に「padding」と「margin」を調整して下図の一番上段の様に、一見うまく行ったかに思えました。
タイトルのリンク文字の領域を拡げる_b0174191_22123539.png
しかしタイトル部の構造は、色々な内容がシステムによって書き込まれ、別の場所で利用されます。 上図の2段目は深層でのタイトルで、文字の左余白が無くなってしまいました。 3段目はカテゴリ検索結果のタイトルで左余白がありません。 4段目は月指定の検索結果のタイトルで、hover の白背景がいびつです。 タイトル内の構造が様々に変化するので、その全てで違和感のない表示とするのは、なかなか困難です。

+

あれこれ工夫してマシな結果に近付けますが、やたら複雑なCSS記述になり、それでも完璧とはならず、これは方針を改めるべきと判断しました。

改めた方針は、ポインタが乗って反転する範囲を、タイトル文字の少し広めの範囲に留めるというものです。 これなら、色々な場合のタイトルで、ほぼ納得の表示結果を得ることが出来ます。
タイトルのリンク文字の領域を拡げる_b0174191_22344528.png
上図は表層で、タイトルのリンク文字にポインタを乗せた状態です。 残念ながら、文字の右側を外れると反転しませんが、上下はタイトル枠いっぱいまでポインタを感知します。

タイトル部のCSS設定は以下の様なものです。
div.POST_TTL {
font-size: medium;
font-weight: normal;
padding: 0.44em 0em 0.22em 1.5em; }

div.POST_TTL a {
padding: 0.44em 0.2em 0.22em;
margin: -0.44em -0.2em -0.22em; }

div.POST_TTL a:hover {
color: #000;
background: #fff; }

結局、とてもオーソドックスなCSS設定です。

初項の「div.POST_TTL」は、タイトルの外枠表示を受け持ちます。 その中に入れられた要素に対し、広めの枠の体裁をとらせた指定で、
padding: 0.44em 0em 0.22em 1.5em;
の「1.5em」が、内部の左余裕を指定しています。

2項目「div.POST_TTL a 」は、タイトル枠内に置かれた「a要素」の「hover感知範囲」を拡げる設定です。
1行目で、タイトル枠と同じ上下幅と、文字幅の左右に0.2emずつの範囲まで、「a要素」の範囲を拡大しています。 そのままでは、文字の横方向並びが崩れる(特に月指定検索で)ので、2行目のマイナスmarginで修正しています。(上下幅のマイナスmarginは不要ですが、「display: block;」を指定した場合には必要で残してあります)

3項目は、hover時の文字色と背景色の指定です。



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

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