カテゴリアーカイブページのようにブログの記事が並んでいるページで、記事の先頭の1行目だけが表示になるようにこのブログ用のユーザースタイルシートを書きました。
前にどこかで書いたと思うのですが、このブログでは先頭一行がブログの概要となるようにしています。
アーカイブページやブログトップなどエントリが並んでいるページでは、記事本文（EntryBodyに該当）が表示されていますが、これを概要だけ表示にするために書いたスタイルシートが以下です。使う場面とかは、ちょっと微妙です。
アーカイブページで記事を流し読みしたいようなときとか(？)
@namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain(markdiary.com) {body.double div.textBody :not(:first-child) {
display:none !important; }
}
気づいた点などは以下です
- 厳密には先頭の一行目というわけでないような。見た目がそんな感じなので「先頭一行目」という表現にしてます。
- 全てのページを確認したというわけでもないので、もしかしたら挙動の怪しいものがあるかもしれません。
- Firefox3.0.6 ＋ Stylish 0.5.9にて確認しています。
- VicunaテンプレートではtextBodyの部分は共通なので、ウチとこ以外でもできるかも。
- あと記事先頭行に常にテーマ画像のようなものを入れてるサイトだと画像しかでなくて面白くないかも。
CSS3関連で幾つか読み漁ってみました。（←最近はまってるらしい......）
- CSS 3のセレクタ解説：：root、：not、：empty、：target - builder by ZDNet Japan
- CSS セレクタに関するおさらい 3 | WWW WATCH
- CSSセレクタまとめ1 | CSS-EBLOG
- Selectors W3C Working Draft 15 December 2005
- 実践Web Standards Designのススメ：第6回 CSS3のセレクタを使用してみよう｜gihyo.jp ... 技術評論社
- CSS3 の否定疑似クラスの使いどころ - lucky bag
以下はおまけです。ブクマ登録ボタンを消しやすいようにbookmarkButtonというclassつけときました。
/* ========= Omakediv#main{
background: url(http://www.markdiary.com/csstemplate/img/markdiary.png) no-repeat scroll 0 10em !important;}
.reaction,
.bookmarkButton {
display:none !important;}*/