« 無料で留守番電話のメール転送も可能なFUSION IP-Phone SMARTをWindowsで使ってみた
はてなブックマークのhotentryをユーザスタイルシートで見やすくする 2 »

はてなブックマークのhotentryをユーザスタイルシートで見やすくする

Created at: 2013-01-10 | Tags:

2013年1月8日に、はてなブックマークのトップページとカテゴリページがリニューアルされ、ホットエントリーのページも見づらくなってしまいました。

1日に何度もホットエントリーをチェックするようなホッテントリ中毒者にとっては、この視線移動の多いデザインは非効率です。

ここでは、Google Chromeの拡張機能であるStylishを使い、ユーザスタイルシートでホットエントリーの表示を改善する方法を紹介します。

ホットエントリーの表示改善イメージ

リニューアル後の現在のホットエントリーの表示は以下のとおりです。

はてなブックマーク ホットエントリー リニューアル後 はてなブックマーク ホットエントリー リニューアル後

今回紹介するユーザスタイルシートを適用することで、以下のように表示が変わります。

はてなブックマーク ホットエントリー ユーザスタイルシート適用後 はてなブックマーク ホットエントリー ユーザスタイルシート適用後

ホットエントリー用ユーザスタイルシート

使用しているスタイルシートの内容は以下のとおりです。途中までは下記ページで公開されているものをそのまま使わせていただきました。

スクリーンショットでは広告を隠していますが、広告を非表示化する部分は非掲載にしています。

/* -----下記ページより引用-----
はてブユーザースタイルシート～サムネ復活しました～ - tpex_ovon's blog
http://tpex.hateblo.jp/entry/2013/01/10/144019 */

/*お好みで*/
body {
    background-color:#F0F0F0;
}
.box3_2, .box1_1, ul#navi-category {
    background-color: white;
}
/*いらないブロック消す*/
ul.entry-list-xl div.entry-contents blockquote, ul.entry-list-xl li.entry-unit ul.entry-comment, ul.entry-list-l div.entry-contents blockquote, ul.entry-list-l li.entry-unit ul.entry-comment, div.entry-contents blockquote, li.entry-unit .follow.hb-favorites-appended, .box3_1 {
    display: none !important;
}
/*復活*/
ul.entry-list-xl ul.entry-data {
    display:block;
}
/*ボックスボーダー*/
.box3_2, .box1_1 {
    width: 100% !important;
    border: 1px solid #CCC;
    border-radius:4px;
}
/*背景画像ボーダー消す*/
div.box-wrap.box2.mix, ul.entry-vertical-4, ul.entry-vertical-3, div.box1_1 li.more-entry {
    background-image: none !important;
}
h2 {
    margin:0;
    padding: 5px 0 5px 5px;
    display:block;
    border-radius: 3px 3px 0 0;
}
.box1_1 h2 {
    background-color: #2C6EBD;
}
/*エントリーリスト*/
ul.entry-data {
    margin:5px 0 0 0;
}
div.entry-contents h3 {
    margin:0 !important;
    clear:none !important;
}
li.entry-unit {
    width:100% !important;
    border-bottom:1px solid #ccc;
    overflow:hidden;
    position:relative;
}
li.entry-unit:last-child {
    border-bottom:none;
}
li.entry-unit ul.users  {
    border-bottom:none;
}
ul.entry-list-xl, ul.entry-list-l, li.entry-unit {
    margin:0 !important;
}
li.entry-unit, li.entry-list  {
    clear:both;
    padding:0;
}
ul.entry-list-xl {
    border-bottom:1px solid #ccc;
}
ul.entry-meta {
    position: absolute;
    top: 2px;
    right: 5px;
    padding:0 !important;
    border-bottom:none !important;
}
ul.entry-meta li.tag  {
    display: none !important;
}
ul.entry-meta li.domain  {
    margin: 0px 0px 3px 0;
}
/*サムネ*/
a.thumbnail {
    float:left!important;
    margin:5px 5px 0 0 !important;
}
a.thumbnail img, Ul.entry-vertical-4 li.entry-unit div.entry-contents a.video, ul.entry-vertical-4 li.entry-unit.video div.entry-contents a.thumbnail {
    width:50px !important;
    height: auto !important;
}/*幅50px*/
a.video span.play {
    display:none !important;
}
/*レイアウト*/
div.entry-contents {
    float:left;
    width:89%;
    padding:0 !important;
    border-bottom:none !important;
}
/*xxx user*/
ul.users {
    border:none !important;
    height: auto !important;
    float: left;
    font-size:14px !important;
    margin: 5px;
    border-bottom: none;
}
ul.users li {
    font-weight:bold !important;
}
ul.users li a {
    padding-left: 0 !important;
    color:#FF0707 !important;
    background-color: #FFCBCB;
    border-bottom: 1px solid #FF0707;
}
ul.users strong span, ul.users em span {
    font-size:12px !important;
    width:10%;
    font-weight:bold !important;
}
div.shim-elem-for-height {
    height:30px !important;
}
/*もっと読む*/
li.more-entry a {
    color: #383838;
}
/* -----ここまで引用----- */

/* -----ここから独自-----
はてなブックマークのhotentryをユーザスタイルシートで見やすくする - ナレッジエース
http://n.blueblack.net/articles/2013-01-10_01_hatena_bookmark_hotentry_user_css/ */

/*広告*/

/*ヘッダ*/
div#branding h1 a {
    top: 0px !important;
}
#total {
    display: none !important;
}
#branding {
    height: 50px !important;
}
#branding form {
    top: 10px !important;
}
div.box-wrap.top {
    margin-top: 10px !important;
}
/*ナビゲーション*/
ul#navi-category {
    height: 20px !important;
}
ul#navi-category li {
    line-height: 20px !important;
}
ul#navi-category li a {
    height: 20px !important;
}
body.global-index #navi-category li.top::after, body.hotentry #navi-category li.hotentry::after, body.social #navi-category li.social::after, body.economics #navi-category li.economics::after, body.life #navi-category li.life::after, body.entertainment #navi-category li.entertainment::after, body.knowledge #navi-category li.knowledge::after, body.it #navi-category li.it::after, body.game #navi-category li.game::after, body.video #navi-category li.video::after, body.fun #navi-category li.fun::after {
    border: none !important;
}
ul#navi-category li.top, ul#navi-category li.hotentry, ul#navi-category li.social, ul#navi-category li.economics, ul#navi-category li.life, ul#navi-category li.knowledge, ul#navi-category li.it, ul#navi-category li.entertainment, ul#navi-category li.game, ul#navi-category li.fun, ul#navi-category li.video {
    height:20px !important;
}
ul#navi-page {
    height: 20px !important;
    margin-top:0 !important;
    background-color: #CCC !important;
}
ul#navi-page li {
    line-height: 20px !important;
}
ul#navi-page li.current {
    height: 20px !important;
    background-color: #999 !important;
}
ul#navi-page li a {
    height: 20px !important;
}
ul#navi-page li.current h2 a {
    line-height: 20px !important;
}
ul#navi-page li.current::after {
    border: none !important;
}
/*users*/
ul.users {
    font-size: 10px !important;
    margin-left:60px !important;
}
ul.users li a {
    padding-left: 0 !important;
    border: none !important;
    line-height: 14px;
    padding: 0 5px !important;
}
div.entry-contents {
    width: auto !important;
}
/*カテゴリ*/
ul.entry-vertical-3 ul.entry-data li.category a {
    margin-right: 5px !important;
    line-height: 14px !important;
}
/*日時*/
ul.entry-data li.date {
    line-height: 14px !important;
}
/*サムネイル*/
a.thumbnail {
    position: absolute !important;
    left: 5px !important;
}
/*タイトル*/
div.entry-contents h3 {
    font-size: 14px !important;
    position: absolute !important;
    left: 60px !important;
    top: 21px !important;
}
li.entry-unit, li.entry-list {
    height: 45px !important;
}
/*フッタ*/
div.box-wrap {
    margin-bottom: 10px !important;
}
div.pager {
    margin: 15px 0 !important;
    text-align: left !important;
}
/*リンク*/
div.entry-contents h3 a {
  color: #0088cc !important;
}
div.entry-contents h3 a:hover {
  color: #005580 !important;
}
div.entry-contents h3 a:visited {
  color: #aaa !important;
}

Stylishの設定方法

Stylishの使い方をご存じない方のために、簡単に手順を説明しておきます。

  • 下記ページからStylishをChromeに追加
    Chrome ウェブストア - Stylish
  • Chromeウィンドウ右上の設定ボタン→「ツール」→「拡張機能」を開き、Stylishの「オプション」をクリック
  • 「新しいスタイルを作成」ボタンをクリック
  • 「名前」に任意の名前(例:はてなブックマーク)を入力
  • 「コード」に前述のスタイルシートを入力
  • 「適用先」の「個別指定」ボタンをクリック
  • 「正規表現に一致するURL」を選択し、「http://b\.hatena\.ne\.jp/(hotentry.*|video.*)」を入力
  • 「保存」をクリック

以上で、ユーザスタイルシートが反映されます。

おわりに

今回のリニューアルはかなり評判が悪いようなので、すぐにまたデザインが変更され、今回のスタイルシートは使えなくなる可能性があります。

あくまで一時的な回避策になるかと思いますが、よければお使いください。スタイルシートの当方追加部分について、改変・再配布等はご自由にどうぞ。

作ったばかりで十分な表示確認はしていないので、おかしな部分も残っているかもしれませんがご了承下さい。

追記＠2013/01/12

概要分を表示する修正版を作成しました。

関連記事

« 無料で留守番電話のメール転送も可能なFUSION IP-Phone SMARTをWindowsで使ってみた
はてなブックマークのhotentryをユーザスタイルシートで見やすくする 2 »
blog comments powered by Disqus