アーカイブ: web

2008年08月02日

Googleニュースを少しだけ見やすくする

エントリー書くのも久しぶりです。

今年の夏は厳しく、早速暑さと風邪でダウンしています…。
もう少し体を鍛えないとなぁ、と思う今日この頃です。

今更なのですが、Google ニュースでニュースを見るようになりました。
クロールしたニュースをアルゴリズムでランキングする手法は検索のインデックス生成の方法と原理は良く似ていますよね。
技術を生っぽく前面に押し出すのはいかにもGoogleっぽい感じがして、個人的には好きです。

ただ、プレゼンテーション部分が非常に生っぽいので、折角なので、多少CSSを書き足して読みやすくなるようにしてみました。
FirefoxのStylishを使用してください。

これが現状で

これが整形後です。

で、実際のCSSはこんな感じです。GoogleニュースはほとんどHTMLマークアップによる構造化がされていないので、隣接セレクタを多用しています。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("news.google.com") {

/* news module */

.lh
{
border-bottom:1px solid #aaa;
padding-bottom:10px;
}

.lh br
{
display:none;
}

/* anchor */

.lh a
{
text-decoration:none;
}

.lh a:hover
{
text-decoration:underline;
}

/* title */

.lh a+br+font
{
display:block;
margin-bottom:5px;
}

/* photo provider */

.lh table font
{
display:block;
}

/* description */

.lh a+br+font+br+font
{
display:block;
line-height:1.5 !important;
margin-bottom:7px;
}

/* destination */

.lh a+br+font+br+font+br+font,
.lh a+br+font+br+font+br+font+br+font
{
display:block;
margin-bottom:5px;
margin-left:20px;
}

.lh font.p
{
display:block;
margin-top:7px;
margin-left:20px;
}

.lh font.p+br+font.p
{
margin-top:0;
}

}

あとはGreaseMonkeyつかってショートカットを足すくらいかな?

アーカイブ