画像に写真風の枠をつけたり、インスタント写真のようにコメントをつけるためのサンプルです。このサンプルでは、
非公式サポートの
style属性を使用しています。
[IMG]ボタンやimgタグで挿入した画像は、何の装飾もつかずに単純に画像が表示されますよね？
そんな素っ気ない画像ですが、style属性を使用すれば、写真風の枠をつけたりインスタント写真（ポラロイド写真）のように余白にちょっとしたコメント（写真の説明書き）をつけることができます。
なお、画像の配置に関しては「
イメージ配置サンプル」を、非公開タグや属性については「
gooブログで使用できるタグや属性(非公開分)」をご覧ください。
| 単純に[IMG]ボタンで挿入した画像 |
|---|
<img src="画像URL"> [IMG]ボタンやimgタグで挿入した画像には、何の装飾もつかない。(←)
これが普通の～
|
[IMG]ボタンやimgタグで挿入した画像には、何の装飾もつかない。
これが普通の状態です。
| style属性で写真風の枠をつけた画像 |
|---|
<img src="画像URL" style="border: solid 1px gray; padding: 3px; background-color: white; margin: 2px 5px 1px 5px;"> imgタグにstyle属性で写真風の枠をつけてみる。(←)
"border: solid 1px gray;" で灰色の枠を～
|
imgタグにstyle属性で写真風の枠をつけてみる。
"border: solid 1px gray;" で灰色の枠をつける。
"padding: 3px;" で3ピクセルの余白を設ける。
"background-color: white;" で余白の背景色を白にする。
"margin: 2px 5px 1px 5px;" で上2ピクセル、右5ピクセル、下1ピクセル、左5ピクセルの隙間を設ける。
| spanタグを使ってインスタント写真風に余白にコメントをつけた画像 |
|---|
<span style="border: solid 1px gray; padding: 3px; background-color: white; margin: 2px 5px 1px 5px; text-align: center; font-size: 80%; float: left;"><img src="画像URL">(←)
カレー3種</span> style属性を指定したspanタグでimgタグを括れば、インスタント写真風に余白にコメントをつけることもできる。(←)
"text-align: center;" でコメントテキストを～
|
カレー3種 style属性を指定したspanタグでimgタグを括れば、インスタント写真風に余白にコメントをつけることもできる。
"text-align: center;" でコメントテキストを中央寄せする。
"font-size: 80%;" でコメントテキストのフォントサイズを8割の大きさにする。
"float: left;" で画像を左寄せして本文テキストを回り込ませる。
その他のspanタグに指定するstyle属性の内容は、imgタグに指定していたものと同じ内容です。
なお、spanタグを閉じる（</span>をつける）のを忘れないでください。
| コメントを上につけた画像 |
|---|
<span style="border: solid 1px gray; padding: 3px; background-color: white; margin: 2px 5px 1px 5px; text-align: center; font-size: 80%; float: left;">カレー3種(←)
の写真です(←)
<img src="画像URL"></span> span、コメント、改行、img、/spanの順に書けば、画像の上にコメントをつけることもできる。(←)
またコメントの途中で～
|
カレー3種
の写真です
span、コメント、改行、img、/spanの順に書けば、画像の上にコメントをつけることもできる。
またコメントの途中で改行すれば、コメントを複数行にすることもできる。
| 調子に乗った画像 |
|---|
<span style="border: solid 1px gray; padding: 3px; background-color: white; margin: 2px 5px 1px 5px; text-align: center; font-size: 80%; float: right;">ブレインマサラ(←)
<img src="画像URL">(←)
バターチキン パラクパニール</span> コメントとimgタグの位置を気をつければ、画像の上下にコメントをつけることもできる。(←)
また、"float: right;" で右寄せ～
|
ブレインマサラ
バターチキン パラクパニール コメントとimgタグの位置に気をつければ、画像の上下にコメントをつけることもできる。
また、"float: right;" で右寄せ＆文字回り込みもできる。
| 拡大画像へのリンクをつけた縮小画像 |
|---|
<span style="border: solid 1px gray; padding: 3px; background-color: white; margin: 2px 5px 1px 5px; text-align: center; font-size: 80%; float: left;"><a href="拡大画像URL" target="_blank"><img src="縮小画像URL" border="0">(←)
カレー3種</a></span> aタグも使えば、クリックすると拡大写真が表示されるコメントつきの縮小写真にすることもできる。(←)
この場合は～
|
カレー3種 aタグも使えば、クリックすると拡大写真が表示されるコメントつきの縮小写真にすることもできる。
この場合は、imgタグにborder="0"の属性を指定した方がいいかも知れない。
また、aタグにtarget="_blank"の属性を指定しなければ、拡大画像は同じウィンドウに表示される。
| カスタムテンプレートなら、クラスを定義しちゃうとちょっと楽 |
|---|
[CSS]
/* 写真風画像全般 */
.pictFloatLeft,
.pictFloatRight,
.pict {
border: solid 1px gray;
padding: 3px;
background-color: white;
text-align: center;
font-size: 80%;
line-height:160%;
}
/* 写真風画像 */
.pict {
margin: 2px 5px 1px 5px;
}
/* 写真風画像配置：左 */
.pictFloatLeft {
margin: 2px 5px 1px 0px;
float: left;
}
/* 写真風画像配置：右 */
.pictFloatRight {
margin: 2px 0px 1px 5px;
float: right;
}
[記事]
<img src="画像URL" class="pictFloatLeft"> imgタグにclass="pictFloatLeft"を指定すれば、左寄せ写真風画像が表示できる。(←)
<br style="clear: left"> <span class="pictFloatLeft"><img src="画像URL">(←)
カレー3種</span> brタグにstyle="clear: left"を指定して左寄せ画像への回り込みを解除する。spanタグにclass="pictFloatLeft"を指定すれば、コメントつき画像も左寄せで表示できる。(←)
<img src="画像URL" class="pictFloatRight"> imgタグにclass="pictFloatRight"を指定すれば、右寄せ写真風画像が表示できる。(←)
<br style="clear: right"> <a href="拡大画像URL" target="_blank" class="pictFloatRight"><img src="縮小画像URL">(←)
カレー3種</a> brタグにstyle="clear: right"を指定して以前の右寄せ画像への回り込みを解除する。aタグにclass="pictFloatRight"を指定すれば、コメントつき縮小画像を右寄せで表示して、クリックすると拡大画像を表示するようにできる。(←)
<br style="clear: both"> brタグにstyle="clear: both"を指定すれば、両サイドの回り込みを解除できる。(←)
|
imgタグにclass="pictFloatLeft"を指定すれば、左寄せ写真風画像が表示できる。
カレー3種 brタグにstyle="clear: left"を指定して左寄せ画像への回り込みを解除する。spanタグにclass="pictFloatLeft"を指定すれば、コメントつき画像も左寄せで表示できる。
imgタグにclass="pictFloatRight"を指定すれば、右寄せ写真風画像が表示できる。
カレー3種 brタグにstyle="clear: right"を指定して以前の右寄せ画像への回り込みを解除する。aタグにclass="pictFloatRight"を指定すれば、コメントつき縮小画像を右寄せで表示して、クリックすると拡大画像を表示するようにできる。
brタグにstyle="clear: both"を指定すれば、両サイドの回り込みを解除できる。
| ブログ本文の画像スタイルを写真風に変更する |
|---|
[CSS]
/* エントリ本文：写真風画像 */
.etBody IMG {
border: solid 1px gray;
padding: 3px;
background-color: white;
margin: 2px 5px 1px 5px;
}
[記事]
<img src="画像URL"> [画像の選択/解除]ボタンで選択したり、[IMG]ボタンやimgタグで挿入するだけで、ブログ本文の画像が全て写真風になる。(←)
ただし、\{/plane_wel/\}や～
|
[画像の選択/解除]ボタンで選択したり、[IMG]ボタンやimgタグで挿入するだけで、ブログ本文の画像が全て写真風になる。
ただし、
や
といった絵文字も写真風になってしまうので、注意が必要。
