研Q58.ブログの画像の周りにHTMLで枠線(border)をつける方法。 - ネットビジネス研Q室(新館)

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q58.ブログの画像の周りにHTMLで枠線(border)をつける方法。

画像加工しないでも狙った画像にだけ枠線をつける方法。

Small panda in the snow - 無料写真検索fotoq
 photo by jinterwas


実は上の写真はCCライセンスで「改変禁止」ではないので、
Flickrからダウンロードしてイーファンビューというフリーの画像ソフトで枠線をつけたものをブログにアップロードして表示しています。

しかし普段Flickrに登録してある写真を使わせてもらう場合は、直リンクして表示しています。


直リンクよりもブログにアップロードする方が、画像の表示速度が速い、Flickrのサーバにトラブルがあっても表示できる、などのメリットがあります。

しかし、画像を自分のブログにアップロードすると、ブログにアップロードできる容量を消費してしまいます。

無料ブログには容量の制限があって、制限に達すれば以後は画像をアップロードできない。
いってみればブログの寿命になってしまいます。

できるならば画像をアップロードせずに写真を表示したいので相手のサーバが許せば直リンクしたいと考えています。

また、CCライセンスで「改変禁止」の条件がある場合などは画像を改変して枠線をつけることができません。

さらに、この記事の前の記事に貼り付けた
バレルロールを表現するGIFアニメーション↓なども枠線をつけるには特殊なソフトが必要になります。



そんな場合でもHTMLの画像タグで枠線をつけることはできるはずだ・・・と調べてみました。

はい。GIFアニメにもこんなふうにHTMLで枠線をつけることができました。



ブログの画像に枠線をつけるのはCSSで行うのが一般的です。

一般的にはCSS(スタイルシート)を変更して画像に枠線をつける方法があります。

しかしそれでは、ブログの過去記事の画像すべてに枠線がついてしまいます。

そうではなくて、HTMLの画像タグで狙った画像だけに枠線をつけたいのです。

画像タグに枠線を追加する方法。

以前研Qしたように、画像タグの基本はこうでした。
<img src="画像のURL">

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

この画像タグに「 border="枠線の太さ"」を追加してやります。

<img border="1" src="画像のURL">

これでGIFアニメでも枠線をつけることができました。



styleパラメータで画像タグに枠線を追加する方法。

こちらのほうが応用が利きそうです。

画像タグに
style="border-style:solid;border-color:black;border-width:1px"
を追加します。

このパラメータで、
border-style:solid
を変えると線の種類が変更できます。
border-color:black
線の色を、
border-width:1px
線の太さを変更できます。

さらに、
padding:5px 5px 5px 5px
を追加すると枠線内の余白も指定できます。

Should I sleep or not? - 無料写真検索fotoq
photo by Tambako the JaguarK


<div>タグにstyleをつけて画像タグ全体を囲む方法。

上に書いた padding:5px 5px 5px 5px は、枠線の上、右、下、左、の順で別々に余白を設定できます。

それならば<div>タグstyleパラメータを組み込んで画像タグとクレジット表示を囲ってしまえば、クレジット表示も枠の中に入れることができますね。

Should I sleep or not? - 無料写真検索fotoq
photo by Tambako the JaguarK


<div style="border-style:solid;border-color:black;border-width:1px;width:500px;padding:5px 5px 5px 5px"></div>で画像タグを囲っています。

この場合は、width:500pxも追加しないと枠線の横幅が、ブログの横幅一杯いっぱいになってしまいます。

500pxは画像の横幅です。

クレジット表示が不要な写真でも、写真のチャプターをいっしょにしておけば、チャプターがその写真の説明だとGoogleからも認識されるはずで、画像検索でヒットする確率が上がってきます。

トリミングしたアマゾン画像にも<div>タグは使える。

アマゾンの商品画像をトリミング(一部分を切り抜く)して画像として使用するということをよく行います。
研Q12.アマゾンにアフィリエイトリンクして画像を使ういろいろな方法

アマゾンには画像に枠線をつけるオプションがあるのですが、トリミングした画像はトリミング前の元画像外周に枠線がついてしまってうまくいきません。

<div>タグで囲む方法だとトリミングした画像でも大丈夫です。

ガリレオφ [DVD]
ガリレオ エピソードゼロ





 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
グーグルリーダーに登録 Subscribe with livedoor Reader My Yahoo!に追加 

ツイッター でも、更新案内を流しています。                          

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

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

トラックバック

http://aminamura.blog.fc2.com/tb.php/58-2fddc71e

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。