スキップしてメイン コンテンツに移動

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

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

Imgurのロゴマーク

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

Imgurの画像URLを取得する

ウェブのデスクトップかモバイルとモバイルアプリで方法が違う。

ウェブでの方法:Direct Link

デスクトップ:パソコンのImagesから

ImgurのウェブのデスクトップのDirect Link/画像URL

モバイル:スマホ/タブレットのImagesから

ImgurのウェブのモバイルのDirect Link/画像URL

追記:仕様変更があり、モバイルはアプリでなくては殆ど閲覧しかできないような状態になっている。

アカウントにサインイン/ログインして「Image」から画像を一つだけ開く。デスクトップのパソコンの場合は右側のメニューの「Direct Link」、モバイルのスマホ/タブレットの場合は左上のプルダウンメニューの「Direct Link」を選択すると画像URLを取得ことができる。

注意点としてはモバイルでは画像URLがjpg(jpeg)のタイプしか出ないみたいだ。なのでpngファイルで画像をアップロードしてもそのままの画像URLは取得できなくてjpgのタイプに変換されてしまっている。

ウェブのデスクトップかモバイルアプリだとpngファイルの画像URLが出て来るので、どうしても必要な場合はウェブのデスクトップかモバイルアプリからImgurに入って画像URLを取得する。

モバイルアプリでの方法:Copy URL

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/埋め込みコード

モバイル:スマホ/タブレットのImagesから

ImgurのウェブのモバイルのHTML Image/埋め込みコード

追記:仕様変更があり、モバイルはアプリでなくては殆ど閲覧しかできないような状態になっている。

ウェブでしか取得できなくて「Image」から画像を一つだけ開くと左上にプルダウンのメニューがあるので、そこから「HTML Image」を選択すれば埋め込みコードが右横に表示されて使うことができる。

ウェブでしか取得できなくて「Image」から画像を一つだけ開く。デスクトップのパソコンの場合は右側のメニューの「HTML」、モバイルのスマホ/タブレットの場合は左上のプルダウンメニューの「HTML Image」を選択すると埋め込みコードを使うことができる。

デスクトップとモバイルではソースコードが異なっている。前者はhtmlの引用のblockquoteタグに画像ページへのリンクのaタグを付けてJavaScriptで画像を出力する。後者はhtmlの画像ページへのリンクのaタグを付けて画像のimgタグで表示する。ブラウザのJavaScriptがオフでも表示されるし、コードの読み込みも少ないので、デスクトップよりもモバイルの埋め込みコードが方が使い易いだろう。

画像ページのボタンから:Embed Post

ImgurのウェブのEmbed Post/埋め込みコード

ウェブのデスクトップだけで可能で、サインインの管理画面のPostsか通常の画像ページの共有ボタンの下の点線のメニューから「Embed Post」を選択して埋め込みコードを取得することができる。

埋め込みコードの内容はサインインの場合のデスクトップと同じで、htmlとJavaScriptの両方が使われていてブラウザのJavaScriptがオフだと画像は表示されない。

Imgurの場合はアカウントを取らなくても画像をアップロードして画像URLと埋め込みコードを取得できる。どちらもサインイン/ログインしたウェブと同じように画像の管理ページから「Direct Link」と「HTML image」が使用可能で、管理ページのサイトURLを覚えておけば大丈夫だ。

世の中で画像URLを出してくれるWebサービスは数少ないと思うし、Imgurは有り難い。埋め込みコードも便利だし、サイトに貼るだけの作業で済んでしまうから造作なく載せられる。

コメント

些細な日常の人気の投稿

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ