imgurにアップロードされている画像やgif画像を埋め込みで張り付けようとしたら
何度やっても上手くいかない。
CSSやHTMLの知識ゼロですが
何とか解決したので一応imgurの埋め込み手順も含め備忘録として残しときます。
[outline]
imgur埋め込みの手順
Imgur: The most awesome images on the Internetまで行って目的の画像を探します。
目的の画像をクリックして開き右下に画像の①をクリック
開いた中の②を押すと次の画像のページが開きます。
開いたら③の埋め込みコードが出てくるので、そちらをコピーしてサイトに貼る。
埋め込みの手順はこんなもんです。
それで次の画像見て欲しいのですが
赤線には
あなたのブログ、ニュースサイト、またはウェブ上の他の場所にこの投稿を含めてください！
と書いてあります。こう書いてあると安心して貼れるからうれしいですね。
それと基本、自分の画像をアップロードしてシェアしたいとかじゃない限りアカウントを取得する必要はないと思います。
この埋め込みが上手くいかなかった時にやったこと
埋め込めない
なぜ？
貼り付け後ページを移動して戻ってみるとコードが変化してしまう
前述した方法で埋め込みコードを取得しブログのHTML編集に貼り付けます。
貼り付け後にプレビューで確認するとうまく埋め込められてないので
貼ったコードを確認する為にHTML編集に戻る
すると
あれ？なんか変わってる…なんで？HTML知識ゼロの俺にはさっぱりわかりません。
詳しい方、ご教授願います。
他の画像で試してみる
他の画像で試してみると、なぜか上手くいく
gifだから？とも思い他のgifでも試したところ、上手くいきました。
求めているgifの埋め込みが上手くいかない。
埋め込み可と不可のコードを比較
とりあえず、コードを比較してみました。
黒枠の上が成功したgifのコード、下が失敗のコード
比べてみると、赤下線のタイトルの様なものと、黄下線の部分の記号が足りないことがわかりました。
足りない部分を足してみる
タイトルの様なものと記号を追加してみました。すると
出来た！
上手くいきました！
まとめ
なぜコードに欠損部分があるのかは、まったくわかりませんw
しかし、多分ですが、元の画像のタイトルが上手く反映されなくてコードの生成が上手くいってないだけかもなぁと思いました。
まぁ何にせよ自力で解決できたから良しとしよう。
もし詳しい方いらっしゃったらご教授ください！
コメント