次の記事・前の記事ナビに擬似クラスでひと工夫
- Category : blog > serene bach / 2007.02.12 Mon 16:08
- permalink
- comment:1 1175740242
- trackback:1 1171783839
せっかくnicetitle.jsを使うので、個別記事ページで、前の記事へ・次の記事へのリンクも、title属性付きにしたいなぁと思い、
<!-- BEGIN sequel -->ではなく、
<div class="entry_navi">
{prev_entry} | {next_entry}
</div>
<!-- END sequel -->
<!-- BEGIN sequel -->を使ってみた。
<div class="entry_navi">
<a href="{prev_permalink}" title="{prev_title}" >{prev_title}</a> | <a href="{next_permalink}" title="{next_title}" >{next_title}</a>
</div>
<!-- END sequel -->
でも、＜＜と＞＞がつかないので、物足りない…。直接
<a href="{next_permalink}" title="{next_title}" class="next_entry">{next_title}＞＞</a>
と書いてみたのですが、
そうすると、
参照→のように、次の記事がない、最新記事の場合、無駄に「＞＞」が残ってしまうんですね。。。
これってblog的にとっても不細工なので、
やっぱり独自タグ以外のものを入れるのはダメなんだ、と。
だからといって、title属性を入れるためだけの、プラグイン作る能力はまだないし、変な＞＞出たままあきらめたくないし…、title属性nicetitle表示をあきらめるのもイヤだし…。
というわけで、css3に手を出してみたり。
<!-- BEGIN sequel -->
<div class="entry_navi">
<a href="{prev_permalink}" title="{prev_title}" class="prev_entry">{prev_title}</a> | <a href="{next_permalink}" title="{next_title}" class="next_entry">{next_title}</a>
</div>
<!-- END sequel -->
.prev_entry:not([title=""]):before {
content:"<< ";
}
.next_entry:not([title=""]):after {
content:" >>";
}
CSS セレクタに関するおさらい 3＞否定擬似クラス （Negation pseudo-class）
を参照し、notを使った否定擬似クラスで、
<a href="" title="○○○">○○○</a>
title属性のあるものは、＜＜や＞＞を表示するけど、
<a href="" title=""></a>title属性にテキストがない場合（＝前/次の記事がない）は、＜＜や＞＞は出さないヨ、という指定を。
もちろんcss3なのでIE6は×です。Firefoxで確認。
今のところIE7も反応してくれてませんが、いずれはIEでも実装されるでしょう、と見込んで、まぁさいあく別に＜＜や＞＞が出ても出てなくても、blog見てる人に、めっちゃアクセシビリティ悪い、ってわけじゃないので、ブラウザの今後の発展を期待して、これで決定！しちゃいました。
（※最後になりましたが、前の記事と次の記事の間にあるblogトップに戻る「main」リンクは、サムネイルにはついてるけど、ソースサンプルでは割愛させてもらいました。）
Comments
safariを使える環境でないので確認はとってませんが1.xと2.x共に文字化けするとかしないとか。
.prev_entry:not([title=""]):before {
content:"\00003c \00003c \000020 ";
}
.next_entry:not([title=""]):after {
content:"\000020 \00003e \00003e ";
}