HomeMadeGarbage Loading

ブログ記事にいいねボタンを設置しました

Avatar photo お母ちゃん  2022.9.17 
ホーム
電子工作
Raspberry Pi
IOT
音楽
Home > 未分類 > ブログ記事にいいねボタンを設置しました
すき 4
うんこ 1

お父ちゃんからの依頼で

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

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

プラグイン: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.

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

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

.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^)

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください