Coco India

24歳OL女子の、世界を旅するトラベルブログ。

【やっとできた!】はてなブログにPinterestのピンを埋め込む方法

Pinterestの画像を記事に埋め込みたい!と思い調べてみたら、WordPressを使ったPinterestの埋め込み方法はたくさん記事が存在するのですが、はてなブログの埋め込み方法がどこにも載っていない....!( ´Д` ;;)

ウィジェットビルダーの謎の表記に戸惑い試行錯誤しましたが、はてなブログにおけるPinterestの埋め込み方法を4ステップでサクッとまとめました!

はてなユーザーの方ご参考ください。

 

①埋め込みたいピンを選ぶ

 まずはPinterestから埋め込みたいピンを選びます。

f:id:cocoindia:20170701174929p:plain

 

ウィジェットビルダーでサイズ等の設定

次に埋め込みたいピンの上の「•••」から「埋め込む」をクリック。

f:id:cocoindia:20170701175004p:plain

 

Pinterestウィジェットビルダーにジャンプするので、埋め込みのサイズ等を選択していきます。

f:id:cocoindia:20170701175245p:plain

▲ピンをそのまま埋め込みたい時は「ピン」を選択。ピンのサイズを選び説明表示の有無を選択します

 

サイズが選択できたら、▼以下のようにコードが自動作成されます。

f:id:cocoindia:20170701175446j:plain

コードが2つ出てくるので、上はともかく赤い注意書きのあるこの下のは何なんだ...!?となりますがw、この下のコードが重要なポイントになります。

次のステップへどうぞ。

 

❸下のスクリプトコードをheadに挿入!

自動作成された2つのコードのうち、<script async defer src="//assets.pinterest.com/js/pinit.js"></script> の方を、はてなブログ編集画面>設定>詳細設定>headに要素を追加 に挿入します。

f:id:cocoindia:20170701175810p:plain

▲このコードは一度入れておけばOKのようです!

 

④HTML編集にコードを貼り付けて完成

自動作成された上のコードをHTML編集に貼り付けます。

ここで最後のポイント!コードの<a href=...></a>の間に何も入っていないとHTMLとして認識されず勝手にコードが消えてしまうので、間に何でも良いので文字を入れましょう!

私はとりあえず間に "pin" と入れてみました。

f:id:cocoindia:20170701180119p:plain

▲間に入れた文字は最終的には見えなくなるのでご安心を

 

これで完成です!見たままモードで見ると文字だけ表示されていて焦るのですが、プレビューするとしっかり貼り付けられています( ^ω^ )

f:id:cocoindia:20170701180402p:plain

 

Coco