Blog・SNS

簡単設定!ピンタレストをブログに埋め込む方法(10分で設定できます)

2020-07-05

 

お悩みの人
最近、ピンタレストを始めましたが、自分のブログに埋め込む方法について教えてほしいです。ツイッターのようにブログに埋め込むことはできるのでしょうか?

 

そんなお悩みを解決します。
はげにゃん☆

 

この記事の信頼性

この記事を書いている僕は、下の画像のように、自分のピンタレストをブログに埋め込んでいます。ツイッターと並べて表示させることで、ビジュアル的にもいいかなと思います。

 

※現在はツイッター、ピンタレストの表示を停止しています。

 

今回は、ピンタレストをツイッターのようにブログに埋め込む手順を解説していきます。

 

 

 

それでは始めていきますね。

 

 

ピンタレストをブログに埋め込む手順

 

 

手順は以下の通りになります。

 


  • step.1

    Pinterest Developersにアクセス・必要事項の入力


  • step.2

    コードの取得・ブログに設置


  • step.3

    動作確認・表示サイズのカスタマイズ


 

1つずつ解説していきますね。

 

【STEP1】 Pinterest Developersにアクセスし・必要事項の入力

 

まずはPinterest Developersにアクセスし、Toolsを選択します。

 

 

すると下のような画面になります。1つずつ設定、入力していきましょう。

 

 

プロフィールを選択します。

『Pinterest ユーザーの URL』は、ご自分のURLを入力します。

『サイズ』は四角を選びます。

ここのコードをメモ帳などにコピーします。(アフィンガー5であれば、ウィジェットのカスタムHTMLで使用します)

ここのコードをメモ帳などにコピーします。(コードの貼り付け方法はあとで説明します。)

 

【STEP2】コードの取得・ブログに設置

コピーした上記画像ののコードを、ピンタレストを表示させたいウィジェットに貼り付けます。

今回は、アフィンガー5のウィジェットで説明していきます。

 

アフィンガー5は初心者の僕でもご覧のレイアウトを作成できる、優れたワードプレステーマです。

 

参考記事もご覧ください。

 

参考記事
ブログ3か月の初心者がアフィンガー5にテーマ変更してみての感想!

続きを見る

 

 

 

下の画像で説明していきますね。

 

 

ワードプレスの管理画面から、『外観』→『ウィジェット』→『フッター右用ウィジェット(2列目)』を選択します。

『00_STINGERカスタムHTML』を『フッター右用ウィジェット(2列目)』までドラッグ&ドロップします。

タイトルをPintarestと入力。内容に上記の画像でコピーしたコードを貼り付けます。貼り付けた後、忘れずに完了をクリックしておきましょう。

 

次に、上記画像でコピーした下のコードを貼り付ける手順を説明していきますね。(アフィンガー5のケース)

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

 

 

ワードプレスの管理画面から、『AFFINGER5管理』→『その他』を選択。

下にスクロールすると、『</>コードの出力』の部分に、『</body>直前に出力するコード』というスペースがあります。

このスペースにでコピーしたコードを貼り付けます。

 

 

注意ポイント

アフィンガー5の親テーマ又は子テーマのphpファイルを操作してコードを追記することもできますが、phpファイルを誤って削除したり、ファイル内のデータを消去してしまう恐れがあるので、初心者の方にはおすすめできません。

 

アフィンガー5であれば、上記手順により、カンタンにコードの追加が出来ます。

 

アフィンガー5の公式ページ

 

【STEP3】動作確認・表示サイズのカスタマイズ

 

設定が終了した後は動作確認をしましょう。うまく表示されているでしょうか?

 

もしも、表示されていないようであれば、もう一度この記事を見て、手順通りに設定、入力しているかどうか、ご確認ください。

 

表示サイズはカスタマイズすることができます。僕はフッターエリアに配置しているので、のコードを以下のように設定しています。

 

data-pin-board-width="700"

data-pin-scale-height="600"

data-pin-scale-width="115"

 

高さや幅はお好みで調節してください。

 

他のテーマを使用されている方も、おおむね同様の手順で設置できると思います。

 

ピンタレストは便利なツール・著作権にはご注意を

 

 

ピンタレストはツイッター、インスタグラム同様に便利なSNSツールです。上手に使いこなせば、個人でも、ビジネスでも大いに役立つことでしょう。

 

しかし、著作権については非常にグレーゾーンであるため、僕も自分のサイト紹介、オリジナルな言葉以外のピンはブログでは掲載していません。

 

今後は著作権についても明確な基準が設けられるかと思います。ご利用される方はご注意ください。

 

万一、莫大な金額を請求されたらと思うと、コワくて髪の毛も抜け落ちそうです(笑)

 

今回は以上になります。最後までお読みいただき、ありがとうございました。

 

 

-Blog・SNS