EDIT

【F-light】はてなスターボタンを付けてみた

｜2023/09/06 ｜2
アイキャッチ

昔 Contempo を使ってた頃に「はてなスター」ボタンを付けていました。

ファビコンふじろじっく
サムネイル
【Contempo他】Bloggerにはてなスターを付ける
今回のカスタマイズは Contempo 等の公式新テーマ(Emporio を除く)限定です。
https://fujilogic.blogspot.com/2019/06/Hatenastar-on-Blogger.html

その後 QooQ に変えてからはカスタマイズが面倒だったこともあって付けていませんでしたが、昨日ふと、F-light でも使えるのかな？と思い試しに設置してみたところ、問題なく機能しました。

Contempo ではトップページの記事一覧でも表示させてましたが、今回は記事ページのみ。表示位置も記事タイトルの末尾ではなく、SNS シェアボタンの下に置いています。

シェアボタンの下に設置したはてなスター

リアクションボタン的な用途で使ってもらえればと。はてなアカウントをお持ちの方は遠慮なく押してくださいね！黄色のスターなら無制限に付けられますよ(笑)

新仕様のはてなスターボタン

ファビコンHatena Developer Center
サムネイル
はてなスターをブログに設置するには | Hatena Developer Center
はてなスターの仕組み
https://developer.hatena.ne.jp/ja/documents/star/misc/hatenastarjs
ファビコンはてなスター日記
サムネイル
はてなスターをリニューアルしました - はてなスター日記
インターネットをいっそう楽しくする「はてなスター」を本日、リニューアルしました。
https://star.hatenastaff.com/entry/renewal

デベロッパーサイトや公式ブログ記事によると、以前使ってた時とはデザインや仕様が大きく変わっているようですね。ボタンも画像だったのが SVG になっていたり、モバイルでの UI 等、色々改善されているようです。

ボタンのサイズ

ボタンのサイズをもう少し大きくしたかったのですが、iframe で埋め込まれているため CSS は直接当てられず JS を何とかする必要があり、旧仕様の時は確か詳細な手順が書かれていて大きいサイズに出来たんですけど、今の仕様でのやり方がわかりません(^^;

遅延読み込み不要？

外部スクリプトを読み込むため、遅延読み込み対応とかしといた方がいいかなと思ったのですが、仕様を読んでみると…

はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。出典: Hatena Developer Center

というわけで、遅延読み込みのためのカスタマイズとかは特に不要なようです。ただ PSI では指摘されるので、対処できるのならしたいですけどね…コードをインライン化するという手もありますが(ボタンサイズも変えられるかも)、はてなスターのコードは jQuery よりもサイズが大きいので躊躇してしまいます(^^;

F-light への実装手順

参考までに F-light テーマへの はてなスターボタンの設置方法を紹介します。

スターを付けるには はてなアカウントが必要ですが、ボタンの設置はアカウントなしでも可能です。

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

① JavaScript コードの設置

テーマの HTML 編集にて </body>の上に以下のコードを挿入します。

<b:if cond='data:view.isPost'>
  <!-- Hatena Star -->
<script src='//s.hatena.ne.jp/js/HatenaStar.js'/>
<script>/*<![CDATA[*/
Hatena.Star.SiteConfig = {
  entryNodes: {
    '#main-content': {
      uri: 'h1 a',
      title: 'h1',
      container: '.hatena-star'
    }
  }
};
/*]]>*/</script>
</b:if>

② 記事タイトルコードの変更

はてなスターボタンを表示させるために一番重要なポイントが、記事タイトルに記事のパーマリンクを付けることです。ということで以下のコードを探して変更します。

まずこのコードを探します。

<h1 id='p-header-title'><data:post.title/></h1>

このコードを以下のように変更します。

<h1 id='p-header-title'><a expr:href='data:post.url'><data:post.title/></a></h1>

③ ボタンを表示させる位置にタグを置く

当ブログの様に SNS シェアボタンの下に置く場合の例です。

検索で<div class='sns-share-buttons'>を探し、行番号の右の▼をクリックして折りたたみ、そのすぐ下に以下のコードを挿入します。

<span class='hatena-star'/>
はてなスターボタンのタグを挿入

④ CSS の追記

最後に位置調整用の CSS を追記します。

以下のコードを /*==== ユーザー カスタム CSS ====*/ の下に追加して下さい。

.hatena-star {
  display: block;
  text-align: center;
  margin-bottom: 4em;
}
.sns-share-buttons {
  margin-bottom: 2em;
}

以上です。ボタン表示されましたか？

の取り消し方

まあ付け方は説明するまでもないと思いますが、付けたスターを取り消す方法をご存知ない方も多いかもしれません。以下の公式ヘルプにやり方が詳しく書かれていますのでご参考にどうぞ。
はてなスターのヘルプ – 自分がつけた☆を削除する

最後に

余談ですが、昨日から気分転換でブランドカラーを緑系の配色に変えています。時期的にクリスマスを意識してると思われそうですが、単純に好みの色に変えてみたというだけの話です。とは言え、今回を付けたことで、余計にクリスマスっぽい雰囲気になってしまったかも？(笑)