Imgurで画像URLと埋め込みコードを取得する方法 結城永人 - 2016年12月28日 (水) Imgurは自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次Imgurの画像URLを取得するウェブでの方法:Direct Linkモバイルアプリでの方法:Copy URLサイトに画像URLを使って画像を表示する方法Imgurの埋め込みコードを取得するサインインの管理画面から:HTML / HTML Image画像ページのボタンから:Embed Post Imgurの画像URLを取得する ウェブのデスクトップかモバイルとモバイルアプリで方法が違う。 ウェブでの方法:Direct Link デスクトップ:パソコンのImagesから Direct Link|Imgur モバイル:スマホ/タブレットのImagesから Direct Link|Imgur 追記:仕様変更があり、モバイルはアプリでなくては殆ど閲覧しかできないような状態になっている。 アカウントにサインイン/ログインして「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から HTML|Imgur モバイル:スマホ/タブレットのImagesから HTML Image|Imgur 追記:仕様変更があり、モバイルはアプリでなくては殆ど閲覧しかできないような状態になっている。 ウェブでしか取得できなくて「Image」から画像を一つだけ開くと左上にプルダウンのメニューがあるので、そこから「HTML Image」を選択すれば埋め込みコードが右横に表示されて使うことができる。 ウェブでしか取得できなくて「Image」から画像を一つだけ開く。デスクトップのパソコンの場合は右側のメニューの「HTML」、モバイルのスマホ/タブレットの場合は左上のプルダウンメニューの「HTML Image」を選択すると埋め込みコードを使うことができる。 デスクトップとモバイルではソースコードが異なっている。前者はhtmlの引用のblockquoteタグに画像ページへのリンクのaタグを付けてJavaScriptで画像を出力する。後者はhtmlの画像ページへのリンクのaタグを付けて画像のimgタグで表示する。ブラウザのJavaScriptがオフでも表示されるし、コードの読み込みも少ないので、デスクトップよりもモバイルの埋め込みコードが方が使い易いだろう。 画像ページのボタンから:strong bed Post strong bed Post|Imgur ウェブのデスクトップだけで可能で、サインインの管理画面のPostsか通常の画像ページの共有ボタンの下の点線のメニューから「strong bed Post」を選択して埋め込みコードを取得することができる。 埋め込みコードの内容はサインインの場合のデスクトップと同じで、htmlとJavaScriptの両方が使われていてブラウザのJavaScriptがオフだと画像は表示されない。 Imgurの場合はアカウントを取らなくても画像をアップロードして画像URLと埋め込みコードを取得できる。どちらもサインイン/ログインしたウェブと同じように画像の管理ページから「Direct Link」と「HTML image」が使用可能で、管理ページのサイトURLを覚えておけば大丈夫だ。 世の中で画像URLを出してくれるWebサービスは数少ないと思うし、Imgurは有り難い。埋め込みコードも便利だし、サイトに貼るだけの作業で済んでしまうから造作なく載せられる。 関連ページDropboxで直リンクのURLを取得する方法 コメント 新しい投稿 前の投稿
コメント