tpex_ovon's blog

Web屋の人。はてブのユーザースタイルシートの記事しか書いてない。

はてなブックマーク用のユーザースタイルシートhatena-user-cssについて

※2017/08/30更新

◆Git Source:https://github.com/ovoncovon/hatena-user-css/
https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css.css
Firefoxhttps://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css_ffx.css


TOPページ
f:id:tpex_ovon:20170830224620j:plain


ENTRYページ
f:id:tpex_ovon:20170830223445j:plain

履歴

  • 2017/08/30 エントリーページの微調整
  • 2017/08/23 エントリーページのリニューアル対応
  • 2015/10/21 「昨日のコメント数ランキング」修正と軽微な修正
  • 2015/10/21 「特集」のリストデザイン調整
  • 2015/10/21 メニューの「特集」のドロップダウンを削除
  • 2015/05/11 あとで読むアイコンの場所を変更、トップページにあるランキングのレイアウト調整
  • 2014/12/05 エントリーページのデザイン変更に対応
  • 2014/05/10 トップページ調整
  • 2014/03/14 エントリーページで「すべてのブックマーク」時コメントがないのを表示に戻す。アマゾンリンクの背景を黄色に
  • 2013/10/11 エントリーページで「すべてのブックマーク」時コメントがないのを非表示
  • 2013/10/02 不具合修正
  • 2013/09/18 トップページのリストの修正
  • 2013/07/10 トップページのリストの高さ修正
  • 2013/06/07 ヘッドラインページのデザイン不具合修正
  • 2013/06/01 エントリーページの仕様が変わったので修正
  • 2013/05/15 サムネイルの仕様が変わったので修正
  • 2013/04/11 トップページとエントリーページのCSSを統合
  • 2013/04/03 画面幅可変に対応。メディアクエリー削除。
  • 2013/03/26 フォントサイズを13pxを基準に相対指定、フォントスタイルをsans-serifに
  • 2013/03/24 コンテンツ幅を画面幅に合わせるためにメディアクエリーを入れてみる
  • 2013/03/22 新ユーザーページのサイドバーを画面下に表示
  • 2013/03/21 新ユーザーページリニューアルに対応
  • 2013/03/03 新ユーザーページでの自分コメント編集の不具合対応、ソース整形
  • 2013/03/01 新エントリーページ修正。タグとコメントを1行で表示するようにした。ニュースページ対応
  • 2013/02/19 エントリページタグ復活、セクションでファイル分け、フォントサイズ調整

不具合とか

f:id:tpex_ovon:20170114174029j:plain

  • 元のはてブのデザインでタイルレイアウト以外だとおかしくなる
    • →タイルデザインやリストデザインが実装される前に作ったのでおかしくなります。すいません
  • ヘッドラインページの右カラムがおかしい
    • →このユーザースタイルシートがあれば必要のないページなのであまり直す気がありません
  • エントリーページで、自分のコメントを入れた後の修正がしにくい
    • →自分のブックマーク一覧で直してください

使い方

Google Chrome Stylishを使用する場合

※広告ブロックの拡張機能をONにして調整しています。


  1. 設定→機能拡張→Stylishのオプションを開く
  2. 新しいスタイルの作成→b_hatena_ne_jp_user_css.cssをコピー&ペースト→適用先を「次で始まるURL」→http://b.hatena.ne.jp/
  3. 他のセクションを追加ボタンを押し、 b_hatena_ne_jp_user_css_headline.cssをコピー&ペースト適用先のURLをhttp://b.hatena.ne.jp/headlineに指定する

f:id:tpex_ovon:20130607131146j:plain
(ヘッドライン用のスタイルの更新は放置しています。)

Mozila Firefox Stylishを使用する場合

https://addons.mozilla.org/ja/firefox/addon/stylish/

  1. 「ツール」→「アドオン」→「新しいスタイル」をクリック、適当な名前をつけてb_hatena_ne_jp_user_css_ffx.cssの内容をコピー&ペーストして保存する

Firefox版のテストはしていません)

Opera Browserを使用する場合
  1. Google Chromeと同じくstylishを使います。