ようこそ“もめん”です。
みなさんは、ピンタレストの画像を、ブログ内やウエブサイトで紹介できたらいいなぁと思うことはありませんか？
そうすれば、さらに大勢の方にみていただけますね。
私事で恐縮ですが、まえに宣言したようにプログラミングのコードを自分で書いて、「もめんのポートフォリオ」の作成をはじめました。
ポートフォリオは、読まれているブログ記事と、ピンタレストで作成したピンを紹介するような構成にしたいと考えています。
そこで疑問に思ったのが、ピンタレストの画像をウエブサイトに埋め込むにはどうしたらよいかということ。
表示させるにはどうすればいいのかな？
とにかく調べて、学習して、やってみましょう。
そしたら私にもできましたよ。
忘れないように、表示させる方法をまとめました。
ひとつのピン（画像）を埋め込む方法は2つあり、それぞれの手順を画像をつかってまとめています。
そしてウィジェットビルダーというツールをつかえば、ピンをまとめて表示させたり、ボードを選んで埋め込むこともできます。
こちらの方法も記しておきますね。
Contents
ひとつのピンを埋め込む方法
ピンタレストでは画像のことを「ピン」と呼びます。
まずは、ひとつのピン（画像）を選んでブログに埋め込む方法を説明します。
ひとつのピンを埋め込む方法には、「ピンの埋め込みコードを取得して画像を埋め込む方法」と「Pinterestウィジェットビルダーをつかう方法」の2つの方法があります。
ピンの埋め込みコードを取得して画像を埋め込む方法
まずは、ピンの埋め込みコードを取得して画像を埋め込む方法から説明しましょう。
【１】ピンタレストを開きます。
【２】右上のアカウントマークをクリックして、自身の作成コンテンツと保存コンテンツをみやすくしましょう。
【３】埋め込みたい画像を選んでください。
静止画ピン、動画ピン、アイデアピン、リピン画像（保存している他の他人の画像）のいずれも埋め込みコードが取得できます。
【４】・・・マークから「ピンの埋め込みコード取得（Get Pin embed code）」をクリックします。
ピンの埋め込みコードを取得する画面に切り替わります。
【５】表示したい画像の大きさを選びます。好みの大きさをクリックしてください。
【６】大きさの下に表示されたコード（上の画像のオレンジ色で囲んだ部分）をすべてコピーして、ブログ内に貼り付けます。
WordPressブロック挿入ツールで記事を描かれている場合は、ブロックを「カスタムHTML」に切り替えて貼り付けます。
きれいに貼りつけられていますね。
こちらのピンはアイデアピンで、動画と画像で構成されています。
画像の切り替えは、左右の＜＞をクリックしてください。
アイデアピンのうち一番最初に作成したものです。
画像の大きさは、「小」を選びました。
Pinterestウィジェットビルダーをつかって画像を埋め込む方法
つぎに、ひとつの画像を埋め込むもう一つの方法を説明します。
「Pinterest ウィジェットビルダー」というツールをつかって画像を埋め込む方法です。
「Pinterest ウィジェットビルダーは、ピンタレストを利用している人のために用意されているツールです。
「Pinterest ウィジェットビルダー」は（Pinterest Developers)から開くことができます。
ウィジェットビルダーで画像を埋め込むには「ピンのURL」を指定します。⇦ ここがポイントです。
では、手順を説明しますね。
【１】ピンタレストを開きます。
【２】アカウントマークをクリックして、自身の作成コンテンツ&保存コンテンツ画面を表示させましょう。
【３】貼り付けたい画像を選びます。
【４】画像の上に表示されるピンのURLをコピー（ctrl+c）します。
【５】Pinterestウィジェットビルダー（Pinterest Developers)を開きます。
【６】「ピン」ウィジェットをクリックします。
【７】URL部分に、先程コピーしたピンのURLを貼り付け（ctrl+v) ます。
【８】大きさを設定しましょう。
下のプレビュー画面でどんなふうに表示できるのか確認することができます。
【９】プレビュー画面の画像の下に表示されるコードをコピーして、ブログ内に貼り付けます。
WordPressブロック挿入ツールで記事を描かれている場合は、 ブロックをカスタムHTMLに切り替えて貼り付けてください。
どうでしょう。無事に貼り付けられましたか。
画像が表示されなければ、pinit.jsのコードがWordPressやウエブサイトのコードに含まれていない可能性があります。
はじめてウィジェットビルダーをつかう場合、もしくは、はじめて画像を埋め込む場合は、画像の下に用意されているpinit.jsのコードをコピーして、Body閉じタグ</body>のすぐ前に貼り付けてください。
WordPressでしたら、「WordPress」→「外観」→「テーマエディター」→「子テーマ」→「footer.php」と開いて、ページの最後に貼り付けます。
私は、ピンタレストをはじめたときに保存ボタンを作成していて、すでにpinit.jsコードをブログコード内に入れてあったので、こちらの操作はなしで画像が表示されました。
こちらのpinit.jsコードは、最初に一度だけ貼り付けておけば良いようです。
画像を埋め込む（ウィジェットビルダーをつかう）たびにコードを貼り付ける必要はありません。
以上、ひとつの画像を埋め込む2つの方法を紹介しました。
Pinterestウィジェットビルダーをつかうと、他にこんなこともできますよ。
それでは、つぎにツールのなかの「プロフィール」ウィジェットと「ボード」ウィジェットをつかって、何枚かの画像をおしゃれに埋め込む方法を説明します。
ピンをまとめて表示する方法
こんな感じの画像をつくって、ブログに埋め込むことができます。
画像をスクロールしてみてください。
埋め込まれた画像を下へスクロールしていくと、自分が作成したピン（画像）や集めたピン（画像）など50画像をみることができます。
このように、静止画ピン、動画ピン、アイデアピン、リピン画像すべてのピンのなかから、新しいもの50画像が表示されています。
では、手順を説明していきましょう。
【１】ピンタレストを開きます。
【２】右上にあるアカウントマークをクリックして、自身のユーザー画面（プロフィール画面）を開いてください。
【３】画面の上に表示されているURLをコピーします。
【４】ウィジェットビルダーを開き、「プロフィール」ウィジェットをクリックします。
PinterestユーザーのURLに、先程コピーしたURLを貼り付けましょう。
【５】サイズを選びます。「四角」「サイドバー」「ヘッダー」「カスタム」から選べます。
今回は「四角」を選びました。
【６】プレビュー画面で確認しましょう。
【７】プレビュー画面の下に表示されたコードをコピーして、ブログ記事内に貼り付けます。
＊はじめてウィジェットビルダーを使用される方は、コードの下に表示されているpinit.jpのコードをブログ内もしくはウエブサイト内の</body>のすぐ前に貼り付けてください。
ボードを選んで埋め込む方法
最後に、ボードを選んで埋め込む方法を説明します。
ピンタレストでは、作成した画像や集めた画像を整理して保存しておく場所を「ボード」といいます。
ボードに画像をファイリングしていく感じです。
ボードや保存した画像は、閲覧者が自由にみることができます。
私は「ブログ運営のヒント」「いいものみつけた！」「momenblog」「試してみたいこと」「作ってみたいレシピ」の5つのボードをつくって、そのなかに画像を保存しています。
5つのボードのうち「ブログ運営のヒント」というボードを選んで、ブログに埋め込んでみたいと思います。
【１】ピンタレストを開き、右上のアカウントマークをクリックして、ユーザー画面を開いてください。
【２】保存コンテンツをクリックしてボードを表示させましょう。表示させたいボードを選んでクリックします。
今回は、ボードのうち「ブログ運営のヒント」を選びました。
【３】すると画面が変わり、「ブログ運営のヒント」ボードに保存されている画像26枚が表示されます。
この状態で上のURLをコピーしてください。
【４】ウィジェットビルダーを開き、「ボード」ウィジェットを選びます。
そしてPinterestボードのURLの欄に、先程コピーしたボードのURLを貼り付けます。
【５】サイズを選んで、プレビュー画面下に表示されるコードをコピーして、ブログ記事内に貼り付けます。
こんな感じに埋め込まれました。
ボード内に保存されている26ピンが表示されていますね。
＊こちらもはじめてウィジェットビルダーを使用されるときは、 コードの下に表示されているpinit.jpのコードをブログ内もしくはウエブサイト内の</body>のすぐ前に貼り付けてくださいね。
まとめ
おしゃれに埋め込むことができるので、うれしいですね。
今回学んだことは、Pinterestの画像をブログやウエブサイトに埋め込むには、2種類の方法があるということ。
ひとつはピンの埋め込みコードを取得して、取得したコードをブログやウエブサイトに貼り付ける方法。
もうひとつは、Pinterestウィジェットビルダーに、URLを指定してコードを取得し、ブログやウエブサイト内に貼り付ける方法です。
Pinterestウィジェットビルダーの使い方や、ブログへの埋め込み方法がわかりました。
こうして記事にまとめたことでさらに理解が深まりました。
今回の執筆でさらに学んだことがあります。
それは、学習には根気と忍耐が必要だということです(笑)
本日も最後までおつき合いくださいましてありがとうございました。