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

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を取得する。

モバイルアプリでの方法:クリップボードにコピー

Imgurのモバイルアプリの共有メニュー

アカウントにログインしてプロフィールの「Posts」から画像を一枚だけ開いてロングタップするとメニューが下の方に表示されるので、そこから「Share Direct Link」を選択してクリップボードなどに画像URLを取得することができる。

アカウントにサインイン/ログインしてプロフィールの「Posts」から画像を開いてロングタップするか、さらにタップして画像を大きく開いて下の共有ボタンをタップすると他のアプリなどへの共有メニューが表示されるので、そこから「クリップボードにコピー」を選択すると画像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アプリのダウンロードが非常に遅い場合の打開策

イメージ

ジャパネットたかたの丸尾詩織の商品説明に気持ちが入っていて素晴らしい理由

イメージ