áit áthasach, Ireland

WEBライターが子育てをしながら人生を豊かにする情報をお届け【30代からの資産構築や心の豊かさについて】

はてなブログにおけるインスタ画像の活用法や【Bad Requestの対処法】

記事の最終更新日:2018年9月17日

 

こんにちは★Maroonです。最近このブログではインスタ画像を多く使うようになりました。実は、はてなブログに載せるときはいくつかの注意点があり、それを守れば「Bad Request」を回避できます。そこで今回は、はてなブログにおけるインスタ画像の活用法と「Bad Request」の対処法を同時にご紹介したいと思います。

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

目次

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

インスタグラムを使うとスマートフォン撮った画像をすぐ編集できます。今までは「GIMP」というソフトを使用してPCで画像編集をしていたので、長時間机に向かわなければならず、姿勢も悪くなるし腰は痛いし。。。でも、最近はインスタ画像を使うようになったおかげで、ベッドに寝転がったままや、家族とソファーで団らんをしながらできるので「話題」にもなって楽しいです。

 

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

画像が「とても軽い」のでたくさん貼ってもサクサクとページをダウンロードさせてくれるのがとても嬉しいです。しかも画像編集がとても簡単で、それでいて可愛い加工ができるので気に入っています!編集の仕方によっては、デジカメで撮ったのと変わらないようなクオリティーに仕上げることもできます。ブロガーにとっては本当にありがたい存在。

 

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

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

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

 

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

 

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

 

 

2. 一番上に表示されるコード必ず選択して、「コメント」を入れたくない場合は、チェックボックスを外します。最後に一番下の「埋め込みコードをコピーする」ボタンを押します。(私は海外在住なので英語バージョンに切り替わってしまっているため、英語の表記になってしまっていますが、順番は日本語版でも一緒です)

 

 

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

 

3.はてなブログのHTML編集画面にコードを貼り付けます。

 

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

 

 

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

 

 

この方法でも一応ちゃんと表示はされますが、禁止されているscriptタグが含まれているので、自動でタグを消去される場合もあります。この方法だとコメント部分を省いた状態で貼り付けられるので、便利といえば便利ですがイチかバチかの賭けとも言えます。ちなみに、エンベッドでコピペしたコードからScriptタグのみを消去するとどうなるのか気になったので、やってみました。その結果がこちら↓ 

 

 

 

A post shared by maroon (@maroon_ireland) on

 

 

画像がまったく何もない、空白になってしまいます。この解決法として下のように貼り付けたいインスタ画像アドレスをコピーして、リンクとして貼り付ける方法がありますが、その場合は余白が多すぎて見た目が悪いです。

 

 


 

もともと「タグやコメントが多い画像」を使用すると、画像の下の余白が多くなってしまうので、気になる人は「タグやコメントが少な目の画像」を使用しましょう。編集画面で見ると、画像が途中で切れてしまいますが、プレビュー画面で確認すると、ちゃんと表示されます。

 


 

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

 

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

詳しい理由は「はてなブログガイドライン」にある「禁止事項」に記載されてあります。どうやら、Scriptタグを悪用して”変なもの”を配布する人がいるようです。そのため、特に悪気のないインスタグラムのScriptタグでも自動的に「Bad Request」になってしまうことがあるようです。

 

help.hatenablog.com

 

 

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

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

 

こういう時は、一呼吸して一度前の画面に戻り、文章だけでもコピペして救出しておきましょう。そして、次に、「HTML編集画面」に行き、そこに「Scriptタグ」がないかを確認します。もし見つけたら、そこが原因です。

 

前述のエンベッドによる画像の貼り付けを行うと「Scriptタグ」になってしまうので、上記の方法で全部リンクを貼り付けし直します。実際に私もこの方法で「Bad Request」になってしまった記事を救出することができました!

 

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

自分のインスタ画像を使用する場合は、

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

 

 

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

 

この方法だと、コメントやタグが表示されないのですっきり見えます。また、画像の下に自分で作成したキャプションやタグが表示されますが、それらを消して自分のインスタのID名のみを表示させることもできます。表示したい場合は「Instagram@maroon_ireland」のように、画像の下に表示し、自分のインスタに飛ぶようにリンクを貼ります。それが面倒という方は、画像をクリックしたけで本人のインスタページに飛ぶようになっているので心配は要りません。

 

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

Instagram@maroon_ireland

 

 

 

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

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

 

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