simadzu’blog

しめじの代わりになめこを入れたらねっとり焼きそばになった。失敗。

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

hatenaロゴ

- 追記(2021/07/13)-

「読者になる」ボタンが強制的に左上に表示されるようになりましたが、今のところCSSで非表示にしても問題ないようなので、はてなからアナウンスがあるまで消しておきます。

参考になるブログ・Webサイト
Minimal Green - はてなブログのヘッダー右上に突如出現した「読者になる」ボタンと崩れたスマホ版ヘッダー画像の修正方法

はじめに

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

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

読者になるボタン

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

<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にコードを入力)

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;
    content: "\f001\00a0";
}

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

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

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

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

(デザイン→サイドバー→モジュールを追加→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; 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>