特定のタグ（カテゴリ）のときだけ何かを表示したり隠したりするカスタマイズ

カスタマイズ

こんにちは、つばさ（@tsubasa123）です。

どうやってご本人にお伝えしたらいいかわからなかったので記事化しました。ヒトデさん、お時間がありましたら試してみてください。

  1. CSSだけでOK
  2. JavaScriptでももちろんできる
  3. さいごに

CSSだけでOK

元ネタはこれ。「タグ」って書かれてるけどきっと「カテゴリ」のことだよね。

body.category-ブクマ不要 #shareButton .hatena-bookmark-button {
display: none;
}

こんな感じでCSSを追記してもらえれば、「ブクマ不要」ってカテゴリの記事の下にあるシェアボタンの中から、はてぶだけ隠れるんじゃないかと思います。PCもスマホもいけるはずです。シェアボタンのクラスが違ったら直してください。わからなければ連絡ください。

ヒトデさんに限らず、カテゴリに応じて表示するコンテンツを切り替えたいって需要はありそうな気がしました。関連する記事なんかが良い例ですね。この辺はもう少し調査してみてもいいのかもしれません。

CSSで隠しているだけなのでブラウザの表示上は消えていますが、ソースコード上にはボタンは残ります。見えないだけです。まぁこれはしょうがない。さすがにそこまで対応するのは無理かな。

JavaScriptでももちろんできる

$('.entry-categories a').each(function() {
if ($(this).text() === 'ブクマ不要') {
$('#shareButton .hatena-bookmark-button').hide();
}
});

できるんだけど、CSSの方がおすすめですね。パンくずリストを生成するカスタマイズを入れていると正常に動作しませんし、ページの表示速度にも多少影響します。

さいごに

カスタマイズってほどのことではないですが、まぁカテゴリに応じてコンテンツの切り替えはできますよ、って話でした。

これが今年のカスタマイズ納めかな。そろそろ大掃除に戻ります。

ではでは、最後までお付き合いいただきありがとうございました。

コメント

ホーム
トップ