読者です 読者をやめる 読者になる 読者になる

としやの Blog

単なる日記です。子どもたちが大きくなったら読み返す予定。

ブログへInstagram(インスタグラム)動画を貼り付ける方法と表示サイズの変更方法

ブログ

スポンサーリンク

このブログでは動画を貼ることもあります。
すてきな文章で子どもたちの様子を表現したい気持ちもありますが、自分の力不足もあり、動画のほうが僕の言葉以上に伝わるものがあると思います。
ちょっとした仕草、表情、時間が経てば忘れてしまいそうな今の姿。
なかなか騒がしい毎日ですが、将来振り返るときいろいろ思い出せればいいなと、携帯で切り取れるように心掛けています。*1
そして時間が許せばブログに残そうと、勤しんでおります。
3人の子育ては自由な時間をなかなか許してくれませんし、家族以外にはよく分からない状況も多いです。
それでも家族以外の読者もいてくれたり、スターをもらったりするのも続ける励みになっています。
 
表題の件に戻りますが、以前よく利用していたのはVine(ヴァイン)です。
前にVine動画の投稿方法をご紹介したこともありました。
最近ではInstagram(インスタグラム)を使うことが多いです。 
Instagram

Instagram

  • Instagram, Inc.
  • 写真/ビデオ
  • 無料

それは投稿できる時間がVineの6秒に対してInstagramだと15秒と長いことと、複数動画を編集することがあまりないことが理由でした。

最近(2016年3月)、Instagramに投稿・再生できる動画時間は最大15秒から最大60秒まで延長されると発表されました。
15秒だと少し短い、、30秒ぐらいあればいいのにと思ったこともありました。
60秒は長過ぎるかもしれないですけど、ちょっとした説明動画にも使えるくらいになりました。
iOS版のアプリだと複数の動画をまとめることもできますし、写真と同様に動画にもフィルターが適用できますから、ほとんどの方はインスタだけで十分になったかもしれません。

 

はてなブログ投稿画面からの方法

 
このブログが利用している”はてなブログ”での方法を紹介します。
 
(事前準備)
・自分のInstagramアカウントを用意して、動画や写真を投稿する
(iOSは こちら からDL。Androidは こちら からDL。)
・はてなブログの「アカウント設定」の「外部サービス連携」(http://blog.hatena.ne.jp/-/config/external)より「Instagram連携設定」を「有効にする」を設定
 
(投稿画面での貼り付け方)
・画面右側の「+(追加)」ボタンをクリック

f:id:fakeplastictrees:20160403000951p:plain

・「編集サイドバー」の中より「Instagram貼り付け」をクリック

f:id:fakeplastictrees:20160403001009p:plain

・投稿済みのものから動画や写真を選択して貼り付けます

f:id:fakeplastictrees:20160403001033p:plain

 
実はこの投稿方法だとPCで見た時、写真や動画の表示サイズがかなり大きくなります。
気にならない方や大きく見せたい方はこのままでいいと思います。

f:id:fakeplastictrees:20160403001050p:plain

写真の場合、「見たまま編集」で画像端部をドラッグして小さくできますが、動画はドラッグでのサイズ変更はできません。

f:id:fakeplastictrees:20160403001107p:plain

スマートフォンで見た時はスマホの幅に合わせてリサイズしてくれるのでいいのですが、PCで大きな表示の動画を貼るのは個人的にはちょっと気が引けます。
 

動画の表示サイズを変えて投稿する方法

InstagramのPCサイト(https://www.instagram.com/)より「埋め込みコード」を取得して貼り付ける方法です。
貼り付けたコード中にあるblockquoteタグの最大幅(max-width)を変更することで表示サイズを変更できます。
また”はてなブログの投稿画面”からのInstagram貼り付けは、自分が投稿した動画や写真しか貼り付けできませんが、PCサイトからだとフォローしている人など他の方のものも引用・貼り付けできます。
 
https://www.instagram.com/にアクセスしてインスタグラムにログインします
・貼付けしたい写真・画像の右下「…」をクリックします

f:id:fakeplastictrees:20160403001242p:plain

・「埋め込み」をクリック

f:id:fakeplastictrees:20160403001313p:plain

・「埋め込みコードをコピー」をクリック(クリップボードに記憶されます)
 
・ブログの投稿画面で「HTML編集」に変えて、記事内の貼りたい場所で貼り付けをします。

f:id:fakeplastictrees:20160403001337p:plain

・(動画のサイズを変えたい時)blockquoteタグのstyle属性の中に「max-width:658px」などと記されている部分がありますので数字の部分を変えます。(”658px”→”300px”などに変えると小さく表示できます)

f:id:fakeplastictrees:20160403001358p:plain

 
前述しましたが動画の時間が最大60秒となりましたので、短い時間の動画であればYoutubeの代わりとしても、使いやすくなったんじゃないかと思います。もし参考になれば幸いです。
 
最後に比較用にそのまま貼り付けた動画と300pxにして小さく表示したものを貼り付けておきます。(※スマートフォンでは同じものに見えるかもしれません)
 
そのまま貼り付けたもの(max-width:658px)
 

toshiyanoさん(@toshiyano)が投稿した動画 -

 
動画の表示サイズを縮小したもの(max-width:300px)
 

toshiyanoさん(@toshiyano)が投稿した動画 -

*1:このブログは将来の自分、家族のために書いているものでもあります