研Q45.ブログに画像を貼る方法(画像のURLとは?) - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

研Q45.ブログに画像を貼る方法(画像のURLとは?)

画像タグの基本を押さえておきたい。

cork board - 無料写真検索fotoq
 photo by MowT


ブログに画像を貼るにはブログのエディタで「この画像を使う」のような操作をすれば勝手に画像タグが組み込まれます。

しかし画像タグの基本を押さえておくとさらに応用が利くようになります。
(たとえばアメブロのフリースペースフリープラグインに画像を貼るとか。)

画像タグの仕組み

<img src="画像のURL">

これが画像タグの基本です。

さらに<>の内側にオプションをつけることができます。

width="400" height="300"

画像の横幅(width)と高さ(height)を、画像のピクセルで指定します。

貼り付ける画像よりも小さい値(縦横比は合わせて)を指定すれば縮小表示を、

大きい値を指定すれば拡大表示できます。

(拡大表示しても元の画像は同じなのできめの粗い画像になってしまいますから、拡大も程度問題です。)

画像を表示するスペースをあらかじめ予約することができるので、表示が速くなるというメリットもあります。

また、
alt="代替テキスト"

をつけ加えると、""の中のテキストが代替テキストというものになります。

代替テキストは、通信状態など何らかの理由で画像が表示されないときに画像の代わりに表示されるテキストです。

画像にマウスポインタを合わせると、代替テキストがポップアップ表示されます。




また、視覚不自由者がウェブサイトを読むときに使う読み上げブラウザでは、画像を読み上げる代わりに代替テキストが読み上げられます。

Googleなどは代替テキストをその画像の説明文として認識していて、クローラが読み取ってインデックスのテキストに使われます。

ですから代替テキストは検索ユーザーに理解できる言葉でできるだけ記入する方が得策です。
たとえば「前田敦子ちゃんが○○コンサートに出演したときの写真」とか「うちの飼い犬メリーの写真」とか。

「メリー」では興味を持つ人がほとんどいないと思うので「逆立ちして歩ける愛犬メリーの写真」などのほうが検索結果をクリックされやすいでしょう。


ただし僕が使っているFirefoxでポップアップ表示されるのは「 alt="代替テキスト"」ではなくて
「 title="代替テキスト"」です。

altに加えてtitleも併記した方がよいでしょう。


画像のURLとは?

ブログにアップロードした画像にはそれぞれURLがつけられます。

ファイルアップロードのファイル一覧

FC2ブログの場合、アップロードした画像のサムネイル(小さく表示された画像)をクリックすると画像が単体で表示されます。

サムネイルをクリックすると画像が表示される

その画像のURLが画像のURLです。

他のブログサービスでも似たような画像の表示方法があります。


ウェブサイトに表示されている画像のURLを知る方法。

ウェブサイトに表示されている画像を右クリックして、画像のプロパティを表示します。

画像のプロパティを開く

すると、画像のプロパティのアドレス(URL)の欄に画像のURLが表示されます。

画像のプロパティ

画像のURLがわかると、そのURLをブラウザで表示して画像をダウンロードしたり、画像をリンクしたりできます。


画像の直リンクと著作権侵害にご注意。

元の画像のURLを直接画像タグに組み込んでウェブサイトに表示することを画像の直リンクといいます。

ほとんどのウェブサイトのサーバーが画像の直リンクを禁止していて、直リンクがサーバーの使用者に原因がある(直リンクをすすめるなど)ことがわかると、サーバーレンタルの解約などという事態にもなりかねません。

なので、一般に画像の直リンクはマナー違反です
(ウェブサイトに画像を表示するのではなく、画像へのリンクを張るならOKだと、僕は思います。一般にURLへの誘導は、著作権違反にはならないはずですから。)


他の人のサイトに掲載されている画像を自分のブログにアップロードすることは著作権侵害の問題が発生する可能性があります。

当ブログに掲載している僕が撮影した写真にはできるだけ クリエイティブ・コモンズ 表示 - 継承 2.1C.C.ライセンスマーク
 ©水村亜里(M Inamura) をつけています。

ウェブサイトに表示されている画像

C.C.ライセンスの条件に従って、画像を二次加工したり、それをウェブサイトに展示してもOKと
僕が認めている意思表示ですから、 クリエイティブ・コモンズ 表示 - 継承 2.1 に表示されている条件の下で自由にご使用いただいてけっこうです。

画像を他のサイトから転載するときは、できるだけC.C.ライセンスマークで著作権使用を認めているFeickrなどの画像を使用するようにしましょう。
研Q11.Googleが著作権侵害サイトをランクダウン!侵害せずに著作物を使用する方法

C.C.ライセンスなどで特に著作権の使用を公開していない画像の場合は、個別に連絡をとって著作権使用の許可をいただく必要があります。

著作権侵害については、著作権者が気がついて画像使用を差し止める請求がなければ問題にはならないのですが、著作権者が気がついていないか、気がついてもお目こぼしされている状態もあり得ます。

ブログの運営が気がついて、掲載の中止を求められる場合もあります。
(ブログに公開しなくてもアップロードするだけで問題にされた経験もあります。)

ASP、特に楽天市場などは著作権侵害を嫌って(規約違反とみなす)いる場合もあるので気をつけるべきです。

予告なくフィリエイトアカウントを削除される場合だってあります。

一度削除されたアカウントを回復するのはかなり困難なので、著作権侵害には気をつけたいものです。


 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
グーグルリーダーに登録 Subscribe with livedoor Reader My Yahoo!に追加 
ツイッター でも、更新案内を流しています。                          
RSSリーダーとは?⇒ RSSってなんなの
  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

No title

はじめてまして。
PalmDogwoodを管理しておりますNakazakiと申します。
この度、ブログを巡っていましたらたどり着きました。
投稿されています記事拝見致しました。
興味をそそる記事の数々でした。
私はまだまだブログを新設したての初心者です。
是非とも今後のブログ運営の参考にさせて頂きたいと思いました。
長々しいコメント失礼致しました。

2013-06-28 09:05 | from palmdogwood

>palmdogwoodさん

Re:はじめてまして。

>palmdogwoodさん、コメントありがとうございます。

当ブログが、palmdogwoodさんのご参考になれば幸いです。

老婆心ながら、
コメントされるときはURL欄にあなたのブログのURLを記入されることをおすすめします。

ご記入いただくとあなたのブログへのリンクがコメントに表示され、
あなたのブログへの入り口がひとつ増えます。

2013-06-28 19:18 | from 水村亜里 | Edit

トラックバック

http://aminamura.blog.fc2.com/tb.php/45-7ff88e67

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...