昨日の投稿で書きましたが、特定のカテゴリーでのみブックマークボタンが表示されないようにカスタマイズしました。このブログでは「歴史」と「観光」の二つのカテゴリーでブックマークボタンは表示されないようになっています。
備忘録も兼ねてカスタマイズの手順を書いておきます。
本当は昨日書いておきたかったのですが、一部に問題が生じたために書く事が出来ませんでした。
雑記ブログを書いていると、ブックマークにはなじまない内容の記事もあったりしますので、あまり拡散させたくない身内だけで楽しみたいような記事や、炎上されると困るような記事用に利用してもらえればと思っています。
念のための言い訳
前もって書いておきますが、私はCSSやHTMLなどは書けはしますが学校で勉強したとかいうのではなく、完全に独学で趣味として覚えたものですので、最善の方法では無いかもしれませんし、もっと言ってしまえば間違っている可能性すらあります。
ですが、とりあえず、ブックマークを非表示にするという目的は達せられますので、「その程度で十分。」という方だけご利用ください。
あと、「こっちの方が良いんじゃね。」というダメだし＆アドバイスがございましたらご教授ください。
事前準備
デザインCSSをいじって特定のカテゴリーでのみブックマークを非表示とします。そのため、非表示とするカテゴリーを作成しておく必要があります。
既に存在しているカテゴリーを非表示にする場合は特に何もする必要はありませんが、そういったカテゴリーが無い場合は前もって作成しておいてください。
ここでは便宜的に「非表示カテゴリ」というカテゴリーを作成したということで話をすすめます。
<body class="category-カテゴリ名">を利用する
はてなブログでは個別に投稿されたページではそのページが属するカテゴリーの名前が、<body>タグのclassにふられています。
今回の場合であれば、<body class="category-非表示">となっているはずです。このクラス名を利用して、特定カテゴリーでブックマークボタンを非表示にします。
Brooklynを利用している場合
私は現在Brooklynというテーマを利用しています。
このテーマの作成者さんがこの記事の中で紹介しているシェアボタンを利用しており、デフォルトのものは使っていません。
Brooklynは人気テンプレートですので、同様の仕様の方も多いと思いますので、まずはこの場合のCSSについて。
/* ブクマ非表示 */
.category-非表示カテゴリ .hatena-bookmark-button {
display: none;
}
これをデザインCSSに追加で張り付けるだけです。簡単です。
他のテンプレートであっても、シェアパーツをデフォルトのものでは無く、HTMLを記載している場合は同様のやり方で非表示にできると思います。
それぞれのテンプレートによってボタン部分に割り振られたクラス名に違いがあると思いますので、その部分だけ変更してください。この場合ですと.hatena-bookmark-buttonの部分です。
さて、ここまではとても簡単だったので、最初にも書きましたが、本来は昨日の記事にのせるつもりだったのです。
しかし、デフォルトのソーシャルパーツでも同様にボタンが消えるだろうと試してみたところ、ボタンが消えないのです。
で、いろいろと試した結果、以下のようなやり方になりました。
デフォルトのソーシャルパーツを利用している場合
はてなブログが提供しているデフォルトのソーシャルパーツを利用している場合は以下をコピペしてください。
/* ブクマ非表示 */
.category-非表示カテゴリ .social-button-item:first-child{
display: none;
}
デフォルトのソーシャルパーツでは一番最初にブックマークのボタンが並んでいます。それを利用してfirst-childで指定しています。
ブックマークにふられたクラス名を使っても上手くいかなかったので、その部分だけ書き換えました。
まぁ、素人のやることなので、もしかしたら超単純なミスや勘違いがあるのかもしれません。というか、その可能性が大きいです。
ともかく、これでボタンの非表示という目的だけは達せられますので、最初に書いた言い訳をご理解の上でご利用ください。
ブックマークの使い方ひとつで、はてなブログって楽しくもつまらなくもなるものだと思います。ストレスの度合いも大きく変わりますしね。
ブックマークと上手く付き合って、楽しいブログ生活を送りたいものです。
では、また。
