現在、はてなブログでもピンタレストを全力でアピールしたい！という試みに挑戦中です。
第1弾として、サイドバーや記事内にピンタレストで作成したボードを表示する方法について説明しました。
今回は、はてなブログでもPinterestアピールしたい試みの第2弾として、ブログ内の画像をピンタレストに保存しやすくするための「画像保存ボタン」を設定する方法を紹介していきます。
こちらの記事の中で、PC版Chromeの拡張機能として、画像が表示されるとピンタレストの保存ボタンも表示される機能があることを紹介していまして、実際に私も使っているわけですが。
自分が保存するだけではなくて、記事を見てくださった方にもピンタレストに画像を保存しやすい仕組みを作りたいと思いました。
画像保存ボタンとはどんなものか、そしてはてなブログで設定する方法について説明していきます。
※記事内では、はてなブログでの設定方法を説明していますが、WordPressでもHTML・CSSコードを設定することで設置可能です
画像保存ボタンとは
画像保存ボタンは、画像が表示された時に、左上にピンタレストへの保存ボタンが表示されるものです。
うちのブログだと、こんな感じで画像にカーソルを合わせるとピンタレストへの保存ボタンが表示されます。
ブログの記事を見た人が、記事内の画像をピン(保存)したいと思った時、Pinterestの画像を保存するハードルが低くなるのがメリットになります。
WordPress(テーマCocoon)を使っていた時は、テーマの設定からピンタレストの画像保存ボタンの設定が出来るようになっていたのですが、はてなブログでは現在ピンタレストの設定ができる項目はありません。
そのため、はてなブログで画像保存ボタンを表示させたい場合は、自力で設定する必要があります。
はてなブログでピンタレスト画像保存ボタンを設定する手順
ピンタレスト・ウィジェットビルダーで作る
ピンタレストのウィジェット設定解説記事でも登場していますが、ピンタレストの画像保存ボタンも、ピンタレストの「ウィジェットビルダー」で作ります。
流れをざっくり説明すると
- 画像保存ボタンの種類と大きさを選ぶ
- 表示されるhtmlコードをコピーする
- コピーしたコードをはてなブログの設定画面に貼り付ける
この3つの作業で完成するので、ピン・ボードを表示させるより簡単な作業ですよ。
具体的に説明していきますね。
ウィジェットビルダーの「保存ボタン」を選ぶ
ウィジェットビルダーを開くと、保存ボタン以外にもフォローボタンやウィジェット(ウィジェットの作り方はこちら)を作るメニューが表示されています。
この中から「保存ボタン」を選んで下さい。
画像保存ボタンの種類を選ぶ
保存ボタンの編集画面に移ると、ボタンの種類や大きさを選ぶことが出来るようになります。
今回は、画像にマウスのカーソルが入ったり、スマホでタップした時だけボタンが表示されるタイプのものにしたいので、ボタンの種類は「画像にホバーした時」を選びます。
「1件の画像」「全ての画像」はおそらく常時画像にボタンが表示されるタイプの画像保存ボタンになるのだと思われます。
この2つのボタンだとコードが2種類になってしまうのと、私の乏しい知識ではうまく画像内にボタンを表示させることが出来なかったため、「画像にホバーした時」一択で説明していきます。
ボタンは「P」のロゴの横に「保存」の文字が表示されているものがデフォルトになっていますが、ボタンの種類の下にある「円」にチェックを入れると「P」のロゴの丸いボタンになり、「大」にチェックを入れるとボタンの表示が大きくなります。
私は、「大」のみにチェックを入れた状態のボタンにしています。
そして、「円」にチェックを入れていない状態の場合は、「言語」という項目が表示されます(※英語にすると「保存」が「Save」と表示される)が、ここはいじらなくて大丈夫です。
表示されるコードをコピーする
ボタンのデザインが決まったら、コードをコピーします。
ボタンのプレビューの下に「このコードをコピーして、アドオンを表示したい場所に貼り付けます」という文字列とあわせてコードが表示されていますので、コピーします。
ウィジェットを設置する時(リンク)は2種類のコードをはてなブログ側に貼り付ける必要があったのですが、今回は1種類だけなので簡単ですね。
コピー出来たら、はてなブログの設定画面に移ります。
コピーしたコードを「フッタ」に貼り付ける
コピーしたコードを、はてなブログの設定画面にある「フッタ」に貼り付けます。
「フッタ」の場所ですが、はてなブログ設定画面の「デザイン」→「カスタマイズ(スパナのアイコン)」→「フッタ」となります。
HTML編集のボックスをクリックすると、コードを編集出来るようになるので、一番下の行(空白行)にコピーしたコードを貼り付けて「変更を保存する」を選択すれば作業は完了です。
※注意事項・スマホでの挙動はちょっと不安定かもしれない
残念ながら…といいますか、ちょっと注意していただきたいことがあります。
スマホから見た場合、少し挙動が不安定な感じがあるのです。
画像にそっと触れた時にボタンが表示されることもあれば、触れていないのにボタンが表示されることもあるし、画像をしっかり触ってもボタンがなかなか表示されないこともあります。
私の設定の問題？と思いましたが、他の方のブログで同じ画像保存ボタンが表示されている時も挙動が全く同じだったので、スマホでは仕方がないことなのかもしれません。
パソコン上では安定して表示されているのですが、スマホではちょっと残念な動きになったり思うようにボタンが表示されないかも…ということを理解した上で、画像保存ボタンを設定するか判断していただければと思います。
画像保存ボタンを設定して、ピンタレストを宣伝しよう
スマホではちょっと残念感が否めない、ピンタレストの画像保存ボタン。
それでもピンタレストへブログの画像を保存してもらいやすくなるというメリットは、ピンタレストアカウント持ちとしてはかなりの強みになりそうです。
デフォルトのシェアボタンにピンタレストが存在しないなど、ピンタレスト的には優しくないはてなブログですが、ピンタレストの画像保存ボタンを設定して、ピンタレストに画像を保存してもらう可能性を高くしてみてもいいかも？
それでは、今回はこのへんで。
コメント