Pinterest（ピンタレスト）は、ブログなどで使われている画像や写真をオシャレにシェアすることができるサービスですが・・・最近ではPinterest（ピンタレスト）を使う人が増えてきているように感じますね。

そこで当ブログ「はうすめーかーどうですか」でも気軽に写真をピンしてもらうためにピンボタンを設置することにしました！

ただし、「いいねボタン」や「はてブボタン」のような形でピンボタンを設置するのではなくて、ブログの写真や画像にマウスカーソルを乗せると画像の左上にピンボタンが表示されるような方法を試してみることにいたします。

理由としては、マウスオーバーでピンボタンが表示される方がクールな感じがするからですね！

Pinterestのピンボタンの設置方法！

ピンボタンを創る場合は・・・まず、Pinterestの「widget builder」のページに行きます！

赤い四角で囲った「pit it button」を選んだのちに、「image hover」を選択します。

「image hover」を選択することによって、通常のピンボタンではなくて、マウスオーバーで画像左上にピンボタンが浮かび上がるスクリプトを作成することができます。

矢印で示した Appearance の部分を操作するとピンボタンの大きさと形、色と表示言語を選ぶことができます。

選んだ結果はプレビューできますので、お好きなタイプでピンボタンを作成したら良いと思います。

ちなみに、私の場合はクールな感じにしたかったので小さな丸いピンボタンを選択いたしました。

これで誰でも簡単にブログの写真をピンタレストしてもらえるようになったと思います。

このピンボタンは画像にマウスのカーソルが来た時だけ表示されますので、とってもクールに感じる演出であると満足している私です。

最後に、表示されたスクリプトコードをブログの </body> タグの直前に貼り付ければオッケーとなります。

ただし、私の場合は・・・</body> ではなくて </head> タグの直前に入れてあります。

ピンボタンのスクリプトタグを </head> の直前に入れる理由

ぶっちゃけて言えば、</body> の直前に入れても上手く動作してくれなかった訳ですね。

</body> 直前にタグを入れると、記事内の画像にピンボタンが表示されずに、関連記事などのサムネイル画像にしか表示されなかったのです。

また、アイキャッチ画像などへの表示も変な感じになってしまったので・・・試しに </head> 直前に入れてみたのです。

結果的にはこの方法が良かったようで、ほぼ完璧に動作してくれましたので・・・結果オーライということにしておきました。

この現象が私のWordPressが原因で起こったものなのか、それとも使用しているテンプレートが理由なのかはわかりません。

もし皆さんのブログにピンボタンを付ける場合に </body> 直前でうまくいかない時は試してみて下さいね！