Imgurで画像URLと埋め込みコードを取得する方法

Imgurは自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。

そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。

Imgurの画像URLを取得する
ウェブでの方法：Direct Link
モバイルアプリでの方法：Copy URL
サイトに画像URLを使って画像を表示する方法
Imgurの埋め込みコードを取得する
サインインの管理画面から：HTML / HTML Image
画像ページのボタンから：Embed Post

Imgurの画像URLを取得するウェブのデスクトップかモバイルとモバイルアプリで方法が違う。ウェブでの方法：Direct Linkデスクトップ：パソコンのImagesから ImgurのウェブのデスクトップのDirect Link／画像URL

Direct Link｜Imgur

モバイル：スマホ／タブレットのImagesから ImgurのウェブのモバイルのDirect Link／画像URL

Direct Link｜Imgur

追記：仕様変更があり、モバイルはアプリでなくては殆ど閲覧しかできないような状態になっている。アカウントにサインイン／ログインして「Image」から画像を一つだけ開く。デスクトップのパソコンの場合は右側のメニューの「Direct Link」、モバイルのスマホ／タブレットの場合は左上のプルダウンメニューの「Direct Link」を選択すると画像URLを取得ことができる。注意点としてはモバイルでは画像URLがjpg（jpeg）のタイプしか出ないみたいだ。なのでpngファイルで画像をアップロードしてもそのままの画像URLは取得できなくてjpgのタイプに変換されてしまっている。ウェブのデスクトップかモバイルアプリだとpngファイルの画像URLが出て来るので、どうしても必要な場合はウェブのデスクトップかモバイルアプリからImgurに入って画像URLを取得する。モバイルアプリでの方法：Copy URL Imgurのモバイルアプリの共有メニュー

共有メニュー｜Imgur

アカウントにサインイン／ログインしてプロフィールの「Posts」から画像を開いて、もう一度、押して画像だけになったところで、右下のシェアボタンからメニューを開いて「Copy URL」を選択すると画像URLを取得することができる。注意点として一回目に開いた画像の説明文のある画面にもシェアボタンと「Copy URL」が全く同じようにあるけれども取得されるのはページのURLになっている。その他、画像の長押しでも同様のメニューが表示されて「Copy URL」から画像URLを取得できる。シェアボタンの場合と異なり、画像の長押しだと画像の説明文が出る方と出ない方のどちらの画面の「Copy URL」でも取得できるのは画像URLになっている。アプリの画像URLはウェブのモバイルと違って画像のファイルはアップロードしたものと同じになっていてjpgファイルはどちらでも変わらないけれどもpngファイルもjpgの画像URLに変換されずに出て来て取得できる。

関連ページ

画像データのjpegとpngの画質の違いとファイルの使い分けについて

サイトに画像URLを使って画像を表示する方法htmlの画像のimgタグのsrc属性に画像URLを入れるのがサイトに画像を表示する一般的なソースコードだ。<img src="画像URL" alt="画像の説明文">alt属性は画像が削除されたり、サーバーの不具合などで表示されない場合に使われる。その他、GoogleやYahoo!などのロボット型の検索エンジンが画像のキーワードを読み取ったりもする。不要ならば記載しなくても画像の表示には影響しない。Imgurの埋め込みコードを取得するアカウントからサインイン／ログインしてもしなくても大丈夫なので、Imgurの画像から誰でも他のサイトに使えるようになっている。サインインの管理画面から：HTML / HTML Imageデスクトップ：パソコンのImagesから ImgurのウェブのデスクトップのHTML／埋め込みコード

HTML｜Imgur

モバイル：スマホ／タブレットのImagesから ImgurのウェブのモバイルのHTML Image／埋め込みコード

HTML Image｜Imgur

追記：仕様変更があり、モバイルはアプリでなくては殆ど閲覧しかできないような状態になっている。ウェブでしか取得できなくて「Image」から画像を一つだけ開くと左上にプルダウンのメニューがあるので、そこから「HTML Image」を選択すれば埋め込みコードが右横に表示されて使うことができる。ウェブでしか取得できなくて「Image」から画像を一つだけ開く。デスクトップのパソコンの場合は右側のメニューの「HTML」、モバイルのスマホ／タブレットの場合は左上のプルダウンメニューの「HTML Image」を選択すると埋め込みコードを使うことができる。デスクトップとモバイルではソースコードが異なっている。前者はhtmlの引用のblockquoteタグに画像ページへのリンクのaタグを付けてJavaScriptで画像を出力する。後者はhtmlの画像ページへのリンクのaタグを付けて画像のimgタグで表示する。ブラウザのJavaScriptがオフでも表示されるし、コードの読み込みも少ないので、デスクトップよりもモバイルの埋め込みコードが方が使い易いだろう。画像ページのボタンから：strong bed Post Imgurのウェブのstrong bed Post／埋め込みコード

strong bed Post｜Imgur

ウェブのデスクトップだけで可能で、サインインの管理画面のPostsか通常の画像ページの共有ボタンの下の点線のメニューから「strong bed Post」を選択して埋め込みコードを取得することができる。埋め込みコードの内容はサインインの場合のデスクトップと同じで、htmlとJavaScriptの両方が使われていてブラウザのJavaScriptがオフだと画像は表示されない。Imgurの場合はアカウントを取らなくても画像をアップロードして画像URLと埋め込みコードを取得できる。どちらもサインイン／ログインしたウェブと同じように画像の管理ページから「Direct Link」と「HTML image」が使用可能で、管理ページのサイトURLを覚えておけば大丈夫だ。世の中で画像URLを出してくれるWebサービスは数少ないと思うし、Imgurは有り難い。埋め込みコードも便利だし、サイトに貼るだけの作業で済んでしまうから造作なく載せられる。

コメント