効率165センチメートル

ちいさな体で効率的に生きていく

【コピペOK】はてなスター機能は残したまま記事一覧から非表示に【カスタマイズ】

f:id:k07_20:20191002195609j:plain

どうも。いきなりですが、はてなブログのはてなスター。ダサくないですか?おしゃれなブログを作りたいとカスタマイズにもがくはてなブロガーの皆さん。かくいう僕もそのうちの一人。おしゃれで今風の。ワードプレス風のブログを目指し、日々記事執筆の合間にあーでもないこーでもないと、カスタマイズに励んでます。そんな中で、ブログの顔ともいえるトップの記事一覧にはてなスターがあるのと、一気にポップでキャッチーなブログに。違う違う!目指すのはスタイリッシュでスマートなブログなんだ。とかいうものの、はてなスターにはいろいろな魅力もあるのも事実です。はてなスターを非表示にするか否か。はてなブロガーならだれもが通る道ですね。さて、今日は、はてなスターの機能は残したまま、はてなスターの表示を記事一覧から見えなくする方法をご紹介します。

 とりあえず、結果がわかればOKって人は以下のコードをデザインCSSに貼り付けてください。

.star-container {
  display:none;

}

 念のため、非表示になっているかを確認してください。大丈夫なっている。そうですか、それではこの記事はここまでで結構です。まだ、読んでいただける方はしばらく付き合ってください。僕のブログを例に、同非表示になるかお見せします。

Before

 

f:id:k07_20:20191002194819p:plain

After

f:id:k07_20:20191002194824p:plain

 

まあそのままで、はてなスターは非表示になっていますね。個人差がありますが、僕は圧倒的にムダなモノを省いたシンプルな非表示モードが好きです。

コードの中身を説明します。HTMLだとかCSSなんて知らねぇって方は飛ばしていただいてOKです。

はてなブログの表側のスターのclassは以下のようになっていました。

class="star-container"

ですので、このclassをdisplay:none;にしてあげれば見えませんよって話です。

すごく簡単です。

さて、安心してください。あくまで、表側で見えなくなっているだけ。記事一覧の中に入るとちゃーんとあります。そして、読者の方ははてなスターを押せる状態です。(記事がおもしろければ。)

さらにもう少し。いやそもそも、はてなスターの機能自体いらねぇ。という下心のないブロガーさんのために、はてなスターという機能すら使えなくする方法もお教えします。

f:id:k07_20:20191002195145p:plain

 

これでOK。どちらもすごくシンプルで簡単ですね。

 

参考記事

naruhesogoma.net

 

以上で、

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

 はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

 記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

 サイドバーをカスタマイズ

サイドバーを見やすくする

www.165-cm.com