はてなブックマークの表示を変えたい（１）

はてなブックマークをPCのブラウザで見ると、1行に4つの記事が表示されていて、見るときに視線を左右に移動させないといけないのがちょっとつらい。

はてなブックマーク

1行1記事で基本上から下にだけ視線を移動させれば良いようにしたい。

ということでCSSを無理やり当てて表示を変更してみました。

改変はてなブックマークのSS

ちょっとまだガタガタしている部分もありますが、気が向いたら直します。

やり方

StylusっていうChrome Extentionを使用しました。(Firefoxにもあります)

特定のサイトのCSSを上書きできるブラウザ拡張は他にもあるのでお好みのものをどうぞ。

CSS

.entrylist-wrapper {
    width: 100%;    
}

.entrylist-contents-title {
    min-height: 0px;
    width: 400px;
}

.entrylist-contents-title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: small;
}

.entrylist-item {
   width: 100%;    
}

.entrylist-header-main, .entrylist-item>li {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
}

.entrylist-contents-body {
    width: 50%;    
}

.entrylist-item .entrylist-image-entry .entrylist-contents-description, .entrylist-contents-description {
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-bottom: 0;
}

.entrylist-contents-thumb{
    display:none;
}

.entrylist-contents-main {
    padding: 4px;
    flex-direction: row;   
}

.entrylist-contents-users {
    text-transform: none;
}

.entrylist-contents-users span {
    font-size: 10.5px;
}

.entrylist-contents-domain {
    padding: 0;   
}

.entrylist-contents-meta {
    padding: 0;
}

.entrylist-contents-tags {
    max-width: 200px;
    padding: 0;
}

余談

昔々は本家はてなブックマークも1行に1記事でした。

で。それが今の表示に変わってから元の行表示がほしいユーザーがいて、その人たちに嫁のはてぶっていうサイトが人気だったんですが、そこも閉鎖してしまってました。