シンパパ, my Love エピソード0 〜恋って面白い!

最愛シンパパに出会うまでの道のりをまとめた恋活・婚活ブログ

【CSS初心者】はてなスター消す:記事下のみ表示、トップページ他は非表示

私はブログはじめてすぐ文章書くよりカスタマイズが楽しくなってしまい色々実験してまして、その実験のひとつに「はてなスターを消す」というのがありました。

 

Hatena Stars

 

私はこの時代に生きていながらSNSとかよくわからずほとんど触れてなくて、仕事以外では文章もほとんど10年近く書いてこなくて、「5年日記帳」を買ったけどやっぱり2か月しか続かなくて何ヶ月も真っ白で。

そんな私が2020年になってやっとこさ、自分の考えてることを文字にしようと思い、始めたわけなのですが。

 

「スターってなんか意味あんのかな?」

 

そんな感じでとりあえず外していたのですが、みなさんのブログを徘徊するうちに、自分のブログにもつけてみたくなってしまいました。

 

記事下にのみスターを表示して、

トップページ、カテゴリ、アーカイブページからはスターを消す。

その方法の備忘録です。

 

※以下はCSSについてご丁寧にご教示くださっている方のサイトからの引用ですが、だいぶ前にコピペさせていただいたコードのため、引用元が不明です。いずれ判明した際にはきちんと記載させていただきますゆえ・・・

 

 

 

手順1

デザイン → カスタマイズ → 記事

「記事下のみに表示できるソーシャルパーツ」欄の「はてなスター」にチェック 


これだけだとトップページ、カテゴリ、アーカイブページすべてにはてなスターが連動して表示されるようなので・・・

 

 

 

手順2

デザイン → カスタマイズ → デザインCSS

以下のコードをまるっとコピペ

(もともと書いてある文字要素は消さずに、任意の行に付け加える) 

 

/* はてなスター消す トップページ */
.page-index .hatena-star-add-button {
display: none;
}
.page-index .hatena-star-user {
display: none;
}
.page-index .hatena-star-star {
display: none;
}
.page-index .hatena-star-inner-count {
display: none;
}
.page-index .hatena-star-star-container {
display: none;
}
 
 
/* はてなスター消す カテゴリページ */
.page-archive-category .hatena-star-add-button {
display: none;
}
.page-archive-category .hatena-star-user {
display: none;
}
.page-archive-category .hatena-star-star {
display: none;
}
.page-archive-category .hatena-star-inner-count {
display: none;
}
.page-archive-category .hatena-star-star-container {
display: none;
}
 
 
/* はてなスター消す アーカイブページ */
.page-archive .hatena-star-add-button {
display: none;
}
.page-archive .hatena-star-user {
display: none;
}
.page-archive .hatena-star-star {
display: none;
}
.page-archive .hatena-star-inner-count {
display: none;
}
.page-archive .hatena-star-star-container {
display: none;
}

 

たったこれだけ★

読み込み速度がだいぶ軽くなるみたいですね!

f:id:em_me:20200515211000p:plain

気に入っていただけましたら、ぜひスターもお願いしますっ★w 

  CSS関連記事

Photo by McGill Library on Unsplash