昨日のエントリーを書くにあたって、CSSをいろいろ弄っていたら上の画像みたいなのを作る事が出来たので軽くご紹介
もしかしたらこちらの方が需要があるかも知れませんね。
三つ紹介します。好みに応じてどうぞ。
CSSの貼り付け位置
まずはCSS、その貼り付け場所はこちら。
デザイン→カスタマイズ→デザインCSSです。
CSS
エッジの利いたボタン
一つ目からいきます
/* 読者になるボタン角 */ .hatena-follow-button { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .hatena-follow-button-box .subscription-count { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
オリジナルよりより丸いタイプ
角が少し丸くなっています
/* 読者になるボタン半円 */ .hatena-follow-button { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .hatena-follow-button-box .subscription-count { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
読者数が吹き出しっぽくなったタイプ
/* 読者になるボタン楕円 */ .hatena-follow-button-box .subscription-count { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; padding:2px 10px 2px 10px; } .hatena-follow-button-box .subscription-count-box { margin: 0 0 0 7px!important; top:-2px; }
.hatena-follow-button-box .subscription-count のところで、2px 10px 2px 10pxとpadding（余白）の指定をしています。これは上左下右と時計回りの指定になっていまして、上下が2px、左右は10px余白をとっている状態を表しています。
margin: 0 0 0 7px!は吹き出しの位置の調整です。デフォルトでは 0 0 0 4px となっています。7px にすることで、デフォルトより読者数の吹き出しを3px右に離す事ができます。応用する事で、先に紹介したカスタマイズ案にも使えますよ。
top: -2px; となっているのはpaddingで2pxを指定したので、2px吹き出し位置が押し下がってしまったのでその調整です。
軽く解説
.hatena-follow-button-box .subscription-count {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
オリジナルのborder-radius はこんな感じで3pxに設定されてあります。
今回のカスタマイズで鍵になるのはこの部分。
この数値を触る事で丸みを調整する事ができますよ。
-moz-border-radius と -webkit-border-radius はベンダープレフィックスと呼ばれるものです。詳しくはこちら。 www.htmq.com qiita.com
ではでは、また次の記事で・・・
