インスタ動画の埋め込み方法は、大きく二つの所作に分かれます。
はじめに、インスタグラム側を操作して、動画のコードをコピー
次にブログ側を操作して、コピーした動画のコードを記事へ貼り付けます
ご留意いただく点として、犬猫の記事は動画のコードを貼り付ける場所が決まっています。
もろもろご説明していきます。
インスタグラム側の操作
必ずブラウザ版のインスタグラムで操作します
普段利用している、アプリ版のインスタでは正しい方法で行えません
① インスタをブラウザで開く
スマホの場合
ここではiPhoneの画面で説明していきます。
見た目が少し変わりますが、アンドロイドも操作方法は同じです。
まず、インスタグラムをブラウザ（クロームやサファリなど）で開きます。
PCの場合と同じように、ブラウザでインスタグラムを開きますが、スマホの場合はページリンクをクリックするとアプリ版が起動してしまいます
アプリ版が開かないよう、リンクを長押しします
長押しすると、下の画像のようなメニューが開きますので、新しいタブで開く選択をします
【新しいタブで開く】iphoneの場合
【新しいタブをグループで開く】Androidの場合
【新しいタブで開く】を選択すると、新たに別のタブウィンドウができ、そこにブラウザ版のインスタグラムが開いています
下の画像のように、新しいタブはiPhoneでもAndroidでも、画面の下に表示されます
画像では2つのタブがある状態です
タブをクリックします
タブをクリックすると、下の画像のようなタブの詳細画面へと切り替わりますので、インスタが開いているタブをクリックします
インスタがブラウザで開くと、画面下にアプリ切り替えの選択肢が現れます
ここで、【アプリに切り替える】をクリックしてしまうと、最初からやり直しになりますので、クリックしないでください
選択肢はそのままにしておいてもいいですし、【後で】をクリックして消してしまってもいいです
途中、下の画像のようにログインをうながす画面が表示されたら、ログインしてください
ここまでが、準備段階です
次から本題の動画の埋め込みコードのコピーへと進みます
② 動画の選択
インスタをブラウザで開いたら、次に埋め込みしたい動画を選びます
ここでは、チンチラを選びます
チンチラをクリックすると、下の画面が表示されます
右上の3点アイコンをクリックして、メニューを開きます
ポップアップしたメニューの中から、【埋め込み】を選びます
【×リンクをコピー×】は選ばないでください
青いボタンを押して、埋め込みコードをコピーします
【キャプションを追加】のチェックを外してから青いボタンを押すと、動画だけのコードがコピーできます
ここまでで、インスタ側で行う操作は終了です
次にブログ側の操作を行います
ブログ側の操作
動画の埋め込み方です
正しい方法
ブログ側の操作では、【カスタムフィールド】を利用します
【カスタムフィールド】とは、普段から記事を書く際に読み込んでいただいているものです
カスタムフィールドを下にスクロールしていくと、下記のような埋め込みコードを貼り付けるボックスがありますので、そちらへ埋め込みコードを貼り付けます
貼り付けるボックスがコードに対して小さいですが、気にせずに貼り付けてください
コードは【埋め込みコード】でないと、ここへ貼り付けても表示されません
【リンクをコピー】で取得したコードは、貼り付けても、動画は表示されません。
誤った方法でも表示できてしまう場合がありますのでご注意ください
カスタムフィールドに埋め込みコードを入力した際には、自動的に動画が記事の最初に配置され、動画を一番にアピールするように設計されています
しかし、システムの仕様上、本来の方法とは異なる、【リンクを貼り付け】を選択したコードでも、同じことができてしまいますので、ご注意ください。
読込時間が長くなってしまうことがあります。
鳥や小動物は、本文中に埋め込みコードを貼り付けることができます
ブログ側の操作では、まずはいつも通りに新規投稿を開きます
動画の埋め込みは、【テキスト】ボタンを押した後、コード用の画面から行います
【テキスト】を押してから、先ほどコピーした埋め込みコードを記事の好きな場所に貼り付けます
動画の埋め込みはこれで終了です
後から文章を入れるときは、動画の上下に入れることができます
貼り付けたコードのかたまりの、上か下に文章を入れてください
コード用の画面では編集がやりにくい場合は、【テキスト】の横の【ビジュアル】を押して、コード用の画面を元に戻してから編集をしてもかまいません
先ほどの記事を公開をすると、このように表示されます
犬猫は本文中に動画を貼り付けできません
犬猫の記事は特殊な設計になっていますので、本文中に動画を貼り付けると、見た目にも大きな違いがでます。正しい位置と誤った位置はこのような違いです
左が正しい位置、右が誤った位置です
読込時間に違いが出る可能性があることが問題ですので、必ず【埋め込みコード】を貼り付けるようにしてください