pinterest(ピンタレスト)をブログに埋め込みレスポンシブ表示する方法

ピンタレストをWEBサイトにレスポンシブに埋め込む方法
 

ピンタレストってどうやってブログ記事に埋め込めむのかな?

ぴっぴ

手順はとっても簡単

『pinterest(ピンタレスト)』では投稿をブログやWebサイトに載せるための「埋め込み」ウィジェットが用意されています。

この記事では「Wordpressにピンタレストの投稿を埋め込む方法」を画像付きで解説していきます。WEBサイトへの埋め込みも基本的に同じですので、少しHTMLやCSSの知識があればすぐにできますよ。

スマホが普及した今では必須となっている表示サイズをレスポンシブにする方法も、コピーするだけのコードとともにわかりやすくお伝えします。

もくじ

ピンタレストの埋め込みウィジェットの種類は3つ

ブログやWEBサイトに埋め込みできるピンタレストのウィジェットの種類は3つあります。
それぞれの特徴を、実際の埋め込みサンプルを見ながら解説していきます。

  • ピンウィジェット
  • ボードウィジェット
  • プロフィールウィジェット

ピンウィジェット

1つのピンの画像や詳細を表示できるのが「ピンウィジェット」です。
画像の説明文は非表示にすることができますよ。
サイズは「大」「中」「小」の3種類が選べます。

<表示サンプル サイズ:小>

<表示サンプル サイズ:中>

<表示サンプル サイズ:大>

ボードウィジェット

特定のボードのピン(画像)を新着順に30件まで表示できるのが「ボードウィジェット」です。
ピンの説明文は表示されません。
サイズは「四角」、縦長の「サイドバー」、横長の「ヘッダー」、自由にサイズを指定できる「カスタム」の4種類。

<表示サンプル サイズ:四角>

プロフィールウィジェット

指定したアカウントのすべてのボードのピン(画像)を新着順に30件まで表示できるのが「プロフィールウィジェット」。
こちらもピンの説明文は表示されません。
ボードと同じくサイズは「四角」、縦長の「サイドバー」、横長の「ヘッダー」、自由にサイズを指定できる「カスタム」の4種類。

<表示サンプル サイズ:サイドバー>

ピンタレストの埋め込み方法

STEP
埋め込みコードを作成する

ピンタレストの「ウィジェットビルダー」にアクセスします。

表示したい「ピン」、「ボード」または「プロフィール」のURLを入力して、サイズを選びます。すぐにプレビューでイメージを確認できます。

STEP
作成したコードをコピー

「このコードをコピーして、アドオンを表示したい場所に貼り付けます:」の下に表示されたコードをコピーしましょう。

ピンタレストのウィジェットビルダーで作成した埋め込みコード
STEP
表示したい場所にコードを貼る

記事内に貼る場合は[フォーマット]の[カスタムHTML]ブロックを使います。
コピーしておいたコードを貼り付けましょう。

wordpressコンテンツブロックのカスタムHTML

サイドバーやフッターに表示するには「外観」→「ウィジェット」から、配置したい場所にカスタムHTMLを追加。

STEP
jsコードをコピー

ウィジェットビルダーの「各ページのクロージング </BODY> タグのすぐ前に pinit.js を 1 つだけ含めてください。」の下に表示されたコードをコピーします。

ピンタレスト のウィジェット表示用jsコード
STEP
jsコードを貼る

管理画面のメニューから「外観」→「テーマエディター」を選び、テーマの編集画面に移動します。</body>タグが入っているファイルを開きましょう。
cocoonの場合は「テーマフッター(footer.php)」ですが、テーマによってファイルが異なる場合があります。

</body>タグの直前に先ほどコピーしたコードをペーストし「ファイルを更新」ボタンを押します。

当サイトで使用しているテーマの「SWELL」であれば「外観」→「カスタマイズ」→「高度な設定」にbodyタグ終了直前に出力するコードの記入欄がありますのでそちらに貼り付けてください。

ピンタレストの埋め込みサイズをレスポンシブ対応にする方法2つ

ウィジェットのコードは固定の表示幅が設定されています。
ここではピンタレストのウィジェットをレスポンシブ対応させる方法を2つ解説します。

  1. 横幅設定を削除して簡易的なレスポンシブにする
  2. スタイルを設定したボックスで囲ってレスポンシブにする【おすすめ】

1.横幅設定を削除して簡易的なレスポンシブにする

生成したコードから、幅に関する設定を削除してしまう方法です。
この部分を削除して貼ることで簡易的なレスポンシブ表示ができます。
ただしこの方法では表示領域が広くなると、幅100%で表示されず中途半端なサイズになってしまうことがあります。

<a data-pin-do="embedUser" data-pin-lang="ja" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/"></a>

コードの赤字の部分を削除して表示したい場所に貼り付けます。
その際に半角スペースが2つ連続して入らないように調整してください。表示がうまくいかなくなる場合があります。

<表示サンプル>

2.スタイルを設定したボックスで囲ってレスポンシブにする【おすすめ】

ウィジェットビルダーの[サイズ]ドロップダウンメニューから[カスタム]を選択し、幅を1920に設定します
当ブログで使用しているテーマ「SWELL」、無料テーマの「cocoon」で検証したところこのコードを貼り付けるだけでレスポンシブ表示されました。

もしそのままでは画面からはみ出してしまう場合は、下のコードを追加してください。

<div class="pin-responsive-wrapper">
<div class="board-wrapper">
<!-- ここにコピーしたウィジェットコードを入れてください -->
</div>
</div>

さらに「外観」→「カスタマイズ」の「追加CSS」に下記のコードを貼り付けましょう。

.pin-responsive-wrapper {
width: 100%;
margin: auto;
}
.board-wrapper {
margin: auto;
text-align: center;
}
.board-wrapper span {
overflow: hidden;
max-width: 100%!important;
}

<表示サンプル>

ブログやWEBサイトにピンタレストを埋め込んでみよう

さっそくピンタレストの「埋め込み」で自分のサイトに投稿を表示させてみましょう。
新しいフォロワーの獲得に繋がったり、ピンをしてもらえれば画像からの拡散とサイトへの集客が期待できます。
早速設定をしてみてくださいね。

\この記事が気に入ったらピンしてみてくださいね/

ピンタレストをWEBサイトにレスポンシブに埋め込む方法

\30日間無料体験/
Kindle unlimitedなら、ピンタレストの攻略本も読み放題の対象!
30日以内に解約すれば無料で読めますよ。

created by Rinker
¥1,980 (2021/10/22 15:48:28時点 Amazon調べ-詳細)
kindle unlimitedの読み放題対象です
created by Rinker
¥1,650 (2021/10/22 16:23:14時点 Amazon調べ-詳細)
よかったらシェアしてね!

コメント

コメントする

CAPTCHA


もくじ
閉じる