はてなブログを楽しむ多くの人にとって、年明けにはてなスターがリニューアルされたことは記憶に新しいかと思いますが、
今更ながら、その変更に関する弊害を見つけました。
自前で作成していた『はてなスターコンテナ』が機能しなくなっていました。
はてなスターを押すことができる『はてなスターコンテナ』は基本的にはてなブログで記事を書くとデフォルトでついてくるもののため、わざわざ『はてなスターコンテナ』を自前で作る人は少数派だと思います。
今回はそんな『はてなスターコンテナ』は今までどのように定義していたのかと、リニューアルされたはてなスターに対応するにはどのようにすればよいのかについて見ていきます。
【今までの作り方の例】
<div class="hatena-star-container"></div>
<div class="hatena-star-metadata" style="display: none;"><a class="hatena-star-permalink" href="https://www.arsmaze.com/dummystar01">ダミースター01</a></div>
【これからの作り方の例】
<div
class="hatena-star-container"
data-hatena-star-container
data-hatena-star-url="https://www.arsmaze.com/dummystar02"
data-hatena-star-title="ダミースター02"
data-hatena-star-variant="profile-icon"
data-hatena-star-profile-url-template="https://blog.hatena.ne.jp/{username}/"
></div>
今までは「はてなスターの表示位置（hatena-star-container）」をdivタグに定義して、別のdivタグの中に「はてなスターの情報（hatena-star-metadata）」を定義していましたが、
これからは「はてなスターの表示位置（hatena-star-container）」をdivタグに定義する際に合わせてはてなスターの情報を定義してあげることになるみたいです。
【実際に作成したのがこちら】
こんな感じで『はてなスターコンテナ』を作成できます。
実際に押してもらうと、この記事のページとは連動しない独自のはてなスターの入れ物だということがわかるかと思います。
独自にはてなスターコンテナを配置したいという方が居ましたら、今回の方法を参考にしてみてください。
