はてなブログの読者になるボタンをカスタマイズして設置

hatenaロゴ

最近になって、このブログにもこっそり「読者になる」ボタンを設置しましたが、ボタンがなくても、読者になってくれた人がいましたので、ボタンはただの飾りみたいなものです。

通常は、ブログ管理画面の詳細設定ページで、「読者になる」ボタンのHTMLコードをコピーして、サイドバーなどに貼り付けて設置することになります。

読者になるボタン

ただ、インラインフレーム(iframe)なので、スムーズに表示されないのが気になる...。
そこで、そのやり方とは違う方法で、読者になるボタンを別に表示させてみます。

モバイル版の読者になるページにリンク

まず、サイドバーにHTMLのモジュールを追加して、次のコードを入力します。

(デザイン→サイドバー→モジュールを追加→HTMLにコードを入力)

HTML
<div class="subscribe-button">
    <a href="https://blog.hatena.ne.jp/simadzu/simadzu.hatenablog.com/subscribe">読者になる</a>
</div>

赤字が自分のID(ニックネーム)、緑字が自分のブログのURLhttps://は除く)です。
※ モバイル版のブログの読者になる(ブログを購読する)ページにリンクします。

次に、読者になるボタンのデザインをCSSでカスタマイズしていきます。

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
/* ボタン通常時 */
.subscribe-button a {
    font-size: 13px;
    padding: 2px 4px;
    transition: 0.3s;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    border-radius: 6px;
    background: #fff;
}

/* ボタンを選択したとき */
.subscribe-button a:hover {
    text-decoration: none;
    color: #fff;
    border-color: #000;
    background: #000;
}

/* ボタンの横に+アイコン */
.subscribe-button a:before {
    font-family: blogicon;
    font-weight: normal;
    content: "\f001\00a0";
}

ボタンのデザインははてなブログのサイドバーのカテゴリーをボタン風に表示を流用。

参考になるブログ・Webサイト
No Name - はてなブログの読者登録ボタンの設置やカスタマイズ

<button>タグで読者ボタンを作成

もっと簡単に「<input type="button">」タグで読者になるボタンを作りました。

(デザイン→サイドバー→モジュールを追加→HTMLにコードを入力)

HTML
<input type="button" value="読者になる" onClick="location.href='https://blog.hatena.ne.jp/simadzu/simadzu.hatenablog.com/subscribe'">

参考になるブログ・Webサイト
ikemonn's blog - 【HTML】input type="button" でリンク用ボタンを作る

プロフィールの読者ボタンを流用

サイドバーのプロフィールモジュールの読者になるボタンを貼り付けました。

(デザイン→サイドバー→モジュールを追加→HTMLにコードを入力)

HTML
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
    <a href="#" class="hatena-follow-button js-hatena-follow-button" style="font-size: 12px; font-weight: normal; padding-top: 1px; color: #000; background-color: #fff;">
        <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>