Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

Blog

Mobile

Gadget

Travel

⛄️🎄  Articles  🎄⛄️

はてなブログ|読者人数を消して非表示にする方法と「読者になる」ボタンの設定

読者になるボタンの設置

この記事はこんな方に読んでほしい

・はてなブログユーザー(初心者)の方
・はてなブログのカスタマイズに興味がある方
・はてなブログの読者数表示をコントロールしたい方

はてなブログを利用されている方は、プロフィール欄や記事本文の最後に「読者になる」ボタンを設置している方が多いと思います。

でも、この読者数のカウンターの表示を消している方も見かけます。
どのようにすればできるのか、気になりませんか?

この記事では読者になるボタンの読者数表示のオン・オフの方法をご紹介します。

項目 表示変更前 表示変更後
読者になるボタン

読者数を表示

読者数を非表示

スポンサーリンク

「読者になる」ボタンの読者数のカウントを隠して非表示にする方法

プロフィール欄の標準の読者になるボタンは、「読者になる」と「読者登録人数」が表示されます。

読者数を表示

読者数の表示があると、どうしてもその増減を意識してしまいますので、読者数表示を非表示にしている方もいます。

読者数の表示を簡単に消す方法を、確認していきましょう。

 

プロフィール欄の設定を変更して読者数を非表示にする

はてなブログの管理画面を表示し、
ブログの管理画面から、 ダッシュボード>  デザイン>  カスタマイズ>サイドバー>プロフィール に進んでください。

そして「モジュールを編集」画面の「読者になるボタン」を表示するのチェックを外し、「変更を保存」してください。

これで人数が表示されなくなります。
ただ、この方法だとプロフィール欄から「読者数」の表示も「読者になるボタン」も両方が消えてしまいます。

ボタン自体を表示しない場合はこれでOKなのですが、読者登録人数(読者数カウンター)だけを隠したい、という場合、この方法は使えません。

つまり、こうしたいのです。

読者数を非表示

 

プロフィール欄の読者数のカウント数を隠す方法

それでは、いったんプロフィール欄の表示を元に戻します。
ブログの管理画面から、 ダッシュボード>  デザイン>  カスタマイズ>サイドバー>プロフィール に進んでください。

モジュールを編集画面の「読者になるボタン」を表示する、のチェックを入れ、「変更を保存」します。
ここまでの設定の状態だと、読者人数も表示されたままです。

 

そこで、新しくCSSのコードを追加することで、解決します。

注意

CSSを変更、追記する場合は、うまくいかなかった場合に元に戻せるよう、必ずバックアップを作成してから操作してください。

simplelifenavigation.com

 

次のコードをCSSに追加してください。
管理画面から、 ダッシュボード>  デザイン>  カスタマイズ>デザインCSSに進み、「デザインCSS」の記述の一番最後に次のコードを追加してみましょう。(コピペでOKです)

/* プロフィールの読者数表示を消す */
.subscription-count-box {
display:none!important ;
}

「変更を保存」して、CSSの内容を反映させましょう。
すると、プロフィール欄に「読者になるボタン」だけを表示させて、読者登録人数は消すことができましたね。

CSSコードの display:none はかなり使い勝手が良く、私は結構重宝しています。今回は読者数を隠す使い方ですが、別の便利な利用方法を別途ご紹介したいと思っています。

 

では記事の本文中などではどうでしょうか。

スポンサーリンク

記事の中などに「読者になる」ボタンを設置する方法

記事の中に読者になるボタンを追加するには、次の方法があります。

なお、この方法は、記事の中以外に、ヘッダや記事の上、記事の下、サイドバー、フッタの「HTML編集画面」に入力することで、どの場所にも挿入することができます。

 

「読者になる」ボタンと「読者数」を併用表示する方法

記事中にボタンを表示させる方法は、管理画面から、 設定>詳細設定>読者になるボタン に表示されているHTMLコードをコピペして、表示させたい部分の「HTML編集画面」にコピーしたコードを貼り付けることで表示が可能です。


この方法の場合は、下のイメージ図のように読者数も表示されます。

読者人数表示

 

記事中に「読者になる」ボタンだけを表示する方法

読者になるボタンだけ表示させる方法も知っておきたいですよね。
次のコードを設置したい場所のHTML編集画面に記述してください。(コピペでOKです)

<div class="hatena-module hatena-module-profile">
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box reader-button-inner">
<a href="#" class="hatena-follow-button js-hatena-follow-button">
<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>
</div>

すると、次の表示になります。

読者になる

これで、意図する表示にすることができました。

「読者になる」ボタンの表示形式を、大きくしたり、色をつけたり、変えてしまうこともできますが、ここまで長くなったので、また別の機会にご紹介したいと思います。

 

CSSとHTMLを少し知りたい場合、次の本が参考になります。