はてブの引用文の幅を画面一杯に広げるユーザースタイルシートを作りました

2008-11-25

はてなブックマークのリニューアル版がリリースされましたね。デザインがきれいになって、カテゴリが強調され、検索が強化され...と、かなりの進化を遂げました。まずは、はてなスタッフの皆様、リニューアルおつかれさまでした！

引用文の幅を画面一杯に広げるユーザースタイルシートを作りました

リニューアルの変化の一つとして、人気エントリーや注目エントリーページのエントリ１つ１つに、引用文が表示されるようになりました。

snapshot
エントリ１つ１つにつく引用文。

その引用文のブロックの幅は、Googleの検索結果のように横に並ぶ文字数が42em(文字)固定となっており、部分的なエラスティックレイアウトになっています。これはこれでいろいろメリットはあるのですが、個人的にはブラウザの横幅一杯に広がるレイアウトにしてみたいと思いました。

というわけで引用文の幅を画面一杯に広げるユーザースタイルシートとして「Hatena Bookmark Blockquote Width Maximizer」を作ってみました。(といってもたったの１セレクタ１宣言ですけどね :-b)

以下、Before Afterです。(スクリーンショットをとるために右側の広告を一時的に非表示にしていますので、実際は右側に広告が表示されます)

Before.

After.

引用文がブラウザいっぱいに広がることで、一画面に表示されるエントリの数が増えました。ちなみに引用文の左に画像が表示されている場合はあまり効き目がありません。ざっと見た感じ画像が表示されるエントリは少数のようです。

Firefoxの場合はStylishかGreasemonkeyのどちらかをインストールしておけば、userstyles.orgのページ内の「Load into Stylish」ボタンか「Load as user script」ボタンを押すだけでスタイルシートを適用できます。

StylishもGreasemonkeyどちらもインストールしていないか、ほかのブラウザなどで適用する場合は、userstyles.orgのページを開いて「Show Code」ボタンを押してスタイルを利用してください。

なお、このエントリを書こうと思ったきっかけは＠ネットおたく:新はてブってさぁです。thx!

本文中に出てきた単語「エラスティックレイアウト」についての解説は「ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介」がおすすめですよ。

コメントは受け付けていません。