IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【読者になるボタン】をCSSだけで「立体感」のある押しボタンにカスタマイズする | はてなブログカスタマイズ

 

 

読者になるボタン

カスタマイズ不可能な読者になるボタン

はてなブログの 設定詳細 にある「読者になるボタン」はiframe要素なのでカスタマイズができません。

 

f:id:Surprisedblog:20190821180054p:plain
f:id:Surprisedblog:20190821180414p:plain

ページ下部

<iframe src="https://blog.hatena.ne.jp/Surprisedblog/it-the-best.hatenablog.jp/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

HTML要素

 

カスタマイズ可能な読者になるボタン

なので当サイトでは、サイドバーにある「プロフィールモジュール」「読者になるボタン」を使ってカスタマイズをしました。

サイドバーに表示される「読者になるボタン」はiframe要素でないためスタイルのカスタマイズができます。

f:id:Surprisedblog:20190821182606p:plain
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button unsubscribing">
<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" style="display: block;">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count">9</span>
</div>
</div>

「プロフィールモジュール」内の「読者になるボタン」のHTML要素

 

 

カスタマイズ可能な読者になるボタンのコピー

現在、「読者になるボタン」は記事下に表示しています。サイドバーに表示された「読者になるボタン」付きの「プロフィールモジュール」から、「読者になるボタン」のHTML要素をコピーして記事下に張り付けて表示しています。

「HTML要素コード」のコピーは、ブラウザの開発者ツールを使って取得します。

誰でも簡単にブログカスタマイズが「楽になる方法 」| 開発ツール - IT the Best

 

「読者になるボタン」だけ表示している「プロフィールモジュール」の場合、HTMLコードはこのようになっていると思います。

<div class="hatena-module hatena-module-profile">
<div class="hatena-module-title">
プロフィール
</div>
<div class="hatena-module-body">
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button unsubscribing">
<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" style="display: block;">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count">9</span>
</div>
</div>
</div>
</div>

 

コピーの仕方(GoolgeChromeブラウザの場合) 

 

 

カスタマイズ可能な読者になるボタンの実装

上記のコードには「読者になるボタン」を実装するのに不必要なコードがあるので必要に応じて消します。

コピーしたコードをメモ帳などに張り付けて以下の部分を消します。

  • 1行目の「hatena-module-profile」 クラス
  • 2行目から4行目のコード
<div class="hatena-module hatena-module-profile">
<div class="hatena-module-title">
プロフィール
</div>
・・・
</div>

 

読者数は、ページが表示されるときにその時の読者数が表示されるので、20行目の読者数の数字(9)はあってもなくても大丈夫です。

 

修正したコードを表示したいHTML記述欄に張り付ければ「読者になるボタン」の実装ができます。

 

 

読者になるボタンのカスタマイズ

このボタンには下記のスタイルが適用されています。

.hatena-module{
    padding-left: 0px;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.unsubscribing{
    background-color: unset;
    border-radius: 2em;
    box-shadow: 1px 3px 0px 1px #948383;
    font-size: 120%;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.unsubscribing:hover{
    box-shadow: 0 0 0px 0 #000;
    margin: 3px 0px 0 1px;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.subscribing{
    border-radius: 2em;
    box-shadow: 1px 3px 0px 1px #948383;
    font-size: 120%;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.subscribing:hover{
    box-shadow: 0 0 0px 0 #000;
    margin: 3px 0px 0 1px;
    width: 105px;
}

14行目から23行目は、読者登録後のボタンのクラスに対するスタイルになります。