この前書いたブログに置く便利なウィジェット
の中ではてなのエントリーのサイドバー表示をデフォルトの
テーマのまま使ってましたが、浮いてしまうので
テーマを変更して他と合わせました。
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 = "{{site.url}}";
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の表示も削除。
これで、
が
こんな感じに。
