いにしえのブログで使っていた、WEB拍手のようなボタンがほしいなあと思っていたところ、「創作・同人サイト制作支援メディア do」さんの「いいねボタン for WordPress」というプラグインを発見しました。
ボタンのデザインも可愛くて、使いやすいです！
わたしはSANGOテーマを使用しているのですが、そのままでは表示されなかったため、変更した設定と使用しているカスタムCSSをメモとして残しておきます。
ばんかす
基本的な使い方は配布サイトに書かれています！
目次 非表示
SANGOユーザーでいいねボタンが動かない場合
わたしがSANGO設定を変にいじってしまっていたからか、いいねボタンを押してもカウントが増えませんでした…。
左の管理者メニューから「SANGO設定」＞「高速化」＞「アセットの読み込み設定」＞「jQueryを読み込まない」のチェックを外して保存すると動くようになります！
おすすめCSS
細かいところですが、少しだけ見た目を調整しています。
いいなと思ったら、下記のソースコードを左の管理者メニューから「いいねボタン」＞「ボタンデザイン」＞「カスタムCSS」欄にコピペすると、一緒の表示になると思います。
CSS
.ifw_wrap .ifw_message_wrap .ifw_comment button.ifw_send {
background: #fc81b6;
font-weight: bold;
border-radius: 999px;
}
.ifw_wrap .ifw_message_wrap.ifw_top_left .ifw_arrow {
top: calc(100% - 2px);
}
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text {
padding-bottom: 0px;
}
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text p {
font-size: 0.9rem;
}
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text p strong {
font-size: 1.15rem;
}
.ifw_wrap .ifw_message_wrap .ifw_close {
top: 10px;
right: 10px;
font-size: 2rem;
font-weight: normal;
}
.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap {
padding-bottom: 0;
}HTML
/* 吹き出しの三角 */
.ifw_wrap .ifw_message_wrap.ifw_top_left .ifw_arrow {
top: calc(100% - 2px);/* 上の境界線のちらつきを無くす */
}
/* いいね後ポップアップのテキスト */
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text {
padding-bottom: 0px;/* 下の余白を無くす */
}
/* いいね後ポップアップのテキスト */
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text p {
font-size: 0.9rem;/* 文字の大きさを調整 */
}
/* いいね後ポップアップの見出し */
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text p strong {
font-size: 1.15rem;/* 文字の大きさを調整 */
}
/* いいね後ポップアップの閉じるボタン */
.ifw_wrap .ifw_message_wrap .ifw_close {
top: 10px;/* 位置調整 */
right: 10px;/* 位置調整 */
font-size: 2rem;/* 大きさを調整 */
font-weight: normal;/* 細く */
}
/* いいね後ポップアップの送信ボタン */
.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap {
padding-bottom: 0;/* 下の余白を無くす */
}
/* いいね後ポップアップの送信ボタン */
.ifw_wrap .ifw_message_wrap .ifw_comment button.ifw_send {
background: #fc81b6;/* 背景色変更 */
font-weight: bold;/* 文字を太く */
border-radius: 999px;/* 角を丸く */
}いいね！
そもそもアクセス数が少ないので、いいねがつくかわかりませんが…＞_＜
もしこの記事が役立ちましたらいいねを押してくれるとうれしいです！
最後までお読みいただきありがとうございました！
送信中です
×
※コメントは最大500文字、5回まで送信できます