どうも、りっしゅです！
雑記ブログということで、日々あったことを記録！
今回は「ワードプレスのブログに、拍手ボタンをつけてみた」について。
ずいぶん昔、無料ブログの「FC2」を使って、
ブログ記事を更新していた時期があったのですが、そのときにデフォルトで備わっていた「拍手ボタン」！
この「拍手ボタン」の機能が急に懐かしくなり、このブログにも導入してみよう！と思い立ちました。
コメントするのはハードル高いし、いつも記事読むだけです～って人も、
「拍手ボタン」機能なら、ポチっと押すだけ！
この記事よかったよ！いいね！と、軽い気持ちで押していただける機能です。
今回、わたしが導入した拍手機能は、コメント入力不要の設定にしています。
ホントに、ボタン押すだけ。
instagramの「♡いいね」と同じ感覚。
覚書ですが、導入方法を下記に記録しておきます。
使用したプラグイン
WordPressプラグイン ＞「WP ULike」
参考にさせていただいたサイト様
設定・アイコンもろもろ、使用させていただきました。
本当にありがとうございます…！
カスタマイズ
WP ULike画面 ＞開発者ツール ＞Scripts の中にある「カスタムCSS」
この「カスタムCSS」を使って、見た目のデザインを変更していきます。
下記コードを「カスタムCSS」にコピペします。
(Webのコードに関しては 独学＆超超ド素人なので、プロから見たらめちゃくちゃなコードかもしれません…悪しからず…)
.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」を追加すると、拍手ボタンはこのようなデザインになります。
(※拍手アイコンは、画像加工して左右反転して使用させていただいております)
時間が経ったら しれっとデザイン変えてるかも…？(おい)
覚書は以上となりますー。
どなたかのお役に立てましたら幸いです。
最後まで読んでいただきありがとうございましたー！