ブログ画像にピンタレストのピンボタンをつける
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;
});
});
このブログで気に入った写真があったらどんどん ピンしてください。
