短期集中連載：はてなブックマークのユーザースタイルシートで遊んでみるVol.01「はてなブッ旧マーク」テーマ

Webサービス

ishida

2013.01.15

イメージ

関東は昨日、稀に見る大雪。雪だるまを娘と作りましたishidaです。
みなさん、無事に出社できましたでしょうか？

さてさて年明け早々は、新はてなブックマークの話題で持ちきりな感じですね。

こちらに便乗して僕も新はてなブックマークを書き換えるユーザースタイルシートを作ってみました。

個人的にリニューアル前のデザインが好きだったので、ほぼ以前のスタイルに戻すような感じにしてます。

全体像はこんなんです。題して、

「はてなブ旧マーク」

ネーミングセンスなくてごめんなさい。

大きくは、以下のような点を変更してます。

ヘッダー部分のレイアウトを旧デザインに極力変更
ブックマーク数はデフォルトの赤いヤツに変更
テキストリンクもデフォルトのブルーに変更
サムネイルは動画カテゴリ以外は非表示
直近コメントを非表示
デフォルトの右カラムは非表示にして、動画カテゴリを掲載
新着ニュース、はてなブログの人気エントリーの段組みを廃止

ユーザースタイルシート

以下から、コピペして、 Chrome・FirefoxアドオンのStylishに貼付けて使ってください。

※ちなみに、はてなブックマークTOPページのみ対応なので、
URLも「http://b.hatena.ne.jp/」個別指定にしてください。

/*
はてなブッ旧マークスタイルシート
version: 0.8
 author: @okeke - http://c-brains.jp/blog/wsg/
   date: 2012.01.15
*/
/*============================
body
============================*/
body {
    background: #F8F8F8 !important;
}

/*============================
#global-header
============================*/
#global-header {
    background-color: #2761B5 !important;
}

/*============================
container
============================*/
/* branding
----------------------------*/
#branding {
    height: auto !important;
    margin: 0 auto 20px !important;
}

#branding h1 img {
    display: none;
}

#branding h1 a {
    position: static !important;
    display: inline;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
     color: #3367AC;
    z-index: 1000;
    text-decoration: none;
    text-align: center;
}

#branding h1 a:after {
    content: "はてなブッ旧マーク";
    font-size: 18px;
    font-weight: bold;
}

/* searchbox
----------------------------*/
#searchbox {
    position: static !important;
    width: 300px;
    margin: 0 auto 10px;
}
.search-button {
    background-color: #2761B5 !important;
}

/* total
----------------------------*/
#branding #total {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    text-align: center;
}

/* navi-category
----------------------------*/
#navi-category {
    width: auto !important;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding-left: 100px !important;
}

#navi-category li {
    border-right: 1px solid #CCCCCC;
    border-left: 1px solid #FFFFFF;
}

#navi-category li:first-child {
    border: none;
}

body.global-index #navi-category li.top:after {
    border: none !important;
}

body.global-index #navi-category li.top,
body.global-index #navi-category li.top a {
  background-color: #819A2E;
  color: #FFFFFF;
}


/*============================
main
============================*/
div#main {
    position: relative;
}

div.box-wrap.box2.mix:before {
    display: block;
    content: "人気エントリー";
    margin: 10px 10px 20px;
    padding: 5px 10px;
    background: #2761B5 !important;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

div.box-wrap {
    width: 698px !important;
    border: 1px solid #CCCCCC;
    background-image: none !important;
    background: #FFFFFF !important;
    border-radius: 5px;
}
div.box-wrap.top-no-ad {
    margin-top: 20px !important;
}

div.box-wrap {
    margin: 0 0 30px 0;
}

/* デフォルト右カラムはうざいので消す  */
#main>.box-wrap>.box3_1 {
   display: none;
}

div.box3_2 {
  width: auto !important;
}
div.box4_1 {
  width: auto !important;
}

/* entry
----------------------------*/
li.entry-unit{
    position: relative;
    margin: 0 10px 30px !important;
    padding: 0 !important;
    border: none !important;
}

/* entry category setting */
li.entry-unit ul.users,
li.entry-unit ul.users a {
    border: none !important;
    color: red !important;
}
li.entry-unit ul.users a {
    text-decoration: underline !important;
}

li.entry-unit ul.users {
    padding: 25px 0 0 20px !important;
    height: auto !important;
}

li.entry-unit ul.users li a {
    display: inline !important;
    padding-left: 0 !important;
    font-size: 12px !important;
}

ul.entry-list-l,
ul.entry-list-xl {
    margin: 0 !important;
}

li.entry-unit ul.users strong,
li.entry-unit ul.users em,
li.entry-unit ul.users strong a span,
li.entry-unit ul.users em a span {
    font-size: 14px !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}


li.entry-unit div.entry-contents {
    padding: 0 !important;
    border: none !important;
}

li.entry-unit div.entry-contents h3 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 640px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    margin: 0 10px 10px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

li.entry-unit div.entry-contents h3 a {
    color: #2761B5 !important;
    text-decoration: underline !important;
}
li.entry-unit div.entry-contents h3 a:link,
li.entry-unit div.entry-contents h3 a:hover {
    color: #2761B5 !important;
}
li.entry-unit div.entry-contents h3 a:visited {
    color: #838 !important;
}

li.entry-unit div.entry-contents a.thumbnail {
    display: none !important;
}

li.entry-unit div.entry-contents ul.entry-data {
    margin: -20px 0 10px 120px !important;
}

li.entry-unit div.entry-contents blockquote {
    margin: 0 0 5px 20px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

li.entry-unit ul.entry-meta {
    margin: 0 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
}

li.entry-unit ul.entry-comment,
li.entry-unit div.follow,
li.entry-unit .follow.hb-favorites-appended {
    display: none;
}


/* 新着ニュース
/* はてなブログ人気エントリー
----------------------------*/
.box-wrap.box4 {
    border: 1px solid #CCCCCC;
    background-image: none !important;
    background: #FFFFFF !important;
    border-radius: 5px;
}

.box-wrap.box4 h2 {
    display: block !important;
    margin: 10px 10px 20px;
    padding: 5px 10px;
    background: #819A2E !important;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

.box-wrap.box4 ul.entry-vertical-4 {
    background: none !important;
}

ul.entry-vertical-4 li.entry-unit,
ul.entry-vertical-4 li.ad-unit {
    width: auto !important;
    margin: 0 10px 30px !important;
}

ul.entry-vertical-4 ul.entry-meta li.domain {
    margin-right: 10px;
}
ul.entry-vertical-4 ul.entry-meta li.tag {
    margin: -2px 0 0 8px;
    clear: none;
}

ul.entry-vertical-4 li.entry-unit,
ul.entry-vertical-4 li.ad-unit {
    display: block !important;
}


/* 動画
----------------------------*/
.box-wrap.box3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px !important;
}

.box-wrap.box3 h2 {
    display: block !important;
    margin: 10px 10px 20px;
    padding: 5px 10px;
    background: #819A2E !important;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

.box-wrap.box3 ul.entry-vertical-4 {
    background: none !important;
}

.box-wrap.box3 li.entry-unit div.entry-contents h3 {
    width: auto !important;
    white-space: normal !important;
    margin: 0 0 10px!important;
    overflow: auto !important;
    font-size: 12px !important;
}

.box-wrap.box3 li.entry-unit div.entry-contents a.thumbnail {
    display: block !important;
    float: none !important;
    margin: auto !important;
    text-align: center !important;
}

.box-wrap.box3 li.entry-unit div.entry-contents ul.entry-data  {
    margin: 0 !important;
}
.box-wrap.box3 li.entry-unit div.entry-contents ul.entry-data .category {
    display: none;
}

.box-wrap.box3 li.entry-unit ul.users {
    margin: 0 0 5px !important;
    padding: 30px 0 0 0px !important;
    height: auto !important;
}

.box-wrap.box3 li.entry-unit  ul.entry-meta {
    margin: 0 0 5px !important;
}
.box-wrap.box3 li.entry-unit  ul.entry-meta li.tag {
    display: none;
}

こちら短期集中連載企画としてバシャログ。メンバーが今後、いろいろなユーザースタイルシートを公開しますので、乞うご期待！

もし気に入ってもらえたら、シェアしていただけると嬉しいです。