ブログ(ワードプレス)にピンタレストの画像が表示出来ない時に試したいこと

雑記

 

どーも、okuma(@okuma03)です。

先日、自身のブログにピンタレストの画像を埋め込もうと試みたのですが

どうやっても思うように出来ませんでした。

okuma
手順通りにやっているのになぜだ?!

どうにか調べまくって解決したので、その時のことをブログに残したいと思います。

私と同じようにピンタレストの画像が貼れない人はぜひ試してみてください!



ピンタレストの画像をブログに表示させる方法

 

そもそもの画像の貼り方はググっていただくとして、手っ取り早く解決策を載せておきます。

  1. 下記のコードをコピーしてスタイルシートの<head>の上に書き加え、保存する
  2. 使いたい画像のコードをコピーして「テキストモード」で貼る
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
></script>

 

やり方は以上です!

ビジュアルモードで貼ると画像が反映されないので必ずテキストモードにして貼りましょう。

ただし、またビジュアルモードに戻してしまうとコードが消える事態が起こるので </a>タグの前に適当に文字を入れておくと良いです。

ちなみに私は有料テーマの【スワロー】を使用しています。

OPENCAGEのテーマを使用している方は同じ方法でいけるかもしれません。

ただし、テーマヘッダーをいじるので念の為バックアップを取っておいた方が良いでしょう。

ピンタレストの画像が表示されない原因

 

順序通りに進めていくと分かるのですが、貼りたい画像の下に下記の注意点が書いてあります。

各ページのクロージング</ BODY>タグのすぐ前にpinit.jsを1つだけ含めてください。

引用:Pinterest

この通りにテーマを書き換えたら、私の場合はプレビューに何も反映されなくなりました(怖)

okuma
あの時はマジで壊れたかと思った・・

使っているテーマによっては上手く表示されないので注意してください。

 

まとめ

どうやってもピンタレストの画像がブログに表示されない(埋め込めない)人は、

ご紹介した方法をぜひ試してみてくださいね。

  1. 下記のコードをコピーしてスタイルシートの<head>の上に書き加え、保存する
  2. 使いたい画像のコードをコピーして「テキストモード」で貼る
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
></script>

それでは!