Bloggerカスタム

ブログにインスタの画像や動画を埋め込む方法

過去にYoutube、Twitterのメディア埋め込み方法を記事にしていますが、今回はインスタグラムです。

最近は企業なんかも使っていたりしますよね。

広まっていけば今後も埋め込みする機会があるでしょうから、備忘録も兼ねてインスタの画像と動画を埋め込む方法について解説していきます。

カスタマイズなんかも少しだけ。

インスタのメディア埋め込み手順

写真・動画とも方法は一緒です。

１.メディアを選択して開く

そのままです。埋め込みたいメディアを開きましょう。

ログインしてなくとも大丈夫です。

２.右下の「…」をクリック

今回は某芸人さんの動画をお借りしてご説明させて頂きます。

３.「埋め込み」をクリック

４.「埋め込みコードをコピー」をクリック

「埋め込みコードをコピー」をクリックすると、「コピーされました」と表示が変わります。

「キャプションを追加」についてはもうちょっと下でご説明します。

５.コピーしたコードをブログに貼り付け

Bloggerの場合、「HTML」モードで貼り付けます。

貼るだけならこれだけで終了です。

#舐め猫 #猫

徳井 義実さん(@tokui_yoshimi)がシェアした投稿 - 2015年 5月月29日午前1時24分PDT

ちゃんと貼れてますね？


ちなみに、「キャプションを追加する」のチェックを外すと？

この状態でコードをコピペすると

徳井 義実さん(@tokui_yoshimi)がシェアした投稿 - 2015年 5月月29日午前1時24分PDT

ハッシュタグやコメントへのリンクが無い状態のものを貼ることが出来ます。

簡単なカスタマイズ

サイズを変更する

なんか、ブログの表示領域に比べて動画のサイズ感大きく感じませんか？

これを小さくする方法です。

もちろん、同じ手順でさらに大きくすることも可能です。

コードに「max-width:540px」となっている部分があります。

※数字は動画によって違うかも？

ここで大きさの調整をします。

今回は400くらいにしましょうか。

徳井 義実さん(@tokui_yoshimi)がシェアした投稿 - 2015年 5月月29日午前1時24分PDT

ちっちゃくすることに成功しました。

中央揃えにする

このままコードを貼ると左揃えになって見映えが悪いというか気持ち悪いので、メディアを中央に持ってきたいと思います。

いつもの「align="center"」をどこかに追加すればいいんじゃ、ということは分かっていたのですが、どうも上手くいかなかったので全体を囲んでしまいます。

具体的には、

<div align="center">
ここにインスタのコードをコピペ
</div>

という感じでコードを挟みます。

これで、以下のようになります。

徳井 義実さん(@tokui_yoshimi)がシェアした投稿 - 2015年 5月月29日午前1時24分PDT

希望通り中央にメディアを持ってくることが出来ました！

もちろん無理に中央揃えはする必要はないので、気になる方だけ。

大きさは各人で色々調節してやってみて下さい。

スポンサーリンク

　　　　　　　　　　　 　　　　　　　　　　　　 あなたにおすすめの記事