[雑記] ブログに拍手ボタンをつけてみた

どうも、りっしゅです！
雑記ブログということで、日々あったことを記録！

今回は「ワードプレスのブログに、拍手ボタンをつけてみた」について。

ずいぶん昔、無料ブログの「FC2」を使って、
ブログ記事を更新していた時期があったのですが、そのときにデフォルトで備わっていた「拍手ボタン」！

この「拍手ボタン」の機能が急に懐かしくなり、このブログにも導入してみよう！と思い立ちました。

拍手ボタン機能とは

コメントするのはハードル高いし、いつも記事読むだけです～って人も、
「拍手ボタン」機能なら、ポチっと押すだけ！
この記事よかったよ！いいね！と、軽い気持ちで押していただける機能です。

今回、わたしが導入した拍手機能は、コメント入力不要の設定にしています。
ホントに、ボタン押すだけ。
instagramの「♡いいね」と同じ感覚。

覚書ですが、導入方法を下記に記録しておきます。

使用したプラグイン

WordPressプラグイン＞「WP ULike」

参考にさせていただいたサイト様

【WPプラグイン】WP ULikeで拍手ボタンを作る

設定・アイコンもろもろ、使用させていただきました。
本当にありがとうございます…！

カスタマイズ

WP ULike画面＞開発者ツール＞Scripts の中にある「カスタムCSS」

この「カスタムCSS」を使って、見た目のデザインを変更していきます。
下記コードを「カスタムCSS」にコピペします。
(Webのコードに関しては独学＆超超ド素人なので、プロから見たらめちゃくちゃなコードかもしれません…悪しからず…)

カスタムCSS (開く)

.wpulike-heart{
  position: relative;
}

.wpulike-heart:before {
  position: absolute;
  content: "拍手";
  font-size: 70%;/*文字の大きさ*/
  top: 25px;/*拍手の位置-上から*/
  left: 80px;/*拍手の位置-左から*/
  padding: 0.1em;/*余白*/
  background: none;/*背景色*/
}

.wpulike-heart .wp_ulike_general_class {
  box-shadow:none;
  padding: 0px;
  width: 113px;/*長方形の枠-横の長さ*/
  background: #f6f6f6;/*長方形の色*/
  box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 -4px 5px -2px #ddd inset;/*影*/
}

.wpulike-heart button.wp_ulike_btn {
  width: 45px;
  height: 45px;/*ボタンの大きさを調整*/
  border: 1px solid #aaa;/*線の太さ、スタイル、色を指定*/
  border-radius: 50%;/*角を丸めて円にする*/
  background: #fff;/*ボタンの背景色*/
  margin: 3px;
}

.wp_ulike_btn.wp_ulike_put_image:after {
  width: 30px;
  height: 30px;/*いいねに設定したアイコンの大きさを調整*/
}

.wp_ulike_btn.wp_ulike_put_image.wp_ulike_btn_is_active:after {
  width: 30px;
  height: 30px;/*よくないねに設定したアイコンの大きさを調整*/
}

参考にさせていただいたサイト様では、Wordpressメニュー「外観」→「カスタマイズ」＞「追加CSS」のところに、コードを入力していますが、当ブログでは WP ULike画面＞開発者ツール＞Scripts 内の「カスタムCSS」に入力。

「カスタムCSS」を入力し終えたら、保存ボタンを押して完了！！

「カスタムCSS」を追加すると、拍手ボタンはこのようなデザインになります。
(※拍手アイコンは、画像加工して左右反転して使用させていただいております)

りっしゅ

時間が経ったらしれっとデザイン変えてるかも…？(おい)

覚書は以上となりますー。
どなたかのお役に立てましたら幸いです。

最後まで読んでいただきありがとうございましたー！

拍手ボタン変更しました

2025.4.7 追記

デザインの融通が利くことから、プラグインを変更しました。
「いいねボタン for WordPress」に変更。

DLさせていただいたサイト様

いいねボタン for WordPress | 創作・同人サイト制作支援メディア do

上記サイトにてZIPファイルをダウンロード
WordPressのプラグインにインストール

わたしの求めていた「WEB拍手」の機能がすべて搭載！
めちゃ嬉しい。ありがとうございます！

カスタマイズ

WordPressメニュー画面
いいねボタン＞ボタンデザイン

ボタンに表示する文章：
<icon>sign_language</icon>拍手する <count>
アイコンの色：
#81d742 ■
ボタンにカーソルを合わせたときの背景色：
#e5f9e8 ■

カスタムCSS：(コードを開く)

.ifw_wrap {
    margin: 0px auto;
}
.ifw_wrap button.ifw_btn span.material-symbols-rounded {
    font-size: 25px;
    margin: 0 3px 0 0;
    transform: scale(-1, 1);
}
.ifw_wrap button.ifw_btn {
    border-radius: 0px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-left: solid 6px #81d742;
    font-weight: bold;
}
.ifw_wrap button.ifw_btn:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}

「カスタムCSS」の欄に、↑上記コードを追記すると、
拍手ボタンのデザインは以下の形に。