WordPressにはてなスターを設置してデザインを良くする

この記事は約2分で読めます。

このブログは更新するたびにTwitterで流すようにしてるのですが、ある日こんなことを言われました。記事にいいねがつけたい! pvcresin (@pvcresin) October 15 2019

というわけで、はてなスターを設置することにしました。

## はてなスターの設置

いままで「はてなスター」は「はてなブログ」限定の機能だと思っていたのですが、どうやら外部のブログにも貼り付けることができるようです。

https://developer.hatena.ne.jp/ja/documents/star/misc/hatenastarjs

参考記事の手順に沿ってはてなスターを設置します。
wordpressの場合、トークン設定を`header.php`に記述して、`Hatena.Star.SiteConfig`は`single.php`に記述すると、記事のページのみに表示できます。

## デザインを良くする

めでたく設置されたスターを見ると、なんだか古いデザインになっています。
こんな感じ↓

ちょっとイケてないので、デザインを直してみます。

single.phpのどこかに、以下のスクリプトをscriptタグで挿入します。WordPressの管理画面から「外観」->「テーマエディタ」と進むと、各テーマのPHPファイルを編集できます。

続いて、WordPressの管理画面から「外観」->「カスタマイズ」と進み、「追加CSS」を選択します。

そこに以下のcssを記述しましょう。

これによって、ボタンが今のはてなブログっぽくなり、スターの背景にユーザアイコンが出るようになります。
こんな感じ↓

いい感じですね!
というわけで、イイねと思ったら押してくださいw”

コメント

タイトルとURLをコピーしました