PR

インスタグラムをブログの記事に貼り付ける方法!横幅の指定や画像だけの表示方法も詳しく

簡単に写真や動画をシェアできるインスタグラム。

今回は、インスタグラムのブログへの貼り付け方、横幅の指定の仕方やキャプション(説明文)を非表示にして画像だけ表示する方法を一緒に見ていきましょう

インスタグラムの貼り付け方

ワードプレスでは、ブログの記事にインスタグラムの投稿を貼り付けるには、カスタムHTMLブロックを使い、そこにインスタの埋込コード貼り付けます。

※)以前はURLを貼り付けるだけで良かったですが、セキュリティの関係上、それはできなくなってます。

まずは貼りたいインスタの埋込コードを取得します。

1)埋め込みコードの取得

まず貼り付けたいインスタを表示して、右上のメニュー「・・・」をクリック!

↓↓↓↓↓↓
メニューが表示されるので「埋め込み」を選択

↓↓↓↓↓↓
「埋め込みコード」が表示されるので
「埋め込みコードをコピー」をクリック!

以上でインスタの埋込コードの取得は完了です。
続いて、このコードをワードプレスのカスタムHTMLブロックに貼り付けます。

2)カスタムHTMLに貼り付ける

では、続いてカスタムHTMLを入れていきましょう。

  • ①:「+」マークをクリック
  • ②:「カスタム」で検索
  • ③:「カスタムHTML」をクリック

↓↓↓↓↓↓
カスタムHTMLが表示されるので、
そこに先ほど取得したインスタの埋込コードを貼り付け。

以上で、インスタの貼り付けは終わりです。
簡単ですね。

カスタムHTMLブロックのメニューに「プレビュー」があるので、それを選択すると、実際の表示も確認できるようになってます。

画像だけ表示する方法

インスタで、コメントを表示せず、画像だけを表示したい、という場合があります。

それも簡単で、「キャプションを追加」のチェックを外し埋め込みコードを取得すればいいんですね。

横幅の調整法

記事の中にインスタを貼ると、「結構デカイ!」って感じる場合もありますよね。

もう少し横幅を小さくしたい、という場合には、以下のように埋め込みコード中の「max-width=xxx」(xxxは指定したい横幅の数値)を変更すればOK。

たとえば、埋め込みコードは最初「max-width:540px」になってると思います。

この数値を、たとえば400pxとかにすると、少し横幅が小さくなります。

数値を少し変えてみて、カスタムHTMLブロックのメニューの「プレビュー」で大きさを確認してみる、などしていけば良いですね。

インスタグラムを貼り付けまとめ

インスタグラムをブログの記事に貼り付けるには、

  • 1)インスタの埋込コードを取得する
  • 2)カスタムHTMLに貼り付ける

埋め込みコードを取得する、というのが最初分かりづらいかもしれませんが、1度やってみるとすぐ慣れますね。

またインスタ投稿内のメッセージは表示せず画像だけにしたい場合も「キャプションを追加」のチェックを外すだけで簡単にできます。

注意するのは著作権で、インスタを引用の用途以外で飾りとしてブログの記事に貼り付けると(引用の要件を満たしていないと)、著作権侵害の可能性もあり、記事に貼り付ける場合にはそうした点は注意していきましょう。

ブログでの収益化をはかりたい!というの場合には、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前(全角文字)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!