続・緑色日和。

好きなことや気になることを、気まぐれに。

【はてなブログ】ピンタレストの画像保存ボタンを表示させる方法

スポンサーリンク

【はてなブログ】ピンタレストの画像保存ボタンを表示させる方法 現在、はてなブログでもピンタレストを全力でアピールしたい!という試みに挑戦中です。

第1弾として、サイドバーや記事内にピンタレストで作成したボードを表示する方法について説明しました。

midori-biyori.com

今回は、はてなブログでもPinterestアピールしたい試みの第2弾として、ブログ内の画像をピンタレストに保存しやすくするための「画像保存ボタン」を設定する方法を紹介していきます。

midori-biyori.com

こちらの記事の中で、PC版Chromeの拡張機能として、画像が表示されるとピンタレストの保存ボタンも表示される機能があることを紹介していまして、実際に私も使っているわけですが。

自分が保存するだけではなくて、記事を見てくださった方にもピンタレストに画像を保存しやすい仕組みを作りたいと思いました。

画像保存ボタンとはどんなものか、そしてはてなブログで設定する方法について説明していきます。

画像保存ボタンとは

画像保存ボタンは、画像が表示された時に、左上にピンタレストへの保存ボタンが表示されるものです。

うちのブログだと、こんな感じで画像にカーソルを合わせるとピンタレストへの保存ボタンが表示されます。

ピンタレスト・画像保存ボタン表示
画像の左上に保存ボタンが表示される

ブログの記事を見た人が、記事内の画像をピン(保存)したいと思った時、Pinterestの画像を保存するハードルが低くなるのがメリットになります。

WordPress(テーマCocoon)を使っていた時は、テーマの設定からピンタレストの画像保存ボタンの設定が出来るようになっていたのですが、はてなブログでは現在ピンタレストの設定ができる項目はありません

そのため、はてなブログで画像保存ボタンを表示させたい場合は、自力で設定する必要があります

はてなブログでピンタレスト画像保存ボタンを設定する手順

ピンタレスト・ウィジェットビルダーで作る

ピンタレストのウィジェット設定解説記事でも登場していますが、ピンタレストの画像保存ボタンも、ピンタレストの「ウィジェットビルダー」で作ります

business.pinterest.com

流れをざっくり説明すると

✔CHECK

  • 画像保存ボタンの種類と大きさを選ぶ
  • 表示されるhtmlコードをコピーする
  • コピーしたコードをはてなブログの設定画面に貼り付ける

  • この3つの作業で完成するので、ピン・ボードを表示させるより簡単な作業ですよ。

    具体的に説明していきますね。

    ウィジェットビルダーの「保存ボタン」を選ぶ

    Pinterest・ウィジェットビルダー(保存ボタン)
    https://business.pinterest.com/ja/pinterest-widget-builder

    ウィジェットビルダーを開くと、保存ボタン以外にもフォローボタンやウィジェット(ウィジェットの作り方はこちら)を作るメニューが表示されています。

    この中から「保存ボタン」を選んで下さい。

    画像保存ボタンの種類を選ぶ

    保存ボタンの編集画面に移ると、ボタンの種類や大きさを選ぶことが出来るようになります。

    ピンタレスト・保存ボタン作成

    今回は、画像にマウスのカーソルが入ったり、スマホでタップした時だけボタンが表示されるタイプのものにしたいので、ボタンの種類は「画像にホバーした時」を選びます

    ピンタレスト・保存ボタン画像にホバーした時
    「画像にホバーした時」を選ぶ

    1件の画像」「全ての画像」はおそらく常時画像にボタンが表示されるタイプの画像保存ボタンになるのだと思われます。

    この2つのボタンだとコードが2種類になってしまうのと、私の乏しい知識ではうまく画像内にボタンを表示させることが出来なかったため、「画像にホバーした時」一択で説明していきます。

    ボタンは「P」のロゴの横に「保存」の文字が表示されているものがデフォルトになっていますが、ボタンの種類の下にある「」にチェックを入れると「P」のロゴの丸いボタンになり、「」にチェックを入れるとボタンの表示が大きくなります。

    ピンタレスト・保存ボタン円の大
    両方チェックを入れると円のボタンが大きく表示できる

    私は、「大」のみにチェックを入れた状態のボタンにしています。

    そして、「円」にチェックを入れていない状態の場合は、「言語」という項目が表示されます(※英語にすると「保存」が「Save」と表示される)が、ここはいじらなくて大丈夫です。

    ピンタレスト・保存ボタンの言語設定

    表示されるコードをコピーする

    ボタンのデザインが決まったら、コードをコピーします。

    ボタンのプレビューの下に「このコードをコピーして、アドオンを表示したい場所に貼り付けます」という文字列とあわせてコードが表示されていますので、コピーします。

    ピンタレスト・保存ボタンのコード
    右下の反転している部分のコードをコピー

    ウィジェットを設置する時(リンク)は2種類のコードをはてなブログ側に貼り付ける必要があったのですが、今回は1種類だけなので簡単ですね。

    コピー出来たら、はてなブログの設定画面に移ります

    コピーしたコードを「フッタ」に貼り付ける

    コピーしたコードを、はてなブログの設定画面にある「フッタ」に貼り付けます

    フッタ」の場所ですが、はてなブログ設定画面の「デザイン」→「カスタマイズ(スパナのアイコン)」→「フッタ」となります。

    はてなブログ・フッタの場所

    HTML編集のボックスをクリックすると、コードを編集出来るようになるので、一番下の行(空白行)にコピーしたコードを貼り付けて「変更を保存する」を選択すれば作業は完了です。

    はてなブログ・フッタにコードを貼り付け
    一番下の何もない行にコードを貼り付ける

    ※注意事項・スマホでの挙動はちょっと不安定かもしれない

    残念ながら…といいますか、ちょっと注意していただきたいことがあります。

    スマホから見た場合、少し挙動が不安定な感じがあるのです

    はてなブログ・スマホのピンタレスト画像保存ボタン
    スマホから見た画像保存ボタン

    画像にそっと触れた時にボタンが表示されることもあれば、触れていないのにボタンが表示されることもあるし、画像をしっかり触ってもボタンがなかなか表示されないこともあります。

    私の設定の問題?と思いましたが、他の方のブログで同じ画像保存ボタンが表示されている時も挙動が全く同じだったので、スマホでは仕方がないことなのかもしれません。

    パソコン上では安定して表示されているのですが、スマホではちょっと残念な動きになったり思うようにボタンが表示されないかも…ということを理解した上で、画像保存ボタンを設定するか判断していただければと思います

    画像保存ボタンを設定して、ピンタレストを宣伝しよう

    スマホではちょっと残念感が否めない、ピンタレストの画像保存ボタン。

    それでもピンタレストへブログの画像を保存してもらいやすくなるというメリットは、ピンタレストアカウント持ちとしてはかなりの強みになりそうです。

    デフォルトのシェアボタンにピンタレストが存在しないなど、ピンタレスト的には優しくないはてなブログですが、ピンタレストの画像保存ボタンを設定して、ピンタレストに画像を保存してもらう可能性を高くしてみてもいいかも?

    それでは、今回はこのへんで。