rcmdnk's blog

20130927_hatebu_after_200_200

この前書いたブログに置く便利なウィジェット の中ではてなのエントリーのサイドバー表示をデフォルトの テーマのまま使ってましたが、浮いてしまうので テーマを変更して他と合わせました。

Sponsored Links

html部

source/custom/asides/hatebu.htmlを次の様にします。

source/custom/asides/hatebu.html
1
2
3
4
5
6
7
8
9
10
11
12
<section>
  <h1>Popular Posts</h1>
  <script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
  <script language="javascript" type="text/javascript">
  Hatena.BookmarkWidget.url   = "https://rcmdnk.com";
  Hatena.BookmarkWidget.sort  = "count";
  Hatena.BookmarkWidget.width = 0;
  Hatena.BookmarkWidget.num   = 5;
  Hatena.BookmarkWidget.theme = "notheme";
  Hatena.BookmarkWidget.load();
  </script>
</section>

Hatena.BookmarkWidget.titleは無くしてサイドバーにある他のものと同様に タイトルを<h1>で表示します。 このままだとタイトルが無くなってもBというはてブマークだけ 残ってしまうのですがそれは下に書くようにcssの設定で消せます。

widthを0にすると勝手に調整してくれるようなので0に。

そして、色々自分でいじるためにthemeをanothemeにしました。

CSS(SCSS)部

ブックマークウィジェットはこんな感じの構造になっています。 (FirefoxならツールWeb開発インスペクタ でスクリプトに実際に呼び出されてるhtmlをチェックできます。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="hatena-bookmark-widget0" class="hatena-bookmark hatena-bookmark-widget-notheme">
  <div class="hatena-bookmark-widget-title">
    <a href="http://b.hatena.ne.jp/entrylist?url=http://rcmdnk.github.io&sort=count">
      <img src="http://b.hatena.ne.jp/images/widget/favicon.gif"></img>
    </a>
  </div>
  <div class="hatena-bookmark-widget-body">
    <ul>
      <li>
        <a class="hatena-bookmark-entrytitle" href="http://rcmdnk.github.io/blog/2013/06/20/computer-mac-keyremap4macbook-vim/">
           Vimを使う上でのIME(日本語入力)の取り扱い - rcmdnk's blog
        </a>
        <span class="hatena-bookmark-count">
          <strong>
            <a href="http://b.hatena.ne.jp/entry/http://rcmdnk.github.io/blog/2013/06/20/computer-mac-keyremap4macbook-vim/">
            18users
            </a>
          </strong>
        </span>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li>
        <a class="hatena-bookmark-entrytitle" href="http://rcmdnk.github.io/blog/2013/03/07/setup-octopress/"></a>
        <span class="hatena-bookmark-count">
          <em>
            <a href="http://b.hatena.ne.jp/entry/http://rcmdnk.github.io/blog/2013/03/07/setup-octopress/">
              9users
            </a>
          </em>
        </span>
      </li>
    </ul>
  </div>
  <div class="hatena-bookmark-widget-footer">
    <a href="http://b.hatena.ne.jp">
      <span>
        Hatena::Bookmark
        </span>
      </a>
  </div>
</div>

特徴的なのはユーザー数表示で、5人以上だと<em>、11人以上だと<strong> が加わる点です。 はてなのwidgetのcssを参考に sass/plugins/_hatebu.scssに:

sass/plugins/_hatebu.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.hatena-bookmark-widget-notheme {
  .hatena-bookmark-widget-title img {display:none;}
  .hatena-bookmark-widget-footer {display:none;}

  ul {
    list-style-type: none;
    border-bottom: none;
    li {
      padding:0 5px;
      margin: 0 !important;
      text-align: right;
      height: 4.5em;
      position: relative;
    }
    * {
      vertical-align: bottom;
    }
    a.hatena-bookmark-entrytitle {
      display:block;
      text-align: left;
      padding: 5px 0;
      height: 2em;
    }
  }
  .hatena-bookmark-count {
    position: absolute;
    bottom: 3px;
    right: 5px;
    a {
      text-decoration: underline;
    }
    em a {
      background-color: #fff0f0;
      font-weight: bold;
      display: inline;
      font-style: normal;
      color: #ff6666;
    }
    strong a {
      background-color: #ffcccc;
      font-weight: bold;
      font-style: normal;
      display: inline;
      color: red;
    }
  }
}

これをsass/_plugins.scss

@import "plugins/hatebu";

とインポート。

カウント数の強調表示に加えて、

.hatena-bookmark-widget-title img {display:none;}

でタイトル部のBの表示を削除。

さらに

.hatena-bookmark-widget-footer {display:none;} 

で下に出るHatena::Bookmarkの表示も削除。

これで、

こんな感じに。

Sponsored Links
Sponsored Links

« BitDeli: GitHubレポジトリのアクセス解析 octopress-gemoji: タグを使ってOctopressで絵文字を書く »