いいねボタンをnote風にしてみました

脱稿までSNSを封印してるのですが、あまりにも寂しくなり、手慰みにいいねボタンをnote風の追尾型にしてみました。使用プラグインはWP UlikeでテーマはSWELLです。今までもいいねボタンはつけてたのですが、追尾型にすることで「あっこのサイトはいいねボタンあるんだ」となって気軽に押してくれる人が増えるといいな、と思っての実装です。

本当はてがろぐにいいねボタン改（do様のプログラム）をつけたかったんですが、どうしてもできなかったのでWPに戻ってきました。WordPressが邪魔してるのかなと思って新しいHTMLサイトも取得したのですがダメで。仕方ないね。

追尾させる方法はこちらを参考にしました。

※こちらの記事には「どのテーマでも使える」とありますが、ウィジェットに「記事下エリア」が存在するテーマ向けな気がします。私が使っているSWELLテーマ以外にも「記事下エリア」ウィジェットがあるかは分かりません。無料海外テーマだとない気がするな～。

SWELLのウィジェットはこんな感じです。「トップページ下部」や「記事下部」が記事下エリアになります。

いちおう、WordPressテーマに記事下エリアウィジェットがある前提で書きますね。

ウィジェットの「記事下エリア」に、カスタムHTMLで以下のコードを記述します。

<div class="like-button-mobile">[wp_ulike]</div>

WP Ulikeショートコードにクラスを与えているだけです。あとはCSSで追尾させて終わりです。追尾させるCSSはこんな感じ。

.like-button-mobile .wpulike .wp_ulike_general_class {
    position: fixed;
    bottom: 1em;
    z-index: 9;
    right: 2em;
    font-size: 20px;
}

他の色や形はデベロッパツールを使ってお好みで調整します。上記のサイトが参考になります。CSSよりWPUlikeの設定の方が優先されるので、上記のサイトのCSSを使う時は「設定」→「コンテンツタイプ」をデフォルト設定のままにしておくといいと思います！

好きなところにいいねボタンを表示させることもできる

ブログとかの文中で、

[wp_ulike]

と打つとそこにボタンが表示されます。これは全テーマでできるやつです。便利～

おわり

noteのスキ！ボタンかなり好きなので寄せられて嬉しいです。今のところ追尾させてるのはブログだけで、トップページとイラストページは下～～～の方にちんまり存在してるのみとなっています。メッセージツールは色々ありしばらく閉じてますので、唯一のコミュニケーションツールです。コミュニケーションとりたいとは思っているんだ…。連打もできます。

また何か有益な発見があったら追記します。それでは…

ザッ…（原稿に戻る後ろ姿）