はてなブログ。サイドバーの「読者になる」ボタンを枠で囲む

サイドバーの「読者になる」ボタン。目立たないので、枠で囲って少し目立つようにしました。以前、記事下に追加した「読者になるボタン」と同じような感じです。

現状(変更前)の様子。

枠で囲んだ様子。

CSSをいじって設定するわけですが、該当部分のHTMLがどうなっているのかを確認してみます。

<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
  <a href="#" class="hatena-follow-button js-hatena-follow-button">
    <span class="subscribing">
      <span class="foreground">読者です</span>
      <span class="background">読者をやめる</span>
    </span>
    <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
      <span class="foreground">読者になる</span>
      <span class="background">読者になる</span>
    </span>
  </a>
  <div class="subscription-count-box js-subscription-count-box">
    <i></i>
    <u></u>
    <span class="subscription-count js-subscription-count">
    </span>
  </div>
</div>

この部分が使えそうです。<div class="hatena-follow-button-box

このHTML部分にCSSで枠線の設定を追加します。

div.hatena-follow-button-box {
	border-style: solid;
	padding: 10px;	
	border-width: medium;
	border-color: #339933;
}

以上です。