このブログの記事リストページで先頭1行目だけ表示させるユーザースタイルシート

カテゴリアーカイブページのようにブログの記事が並んでいるページで、記事の先頭の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関連で幾つか読み漁ってみました。（←最近はまってるらしい......）

以下はおまけです。ブクマ登録ボタンを消しやすいようにbookmarkButtonというclassつけときました。

/* =========  Omake

div#main{
background: url(http://www.markdiary.com/csstemplate/img/markdiary.png) no-repeat scroll 0 10em !important;}
.reaction,
.bookmarkButton {
display:none !important;}

*/

このブログの記事リストページで先頭1行目だけ表示させるユーザースタイルシート

Comments: