ブログ画像にピンタレストのピンボタンをつける
Pintarest（ピンタレスト）とは画像を集めるサービス。ネットで気になった画像を“ピン(Pin)”して自分のボードに収集するビジュアル・ブックマークのツールです。
写真をたくさん使っているブログはピンタレストは相性が良さそう。
ブログを見てくれたあなたが気に入った写真をピンタレストのボードに集めてくれるようにブログ画像にピンタレストのピンボタンをつけてみます。
ブログにピンタレストのシェアボタンをつける
Word Press で Cocoonテーマを使っているときは、Cocoon設定 ＞ SNSシェアの表示切替で Pinterest にチェックをするとページの画像をピンできるようになります。
Pinterest を押すと表示されている画像の一覧から選択してピンできます。この方法だと記事の外にある画像も表示されてしまうので手軽にピンできずイマイチな感じです。
ピンとしたい画像を直接、選べる直感的な方法にカスタマイズします。
ウィジェットビルダーで保存ボタンを追加する
保存ボタンを作成したいときは、Pinterest ウィジェットビルダー へアクセスして保存ボタンを押します。フォローボタンやボードを作りたいときはそのボタンを押します。
Pinterest（ピンタレスト）の保存ボタンを選ぶ
ウィジェットビルダーが表示されるので[保存]ボタンで好きなボタンの種類を選びます。
ここでは、画像にホバーした時、円形、大 を選びました。画像の上にカーソルを乗せたときにピンタレストのアイコンがでてきて画像を保存できるようになります。
決まったら右下のコードをコピーしておきます。
Cocoonにコードを貼り付ける
先ほどコピーしたの保存ボタンのコードを貼り付けます。
外観 ＞ テーマエディター ＞ tmp-user ＞ footer-insert.php
Cocoon設定 ＞ アクセス解析・認証 ＞ その他アクセス解析・認証 ＞フッター用コード
に設定しても動きませんでした。
これでサイトの画像にカーソルを載せると保存ボタンが表示され…ない！
画像保存を無効化したブログでピンタレストの保存ボタン
保存ボタンが表示されないのは画像保存を無効化しているからだった。
通常はコレで保存ボタンが表示されるんだけどマウスイベントのターゲット制御を無効にして画像を右クリックして保存・URLの取得を防止していたのを忘れてた。
style.css に埋め込んでいたコードがコチラ。
img{pointer-events: none;}
イメージタグのマウスのイベント制御を無効にしているのでピンタレストの保存ボタンが出てこない。そりゃそーだ！
画像保存を防止してピンタレストの保存ボタンを表示させるには？
マウスのイベント制御は有効にして画像を保存させないようにするには右クリックを禁止すればいい。右クリックをすべて禁止にするとテキストがコピーでなくなるので、画像は右クリックを禁止にするには、img タグに以下を追加すると画像の保存だけを防止できる。
oncontextmenu="return false;"
が！全部の画像タグに入れるのは超メンドクサイ！
そこで画像だけ一括してコンテキストメニューを無効にするには、javascript.js に以下を追加するとバッチリ。
$(function(){
// 画像ファイル上だけ右クリックのメニューを禁止
$("img").on("contextmenu",function(){
return false;
});
});
このブログで気に入った写真があったらどんどん ピンしてください。
