【読者になるボタン】を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行目の読者数の数字(９)はあってもなくても大丈夫です。

修正したコードを表示したい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行目は、読者登録後のボタンのクラスに対するスタイルになります。