はてなブログにインスタグラム画像を載せる時の注意点とBad Requestについて

f:id:kosodate-blog-ireland-mama:20171009050826j:plain

【最終更新日:2019年6月20日

最近、ブログでインスタグラムの画像を使用する人が増えています。実は、はてなブログにインスタ画像を載せるときはいくつかの注意点があり、それを守れば「Bad Request」などを回避できます。今回は、はてなブログにおけるインスタグラムの活用法と「Bad Request」の対処法をご紹介します!

 

目次

インスタグラムを使うと画像編集が楽しくなる!

インスタグラムを使うとスマートフォン撮った画像をすぐ編集できます。

 

今までは「GIMP」というソフトを使用してPCで画像編集をしていたので、長時間机に向かわなければならず、姿勢も悪くなるし腰は痛いし。。。

 

しかし、最近はインスタグラムの画像を使うようになったおかげで、ベッドに寝転がったままでも、画像編集が出来てしまうので、とても便利です。

 

インスタグラムはブロガーの大いなる味方

インスタグラムの画像は、とても軽いので、たくさん貼ってもサクサクとページをダウンロードさせてくれるのがとても嬉しいです。

 

しかも画像編集がとても簡単で、可愛い加工ができるので気に入っています!編集の仕方によっては、デジカメで撮ったのと変わらないようなクオリティーに仕上げることもできます。ブロガーにとっては本当にありがたい存在です。

 

 

はてなブログ」でインスタグラム画像を使うときの注意点:「タグの表示」

他人のインスタグラム画像を使う場合

他人のインスタグラム画像を使用する場合、エンベッドをコピーしてタグに書き込む方法があります。この方法の手順を説明します。

 

  1. インスタグラムの検索ボックスにキーワードを入力します。
  2. お気に入りの写真が見つかったらクリックして、写真の元のページに飛びます。
  3. ページ右下の「・・・」の部分をクリックすると3つ選択肢が出るので、その中から「埋め込み」ボタンをクリックします。

 

f:id:kosodate-blog-ireland-mama:20180411061810j:plain

4. 一番上に表示されるコード必ず選択して、「コメント」を入れたくない場合は、チェックボックスを外します。

 

5. 一番下の「埋め込みコードをコピーする」ボタンを押します。(写真は英語版です)

 

 

f:id:kosodate-blog-ireland-mama:20180411062238j:plain

 

6.はてなブログのHTML編集画面にインスタグラムのコードを貼り付けます。

 

f:id:kosodate-blog-ireland-mama:20180411062639j:plain

 

この方法でも、大丈夫な場合があります。特に気にしない人はこの方法でも大丈夫だと思います。

 

※しかし、この方法だとscriptタグを必ず使用しなくてはなりません。はてなブログscriptタグの使用を禁止しているので、テーマによっては上手く表示できなかったり、「Bad Request」と言って記事が保存できない状態になってしまいます。

 

 Scriptタグを使用した場合のデメリット

この方法でも一応ちゃんと表示はされますが、禁止されているscriptタグが含まれているので、自動でタグを消去される場合もあります。

 

この方法だとコメント部分を省いた状態で貼り付けられるので、便利といえば便利ですがイチかバチかの賭けとも言えます。

 

ちなみに、エンベッドでコピペしたコードからScriptタグのみを消去するとどうなるのか気になったので、やってみました。その結果がこちら↓ 

 

 

 

A post shared by maroon (@maroon_ireland) on

 

 

画像がまったく何もない、空白になってしまいます。

 

インスタ画像を貼り付ける際に、Scriptタグを使用しない方法は?

上記の問題の解決法としては、以下のような方法があります。

 

1.貼り付けたいインスタグラム画像をクリックして、個別に開いた状態で、アドレスをコピーします。

2.このアドレスを、はてなブログの編集画面(はてな記法)で、リンクとして貼り付けます。

3.コメントが多い画像は、余白が多すぎて見た目が悪くなるので、注意するようにしましょう。

 

 


 

※注意点その1

「タグやコメントが多い画像」を使用すると、画像の下の余白が多くなってしまうので、気になる人は「タグやコメントが少な目の画像」を使用しましょう。

 

はてなブログの編集画面で見ると、画像が途中で切れてしまいますが、プレビュー画面で確認すると、ちゃんと表示されます。

 


※注意点その2 

他人のインスタグラム画像をはてなブログに貼りつけるのはインスタグラムの規約にも書かれてあるとおり合法ですが、サインやコピーライトマークが入ったものは明らかに本人が嫌がっているので、使用をやめましょう。

 

 

そもそも、なぜはてなブログではScriptタグが禁止なのか?

はてなブログで、Scriptタグが禁止されている点において、詳しい理由は、『はてなブログガイドライン』にある「禁止事項」に記載されてあります。

 

どうやら、Scriptタグを悪用して”変なもの”を配布する人がいるようです。そのため、特に悪気のないインスタグラムのScriptタグでも自動的に「Bad Request」になってしまうことがあるようです。

 

help.hatenablog.com

 

 「はてなブログ」でインスタグラム画像を使うときに「Bad Request」がでたら?

はてなブログで編集後に保存しようとしたら、「Bad Request」と表示されたことありませんか?

 

「Bad Request」はかなりの曲者で、一度表示されると、はてなブログ記事が保存できなくなってしまいます。せっかく書いた記事を「下書き保存」したり「公開」しようとしても「Bad Request」が表示されると保存できず、書いたものが全部無駄になってしまうこともあります。

 

「Bad  Request」がでた時の解決法

  1. まずは、一呼吸して、パソコンの「戻る」ボタンで、一度前の画面に戻りましょう。こうすれば、文章だけでもコピペして救出することが可能です
  2. 次に、はてなブログ「HTML編集画面」に行き、そこに「Scriptタグ」がないかを確認します。もし見つけたら、そこが原因です。CtrlキーとFキーを同時に押して検索すれば、すぐに見つかります。
  3. 前述のエンベッドによる画像の貼り付けを行うと「Scriptタグ」になってしまうので、上記の方法で全部リンクを貼り付けし直します。

実際に私もこの方法で「Bad Request」になってしまった記事を救出することができました。ぜひ、試してみてください。

 

 

自分のインスタグラム画像を使用する方法

自分のインスタグラム画像を使用する場合

 

  1. まず初めに、はてなブログ「見たまま編集画面」のサイドバーにある「追加ボタン」をクリックします。
  2. その後Instagram 貼り付け」アイコンを選び追加します。
  3. そこを押すと自動的に自分がアップしたインスタグラム画像が表示されます。
  4. その中から好きなインスタグラム画像を選び「選択したアイテムを貼り付け」ボタンを押します。

この方法で簡単に自分のインスタグラム画像を、はてなブログに表示させることができます。

 

 

f:id:kosodate-blog-ireland-mama:20171009044551j:plain

 

この方法では、コメントやタグが表示されないのですっきり見えます。

 

また、画像の下に自分で作成したキャプションやタグが表示されますが、それらを消して自分のインスタのID名のみを表示させることもできます。

 

表示したい場合は「Instagram@maroon_ireland」のように、画像の下に表示し、自分のインスタに飛ぶようにリンクを貼ることも可能です。

 

それが面倒という方は、画像をクリックしたけで本人のインスタページに飛ぶようになっているので心配は要りません。

 

https://www.instagram.com/p/BYotHEVlnx-/

Instagram@maroon_ireland

 

 

 

はてなブログ」でインスタグラム画像を活用しよう!

以上、はてなブログでインスタグラム画像を使用する際の注意点についてご紹介しましたが、いかがでしたか?この方法が全てのケースに当てはまるとは限りませんが、みなさんもぜひ試して見てください。これらを知っておくと、インスタ画像を使用するのが何倍も楽になりますよ!

 

この記事を読んでくださいまして、ありがとうございました。