あおみなの雑記

京大生あおみなが様々な情報をわかりやすくまとめるブログ

【はてなブログ】はてなスターAddボタンをトップページ・アーカイブページで非表示にするカスタマイズ【デザインCSS】

はてなブログ」トップページ(記事一覧)の「はてなスター」の数やユーザーの表示はそのままに、「スターAddボタン」のみ非表示にするカスタマイズ方法を紹介します。個別に記事を開くと、従来どおりスターを追加できます。

はてなスターは素敵な機能

はてなブログ」を利用者であれば、「はてなスター」をご存知ですよね。

~ ☆(はてなスター)とは? ~
「この記事面白い!」「がんばってね!」「読んでるよ!」
あなたの気持ちを手軽に伝えられるのがはてなスター。
ちょっといいな、と思ったらスターをつけてみてくださいね。


はてなの公式サービス「hatenastar」から送られてくる「今日の☆レポート」というメールでは、「はてなスター」をこのように説明しています。

twitterのいいね (旧ふぁぼ)やYouTubeの高評価と同じような、気軽に押すだけで「見ていますよ!」と表現できる良い機能です。

私もスターを積極的に利用していて、最後まで読んで「面白かった」「勉強になった」と思った記事には☆をつけますし、自分の記事に☆をつけてもらったら嬉しいです。

「はてなスター」は、はてなブロガー同士の交流をより活発にしてくれる、非常に素晴らしい機能だと思うのです。

記事の中身を読まなくてもスターを押せる

私はトップページの表示形式を「一覧形式」にしています。ちなみに、「全文形式」か「一覧形式」かは『設定』タブから変更できます。


(クリック・タップで拡大します)

「一覧形式」ですと、こんな感じで記事が並んで表示されます。


(クリック・タップで拡大します)
(スター押してくださった方のプロフィール画像は念のため加工しています。)

ご覧のとおり、トップページにも各記事に「スターAddボタン」 (画像の赤〇) が表示されています。

また、「全文形式」でも「続きを読む」機能を利用している場合、同様にトップページに☆を押せるボタンが並んでいると思います。

つまり、記事の中身まで読まなくてもスターを押せるのです。

形だけのスターに意味はない

私は記事の内容をすべて読んでからスターを押していますし、読者さんの多くもそうしてくれていると信じています。

読者になっていない人からスターをもらったら、感謝しながら「どんなブログを書いている人だろう」と訪問することもあります。

ですが、同じ人からたった1分間で3つ4つの記事に☆をつけてもらったことが何度かありました。

ブラウザがページを読み込む時間や、実際に文章を読む時間を考えると、これは記事の中身を一切読まず、トップページからポチポチ押しただけの可能性もあります。

(すべて読んでくれた上で一度トップページに戻ってからまとめてスターを押した、という可能性も考えられますが…)

もちろん、スターを利用している人が全員きちんと文章を読んでいるかは判断できませんが、少なくともトップページからスターを追加できる必要はまったく無いので、カスタマイズしようと思ってこの記事を書くことにしました。

トップページから「Addボタン」を消す方法

前置きが長くなりましたが、トップページにある「はてなスターAddボタン」を非表示にする方法をご紹介します。

個人的には、「誰がスターをくれたのか」「どの記事に何個スターがついたのか」はトップページからでも確認できるようにしたいので、今回は「スター追加ボタン」だけを非表示にする方法です。

ちなみに、非表示にするのはトップページだけです。個別に記事を開けば、今までどおり記事の末尾には追加ボタンを含む「はてなスター」関連の機能が表示されています。

やりかたは簡単で、『デザイン』 ⇒ 『カスタマイズ』(スパナマーク) ⇒ 『{}デザインCSS 』に、これをコピペするだけでOKです。

.page-index .hatena-star-add-button {
display: none;
}



(クリック・タップで拡大します)

これで、トップページの「はてなスターAddボタン」だけを非表示にすることができます!

(カスタマイズをする際には、念のためバックアップを取った上で、自己責任でお願いします。)

さらに、アーカイブページでも非表示にする方法

上記の方法は、トップページ(page-index)のみに適応される設定です。

個別の記事のページではもちろん、カテゴリー別や月別のアーカイブのページでもスター追加ボタンは表示されたままです。


(クリック・タップで拡大します)

これらのアーカイブページでも「はてなスターAddボタン」を非表示にしたい場合は、同じようにこれをコピペしてください。

.page-archive .hatena-star-add-button {
display: none;
}



なお、この方法では、「追加ボタン」と一緒に、何故かユーザーさんの画像まで非表示になってしまいます。(数と☆マークだけ残る)

原因が解る人、ぜひ教えてください。

(カスタマイズをする際には、念のためバックアップを取った上で、自己責任でお願いします。)

ちなみに、スター自体を非表示にする方法

「そもそもスターなんて要らないよ!」という方のために一応。

『デザイン』 ⇒ 『カスタマイズ』(スパナマーク) ⇒ 『記事』 ⇒ 『記事下のみに表示できるソーシャルパーツ』 ⇒ 『はてなスター』のチェックを外せば、スターの機能自体をオフにできます。


(クリック・タップで拡大します。)

おわりに

私はこれからもスター機能を楽しんで利用していきます。

みなさんも、楽しいはてなブログライフを!

最後までご覧いただきありがとうございました。

この記事にしてくださると嬉しいです!

以上、「はてなスターAddボタンをトップページ・アーカイブから非表示にする方法」でした。

読者になってくださると更新の励みになります!


ぜひフォローしてください!

(関連記事)
www.aominablog.com

www.aominablog.com

www.aominablog.com