ブログ記事にいいねボタンを設置しました
お母ちゃん
2022.9.17
10
5
お父ちゃんからの依頼で
ブログ記事に「いいね」と「うんこ」ボタンを設置しました💩
記事本文の左上に表示しております。
プラグイン：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.
💜 と 💩 で少し動作を変えています。
💩 ボタンの設置とエフェクトはお父ちゃん 
の希望です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
.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^)
