- 追記(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(ニックネーム)、緑字が自分のブログのURL(https://は除く)です。
※ モバイル版のブログの読者になる(ブログを購読する)ページにリンクします。
次に、読者になるボタンのデザインを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>