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

2013年02月28日｜ブログノウハウ｜コメント(0)｜トラックバック(0)｜Edit｜

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

photo by jinterwas

実は上の写真はCCライセンスで「改変禁止」ではないので、
Flickrからダウンロードしてイーファンビュー

というフリーの画像ソフトで枠線をつけたものをブログにアップロードして表示しています。

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

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

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

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

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

また、CCライセンス

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

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

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

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

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

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

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

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

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

以前研Ｑしたように、画像タグの基本は↓こうでした。
<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
を追加すると枠線内の余白も指定できます。

photo by Tambako the JaguarK

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

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

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

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からも認識されるはずで、画像検索でヒットする確率が上がってきます。