なんだか物足りない、毎日ブログを書いてるけどなぜだか虚しくなる。その原因を探っていくと、記事を見られてはいるけど反応がないからではないかという結論に至りました。やっぱり承認欲求というか、見たよ！ってリアクションがあるとモチベーションの向上にも繋がると思うんです。
様々なメディアに搭載されている「いいね！ボタン」。これが私のブログにも欲しいと思って色々調べながら実装しましたが「WP Ulike」というプラグインを使うと簡単にできるのでおすすめです。それだけだと他の記事でも代用できるのでちょっとしたカスタマイズ方法も載せておきたいと思います。
「WP Ulike」の実装手順。
まずはインストール。
自分好みにカスタマイズ。
インストールすると管理画面の右側に「WP Ulike」という項目ができるのでクリックしてください。今回はわかりにくい箇所だけ解説していきます。全て解説すると量が多くなって逆にわかりにくくなりますからね。
「一般」基本的な設定。
上の画像はConfigurationの中にある一般項目です。初めは私も何のことを言っているのだか迷いました。最終的に全ての項目をONにしましたが一応解説していきます。
いいねの数をキロバイト形式で変換すると書いてあります。これだけだとイマイチ掴めませんが、簡単にいうといいねが1,000以上集まった場合に1kと表示するということです。ツイッターやインスタグラムで見たことある方がいるかもしれませんね。それぐらいいいね！された経験はないのですが、ONにしておきました。笑
カスタムトーストメッセージ。文字だけ見ると美味しそうですが、要はいいねされたときに出るバナーのことです。これは後述しますがメッセージの内容を変えられるので読者の方へ感謝の気持ちを伝えるためにONにしました。
GDPRとはEU一般データ保護規則のことです。閲覧者のプライバシーを守るための規則ですが、日本は対象ではありません。しかし、IPアドレスも立派な個人情報であり、サイバー攻撃等で悪用されないとは限りません。あらぬ疑いをかけられないためにもONにしておくことを推奨します。
この項目をONにすることで管理者通知を完全に無効にすることができます。無駄な通知を見るのは時間の無駄なのでONにしました。気になったときにだけ見れば十分かと思います。
いいねボタンを設置したくないページを選択します。私の場合は投稿記事だけにあれば十分だと思ったのでSinguar以外は全て選択しました。
「Content types」ボタンのデザイン。
この項目ではいいね！ボタンのデザインを変更することができます。無料版では4つのアイコンから選べるのですが、これでも悪くないと思います。CSSをいじれば多少オリジナリティを加味できるので最後にまとめてみます。
デザインは自由なので特に解説する箇所はありませんが、注意するポイントが1つあります。以下の画像をご覧ください。
4つの項目がありますが、「IPによって記録されました」がおすすめです。というのも他の選択肢を選ぶと1人が何回も押せたり、逆に押せなかったりするからです。IPはWi-Fiをリセットとかしない限り変わらない数値なので統計を取る際にも確実なデータが得られます。
「integration」前のバージョンからの引き継ぎ。
英語で難しいことが書いてありますが、簡単にいうと昔のバージョンから現在のバージョンに移行した際に失われたログやオプションを現在の数値に追加できるということです。なので、新規でプラグインを入れた場合はOFFにしておけば問題ありません。
「翻訳」トーストメッセージを変更する。
私は上記のような文言に変更しました。参考までに。
CSSで個性的にカスタマイズ。
さて、デフォルトのデザインでもなかなか良い感じですが、さらなる個性を求める方もいると思いまして任意で変更できるコードを置いておきます。あくまで自己責任でお願いします。
CSSを貼り付ける場所はWP Ulike内のDeveloper Toolsです。プレビューがついてないので確認しながらの作業が必要になります。
選んだテンプレートによってクラス名が異なるので気をつけてください。カスタマイズに向いた基本的なプロパティのみ記載します。
基本デザイン。
.wpulike .wp_ulike_btn {
margin: 0; /* 外側の余白 */
border-radius: .25em; /* 角丸 */
box-shadow: none; /* 影 */
padding: 15px 25px; /* 内側の余白 */
border: none; /* ボーダー */
cursor: pointer; /* カーソルの形状 */
}❶の場合。
/* ボタン周辺 */
.wpulike-default .wp_ulike_btn {
background-color: #e0e0e0; /* 背景色 */
min-height: 30px; /* 高さの最小値 */
min-width: 50px; /* 幅の最小値 */
}
/* 吹き出し */
.wpulike-default .count-box {
border-radius: .25em;
font-size: 12px; /* 文字の大きさ */
background-color: #fff;
margin-left: 8px; /* 左マージン */
line-height: 28px; /* 行の高さ */
padding: 0 10px;
box-shadow: 0 0 0 1px #bdbdbd inset;
color: #616161; /* 文字の色 */
}❷の場合。
/* ハート周辺 */
.wpulike-heart .wp_ulike_put_image {
background-color: #fff;
padding: 15px;
}
/* 吹き出し */
.wpulike-heart .count-box {
font-size: 14px;
line-height: 28px;
color: #616161;
font-weight: 600; /* フォントの太さ */
padding: 0 5px;
}
/* 枠 */
.wpulike-heart .wp_ulike_general_class {
box-shadow: 0 0 0 1px #bdbdbd inset;
border-radius: .25em;
padding: 5px;
}❸の場合。
/* ハート周辺 */
.wpulike-robeen .wp_ulike_btn {
width: 30px; /* 幅 */
height: 30px; /* 高さ */
padding: 0;
border: 0;
background-color: #fff;
}
/* カウンター */
.wpulike-robeen .count-box {
font-weight: 600;
padding: 0 14px;
font-size: 16px;
}❹の場合。
/* ハート周辺 */
.wpulike-animated-heart .wp_ulike_btn {
border-radius: 50em;
background-color: #fff;
padding: 0;
box-shadow: 0 5px 30px rgba(255,111,99,.4);
border: 0;
width: 50px;
height: 50px;
}
/* カウンター */
.wpulike-animated-heart .count-box {
margin: 0 15px;
color: #ff6f63;
}トーストメッセージ。
/* 基本設定 */
.wpulike-notification .wpulike-message {
margin: 0 0 6px;
padding: 15px 15px 15px 55px;
width: 280px;
border-radius: 3px;
color: #fff;
animation: wpUlikeNotifitcationsAnimation .2s backwards;
box-shadow: 0 3px 5px rgba(0,0,0,.08);
font-size: 14px;
font-weight: 500;
}
/* いいねしたとき */
.wpulike-notification .wpulike-message.wpulike-success {
background-color: #8bc34a;
}
/* いいねを取り消したとき */
.wpulike-notification .wpulike-message.wpulike-error {
background-color: #ef5350;
}長々とコードを書きましたが、これで終わりになります。このプラグインは他にも便利な機能が搭載されており、使い方次第ではモチベーションを高める以外の効果も期待できます。例えば統計を活用すればマーケティングに使えたり、ランキングのウィジェットを使えばサイト内の回遊率を高めることが可能です。
今のところ、ほとんど自分が押してるようなもの（笑）ですが、徐々にいいねが増えていくような良質な記事を書いていきたいものです。