WWW Watch

はてブが使いにくければ User CSS 書けばいいじゃない

はてブの見た目を旧デザインに近い形に書き換える User CSS を適当に書いたのでシェアします。

はてブはてなブックマーク (はてブ) のリニューアル後、確かにさらーっと一覧を眺めたい場合には見づらくなりましたよね。サムネイル邪魔だとか、色々ありますけども、サービス提供側も色々理由があってデザインを直してるんでしょうし、デザインが大幅に変わったあとは今までのに慣れてた関係もあって使いづらいわ~的なお話が出てくるのは仕方ないこと。

で、文句言っても元のデザインに戻るわけじゃなし、どうしても見づらいっていうなら自分で直しちゃえばいいじゃんってことで、はてブ用の User CSS 書きましたのでシェアします。

短時間でチャチャっと書いたので超適当ですが、余計なもの消して、元の見た目みたいに単純な縦並びにし、1ページ当たりの表示数を増やしてます。

下の CSS は Firefox で Stylish アドオンを使ってる自分の環境で書いたのをそのままコピペしただけですので、他の環境で使うときは適当に直してください。

@-moz-document domain("b.hatena.ne.jp") {
  .entry-contents blockquote,
  .thumbnail,
  .shim-elem-for-height,
  .tag,
  .box-wrap.box3.mix .entry-data,
  .box-wrap.box3.mix .entry-meta {
    display: none !important;
  }
  .box-wrap,
  .entry-vertical-3,
  .entry-vertical-4 {
    background: none !important;
    position: relative;
  }
  .entry-unit {
    display: block !important;
    float: left !important;
    width: 620px !important;
  }
  .users {
    background: #ffefef !important;
    border: none !important;
    display: inline-block !important;
    height: auto !important;
  }
  .users a {
    color: #ff0754 !important;
    font-size: 10px !important;
    padding-right: 18px;
  }
  .users a span {
    font-size: 12px !important;
    font-weight: bold !important;
  }
  .entry-contents {
    padding: 5px 10px 10px 10px !important;
  }
  .hb-entry-link-container {
    margin-bottom: 0 !important;
  }
  .entry-link {
    color: #00608d !important;
    text-decoration: underline !important;
  }
  .entry-data,
  .category,
  .domain,
  .favicon {
    display: inline !important;
    float: none !important;
  }
  .favicon {
    vertical-align: middle;
  }
  .entry-meta {
    border: none !important;
    display: inline-block !important;
    padding: 0 !important;
    position: relative; !important;
    left: 6.5em;
    top: -2.1em;
  }
  .date {
    float: right !important;
    text-align: right;
    width: 10em !important;
  }
  .ad-unit {
    border-top: none !important;
    width: 308px !important;
    position: absolute;
    top: 0;
    right: 0;
  }
}

適用すると、通常では下記のようなデザインのはてブが、

はてブ 通常の状態

下記のようになります。

はてブ User CSS を適用した状態

細かいところとか確認せずにとりあえずで書いてますので、どこかおかしくなっても知りません。参考までにお使いください。

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー