はてなスターを記事下部は非表示、コメントには表示する設定方法

「ブログ記事の下のはてなスターはいらないから非表示にしたいけど、コメントのはてなスターは表示させたままにしたい」という方向けに設定手順を書きました。

本ブログでは無料はてなブログで収入を得る方法を筆者の経験を元に書いていきます。便利や有益な情報を発信しますので、フォロー・読者登録・ブックマーク・シェアをよろしくお願いします！

@MatoPo1126をフォロー

設定手順

管理画面で「デザイン」をクリックする。
工具のスパナマークの「カスタマイズ」をクリックする。
左側のメニューを下へスクロールして「記事」をクリックする。
左側のメニューを下へスクロールして「記事下のみに表示できるソーシャルパーツ」の「はてなスター」のチェックボックスにチェックを入れる。
左側のメニューを1番下へスクロールして「高度な設定」の「{}デザインCSS」に以下②③の灰色背景のCSSを入力する。

①「高度な設定」の「{}デザインCSS」をクリックすると、以下のCSS記入欄が表示されるので、赤枠内をクリックすると入力可能な状態になる。

②記事下部に表示されるはてなスターを非表示にしたい場合、以下のCSSを入力する。

/* 記事下のはてなスター */
div.hatena-star-container {
display: none; /* 「記事下のはてなスター」を非表示 */
}

CSS入力前

CSS入力後

③カテゴリー選択後の記事一覧のはてなスターを非表示にしたい場合、以下のCSSを入力する。

/* カテゴリー選択後の記事一覧のはてなスター */
.star-container {
display: none; /* 「カテゴリー選択後の記事一覧のはてなスター」を非表示 */
}

CSS入力前

CSS入力後
左側のメニューの1番上にある「変更を保存する」をクリックする。
設定完了である。