はてブのブックマーク数とタグを非表示化

2020-10-06

はじめに

SNSって短時間にいかに人間の感情を逆なでして盛り上がってる風を演出するかがキモで、肝心の内容がそういった反応に集中できていないなと思うときがあります。はてなブログだと「ブックマーク数」と「タグ」がコンテンツへの集中を妨げる要素になります。そういった要素を画面から消去しリストに上がっているコンテンツの内容を自分以外の誰の行動にも影響されずに受け取ってもいいのではないかと考えて今回の記事を書きました。

以下紹介する内容は Chorome の拡張機能のStylusを使用して実現しています。

非表示化前後の比較

Webページに自分が定義したCSSを追加で指定できるStylusを使用して非表示にします。

対応前の表示

以下が対応後の状態

対応後、余計な表示が非表示に

余計な表示が減ってコンテンツに集中できます。

やりかた

環境はChoromeとStylusです。

• 必要な環境
  • Chorome
  • Stylus (Chormeの拡張機能)

使用したCSS

上記の表示にするためにStylusのに以下CSSを設定します。

.entrylist-contents-users a {
    display: none;
}

.entrylist-contents-tags {
    visibility: hidden;
    height: 0px;
}

.readlater-button {
    display: none !important;
}
.js-bookmark-stock-button-ready {
    display: none !important;
}
.entrylist-contents-main {
    padding: initial;
}
.entrylist-3column-users {
    display: none;
}
.js-keyboard-selectable-item {
    padding: initial !important;
}

#container > div.navi-wrapper.js-navi-category-wrapper.is-unscrolled {
    display: none !important;
}

#container > div.navi-wrapper.js-navi-category-wrapper.is-scrolled{
    display: none !important;
}

#container > div.branding.js-branding {
    display: none !important;
}

#container > div.navi-page {
    display: none !important;
}

.footer {
    display: none !important;
}

#global-header{
    display: none !important;
}

#container > div.wrapper > div > div.entrylist-main > div.entrylist-ad-pc-banner {
    display: none !important;
}

#container > div.wrapper > div > div.entrylist-aside > section > ul > li:nth-child(3){
    display: none !important;
}

#container > div.entrylist-ad-pc-banner{
    display: none !important;
}

かなり色々非表示にしているのでやっぱり表示してほし項目はコメントアウトしてください。

以上です。