画像のURLにタグコードを付けて画像を表示させる方法 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
そんなの知ってるよーって方も多いと思いますが、画像のURLにタグを付けて画像を表示させる方法をご紹介してみたいと思います。

ご存じの方はスルーしちゃって下さいませ。

画像のURLにタグコードを付けて画像を表示させる方法


コードはこちらです。

<img src="画像のURL">


で例えば、この画像のタグ、ですが



この様になります。

<img src="http://stat.ameba.jp/user_images/20131226/23/wantan-52/b5/63/j/o0600043312793882812.jpg">


自分の過去のブログを見てて「あ!この画像、また使いたいな~」なんて時に、いちいち画像フォルダーから探し出すのが面倒な時があります。

そういう時は、画像にカーソル(矢印、マウス)を合わせて、右クリックすると下のような小窓が出て来ると思います(ブラウザによっては、多少の違いはあると思いますが・・)。




で「画像URLをコピー」をクリックして、コピーされた「画像URL」を、その画像を表示させたい箇所に貼り付けます。 
そして先程のタグ<img src="ここに画像のURL">で、貼り付けた画像URLを囲うと、その画像が表示されます。

ちょっとした時短になるかも知れませんね^^;

ただ他のサイト様の画像をこの方法で表示すると、相手のサーバー(コンピューター・・?)に負担を掛けたり、著作権、肖像権の問題が絡む事がありますので注意されたほうがいいと思います。
たしか、この方法でアメブロに表示されてる画像を他のサイト、ブログサービス等に表示する事をアメブロでは、「禁止事項」としていたと思います。ちょっと定かではありませんが(汗)。



こちらは、タグコードの貼り付けで使っていいですよ~ってサイト様(アメリカのフリッカー)の画像です。

Corvey in January - 無料写真検索fotoq
photo by blavandmaster


☆ブィブィ ゞ(^_^)v




おまけ

恋に焦がれて鳴く蝉よりも鳴かぬ蛍が身を焦がす

600x418 多岐川華子







続・おまけ^^;

自分は気がつかなかったんですが、最近アメブロさんの仕様変更でブログの上に隙間が出来てるんですね。

で、その隙間を無くす方法を書いて下さってる方がいらっしゃいました。

やってみました。隙間が無くなりました。でも、なんとなく自分の場合は隙間があったほうがシックリ来るのでまたはずしちゃいました^^;

もし気になる方は以下のコードをCSSの末尾に貼り付けてみて下さい。隙間が無くなると思います。


/*ヘッダー上の隙間*/
.skinFrame {
padding-top: 0px;
}



こちらで書かれていました⇒アメブロのヘッダー上の余白ズレについて | アメブロカスタマイズ 初心者にもできるアメブロカスタマイズ!


☆ブィブィ φ(.. )

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス