お父ちゃんからの依頼で

ブログ記事に「いいね」と「うんこ」ボタンを設置しました💩

記事本文の左上に表示しております。

プラグイン：Posts Like Dislike

プラグインはこちらを使用させて頂きました。

Posts Like Dislike

続きを見る

無料で利用が可能です。

設定などはこちらのブログ記事が参考になります。

ブログ記事にいいねボタンの設置ができる「Posts Like Dislike」の使い方 | takuweb

CSSでクリックエフェクト

ボタンをクリックした時のCSSはこちらを参考にさせて頂きました。

See the Pen Button click pulsing effect – Pure CSS by Ashley Saleem-West (@ash_s_west) on CodePen.

💜 と 💩 で少し動作を変えています。

💩 ボタンの設置とエフェクトはお父ちゃん の希望です。

.pld-like-dislike-wrap{
  display: flex;
}
.pld-common-wrap{
  display: flex;
  margin-right: 15px;
}
.pld-like-dislike-trigger {
  position: relative;
  flex: none;
  width: 30px;
}
.pld-like-dislike-trigger:after {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.8s;
}
.pld-like-trigger img {
  opacity: 0;
}
.pld-like-trigger:after{
  background-image: url(/wp/wp-content/uploads/2022/09/icon-heart.svg);
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
}
.pld-dislike-trigger:after{
  background-image: url(/wp/wp-content/uploads/2022/09/icon-unko.svg);
  filter: drop-shadow(0 0 10px #e6a80e);
  width: 50px;
  height: 50px;
  left: -10px;
  top: -10px;
  margin: auto;
  opacity: 0;
}
.pld-like-dislike-trigger:active:after {
  transition: 0s;
}
.pld-like-trigger:active:after {
  transform: scale(130%);
}
.pld-like-dislike-trigger:active:after {
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  opacity: 1;
}
.pld-count-wrap{
  padding: 2px 10px;
  background: #f5f5f5;
  border-radius: 10px;
  position: relative;
  margin-left: 10px;
}
.pld-count-wrap:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  margin-top: -5px;
  border: 5px solid transparent;
  border-right: 5px solid #f5f5f5;
}

ボタンの動作としてはカウントされた時だけアクションする方が適切かとは思うのですが、まぁまぁお遊びということでとにかく押したら動く形です(^o^)

SVGアイコン

アイコンはこちらでお借りしました。

アイコン素材ダウンロードサイト「icooon-mono」
https://icooon-mono.com/

是非押してみてください〜(^o^)