GoaHead

MUSIC / MOVIE / WORKOUT / THOUGHT / ...A bit PRIVATE

【Embed】imgurのリンク埋め込みができない時の対処法【失敗】

f:id:gothamz:20170808104459j:plain

photo by  Imgur: The most awesome images on the Internet

 

 

imgurにアップロードされている画像やgif画像を埋め込みで張り付けようとしたら

何度やっても上手くいかない。

CSSやHTMLの知識ゼロですが

何とか解決したので一応imgurの埋め込み手順も含め備忘録として残しときます。

 

imgur埋め込みの手順

Imgur: The most awesome images on the Internetまで行って目的の画像を探します。

f:id:gothamz:20170808092959j:plain

目的の画像をクリックして開き右下に画像の①をクリック

開いた中の②を押すと次の画像のページが開きます。

f:id:gothamz:20170808093045j:plain

開いたら③の埋め込みコードが出てくるので、そちらをコピーしてサイトに貼る。

埋め込みの手順はこんなもんです。

それで次の画像見て欲しいのですが

f:id:gothamz:20170808093350j:plain

赤線には

あなたのブログ、ニュースサイト、またはウェブ上の他の場所にこの投稿を含めてください!

と書いてあります。こう書いてあると安心して貼れるからうれしいですね。

それと基本、自分の画像をアップロードしてシェアしたいとかじゃない限りアカウントを取得する必要はないと思います。

 

 

この埋め込みが上手くいかなかった時にやったこと

埋め込めない

なぜ?

貼り付け後ページを移動して戻ってみるとコードが変化してしまう

前述した方法で埋め込みコードを取得しブログのHTML編集に貼り付けます。

f:id:gothamz:20170808094645p:plain

貼り付け後にプレビューで確認するとうまく埋め込められてないので

貼ったコードを確認する為にHTML編集に戻る

すると

f:id:gothamz:20170808094843p:plain

あれ?なんか変わってる...なんで?HTML知識ゼロの俺にはさっぱりわかりません。

詳しい方、ご教授願います。

他の画像で試してみる

他の画像で試してみると、なぜか上手くいく

gifだから?とも思い他のgifでも試したところ、上手くいきました。

求めているgifの埋め込みが上手くいかない。

埋め込み可と不可のコードを比較

とりあえず、コードを比較してみました。

f:id:gothamz:20170808101255j:plain

黒枠の上が成功したgifのコード、下が失敗のコード

比べてみると、赤下線のタイトルの様なものと、黄下線の部分の記号が足りないことがわかりました。

足りない部分を足してみる

f:id:gothamz:20170808102848j:plain

タイトルの様なものと記号を追加してみました。すると

 出来た!
Daredevil puppy's latest stunt
yeahhhhhhhhhhhhhhhhhhhhhhh hhhhh

上手くいきました!

まとめ

なぜコードに欠損部分があるのかは、まったくわかりませんw

しかし、多分ですが、元の画像のタイトルが上手く反映されなくてコードの生成が上手くいってないだけかもなぁと思いました。

まぁ何にせよ自力で解決できたから良しとしよう。

もし詳しい方いらっしゃったらご教授ください!