読者です 読者をやめる 読者になる 読者になる

中央線に乗って考える

好きなモノとか、欲しいモノとか、日々のこととか

モノクロのソーシャルボタンを置きたい!!

モノトーンなデザインにしているので、ソーシャルボタンもモノトーンにしたい。まず、はてなブックマークをWEBフォントで読み込んでみる。

f:id:savoia1976:20141125195150p:plain

はてなブックマーク

HTMLは、はてなブックマークボタン設置の記述をちょっと変更。aタグで括っていた部分を削除しています。

<div class="s-icon01">
<a href="http://b.hatena.ne.jp/entry/http://savoia.hatenablog.com"
class="hatena-bookmark-button hatebu-icon"
data-hatena-bookmark-title="中央線に乗って考える"
data-hatena-bookmark-layout="simple"
title="このブログをはてなブックマークに追加">
</a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
</script>
</div>

もともと用意されているはてなのWEBフォントは、ちょっと横長なので長体にして表示しています。

a.hatebu-icon:before {
font-family: 'blogicon';
content: '\f027';
font-size: 40px;
}
a.hatebu-icon {
color: #999;
}
a.hatebu-icon:hover {
color: #333;
text-decoration: none;
}
.s-icon01 {
-moz-transform: scale(1,1.1);
-webkit-transform: scale(1,1.1);
-o-transform: scale(1,1.1);
-ms-transform: scale(1,1.1);
transform: scale(1,1.1);
}

2行目のfontファミリー blogiconが、はてなブログで最初から読み込まれているWEBフォント。