インスタグラムの画像をはてなブログに貼るのは簡単だった!はてなブログにインスタ画像を貼ろうとしても、自分のものはできるけれども他の人のものはうまくできず苦労した経験はありませんか?スクリプトの問題でHTMLで埋め込もうとしてもなかなかできない人へおすすめの方法を紹介します。
- インスタ画像を貼れなくて四苦八苦……でもやってみたら簡単だった
- はてな記法マジ便利!ちょっとした操作で簡単に画像を貼れた
- :embedでインスタ画像を貼る方法
- はてな記法も使ってみるもんだと思いました
インスタ画像を貼れなくて四苦八苦……でもやってみたら簡単だった
朝でも昼でもこんばんは、mitakehanです。
他の記事を書いているときにコーデ特集なんかをやりたいなと思い、ならばインスタグラムだ!と意気揚々と調べてみましたが、調べてみると絶望するしかない現実に突き当たりました。
こちらのブログを参考にさせてもらったのですが、インスタグラムの埋め込みコードにはスクリプトタグが入っていて、そのままHTML編集で書き込むと「Bad Request」なってしまうとのこと。
そこで実際にやってみたら画像は何も出ず、まっさらなインスタフレームだけが目に飛び込んできたのです。
HTMLやらスクリプトやらがよくわからない私は、それはもう絶望しうちひしがれてしまったということの運びなのですが、なんとかならないものかと色々と試してみたら一つの方法に行き当たり、結果として次の記事が出来上がりました。
はてな記法マジ便利!ちょっとした操作で簡単に画像を貼れた
様々なサイトを巡回してもなかなかピンとくるものがなく、一周回ってはてなブログのヘルプを見てみました。
こちらは動画を主体にはてな記法について書いているのですがこの中で、
:embed
について触れています。
※動画や画像、音楽などさまざまなコンテンツを「埋め込み」形式で貼り付けることができるのは、それぞれのサイトがoEmbedという仕様に対応しているためです。はてなブログでは、独自に対応したいくつかのサイトに加えて、oEmbedに対応したすべてのサイトを埋め込むことができます。
こういった理由で動画などの埋め込みができるらしいのですが、それならインスタグラムもいけるのでは?と試してみたところ、ある方法であれば:embedで対応できることがわかりました。
:embedでインスタ画像を貼る方法
今回はほとんど稼働していない私のインスタグラムアカウントの画像で試してみます。
まずは[:embed]を使用するにはどうしたらよいのかということですが。
[サイトのアドレス＋:embed]
と、見たままモードで書き込めばよいのですが、そのままアドレスを貼りつけようとしてもリンクが貼られてしまいうまくできません。
インスタグラムの画像をクリックすると出てくる画面です。
この画面の右下に三転リーダのような・・・というマークがありますが、それをクリックしてください。
そうすると次に「投稿へ移動」「埋め込み」「Copy Link」「キャンセル」という項目が出てきます。
この中で「Copy Link」をクリックするとブログに貼り付けられるリンクアドレスがクリップボードにコピーされるので、そのリンクアドレスの後に:embedを書き込みます。
そうすると、
フォロワー0人という不名誉な情報も含めて、ちゃんとインスタ画像を載せることが出来ました。
ちなみにフォローされても画像投稿しないのだからいいんですが、なんだか少しだけ寂しい気分になってしまうのはここだけの秘密です。
このはてな記法で画像を貼りつけると見たままモードでは文字しか見れませんので、リンク書き込み後はプレビューを確認してください。
サイトアドレスをコピーしても出来る模様
先ほどのはてなブログヘルプには、
URLをペーストするだけで「リンクを挿入」ウィンドウが開くのを止めたいときには、ウィンドウ内の「URLを貼り付けたときにこのウィンドウを開く」というチェックを外してください。次回から、URLを貼り付けても「リンクを挿入」ウィンドウを表示しなくなります。 いったん非表示にした後で、リンク挿入機能を利用したいときには、上記のように入力補助ツールバーの「リンク」ボタンから「リンクを挿入」ウィンドウを表示してください。この際、上記のチェックを入れ直すと、また自動で表示できます。
と、記載されています。
見たままモード上部にあるリンクのアイコンをクリックし、右下にある該当箇所のチェックを外すとリンクに繋げずにそのままペースト出来るようなので試してみた結果が下部になります。
ちゃんと出来ました。
個人的にはリンクアイコンをクリックしないでリンクを貼れるのが楽なので、初めの方法を活用したいところですが、こちらのやり方の方が楽な場合もあるかと思いますので後は好みの問題といったところでしょうか。
自分のインスタグラム画像を活用したい人におすすめのブログ
自分のインスタグラム画像を貼りたい人用の記事も書こうかと思いましたが、なにしろフォロワー0人なのでそれを試す気がないのがいかんともしがたいところ。
むしろ記事内に自分の画像を貼るのは、はてなブログとインスタグラムを連携させればそれで済むので難しいことはないことにもいまさらながらに気が付きました。
というわけでインスタグラムをもっと便利に活用する方法を、他のブロガーさんが書いている私が書くより圧倒的にわかりやすいブログを紹介します。
サイドバーにインスタ画像を埋め込む方法
はてな記法も使ってみるもんだと思いました
以上、本当に簡単な他の人のインスタ画像を貼る方法でした。
コードをペーストするだけならHTMLでいいだろうとはてな記法はいままで使ったことがなかったのですが使ってみると意外と楽で、このブログではファッション関係の記事が多く、コーディネートについてそろそろ語りたいと思っていたのでかなり助かりました。
他にも何か方法がありましたらぜひ教えていただけると幸いです。
コメント