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

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

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

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

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

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

ピンウィジェット

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

ボードウィジェット

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

＜表示サンプル　サイズ：四角＞

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

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

＜表示サンプル　サイズ：サイドバー＞

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

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

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

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

生成したコードから、幅に関する設定を削除してしまう方法です。
この部分を削除して貼ることで簡易的なレスポンシブ表示ができます。
ただしこの方法では表示領域が広くなると、幅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>

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

＜表示サンプル＞

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

ウィジェットビルダーの[サイズ]ドロップダウンメニューから[カスタム]を選択し、幅を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サイトにピンタレストを埋め込んでみよう

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

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