2008.04.10
画像の配置とキャプション付け
キャプション付き画像を左に寄せて配置するにはまずstyle.cssにどんな名前ででもいいのですが、取りあえずはcaprightと言う名でクラスセレクタを作成し以下、必要そうなプロパティーに夫々値を入れ
.capright {
float: right;/*画像の左寄せ*/
margin:0px 10px 0px 0px;/*画像の周囲からの空き*/
font-size: 0.9em;/*文字サイズ*/
color: #333;/*文字色*/
}
float: right;/*画像の左寄せ*/
margin:0px 10px 0px 0px;/*画像の周囲からの空き*/
font-size: 0.9em;/*文字サイズ*/
color: #333;/*文字色*/
}
のように書き加えておきます。そして投稿記事書き込み画面では
<div class="capright">
<a href="http://リンク先元の画像のURLjpg">
<img src=’http://アップロードしたサムネイル画像のURL.jpg’ /></a>
<br />キャプション</div>
<a href="http://リンク先元の画像のURLjpg">
<img src=’http://アップロードしたサムネイル画像のURL.jpg’ /></a>
<br />キャプション</div>
のように青いタグとキャプションを書き込むと「キャプション付き画像の右寄せ。」になり画像をクリックした場合元の大きい画像が開かれるようになります。
江ノ島
という事で、左に寄せた「江ノ島の画像」表示のサンプルです。
style.cssの「.capright」のfloat: rightを「.capleft」を作成しfloat: leftも作っておけば「.capright」「.capleft」の選択だけで左寄せ、右寄せが出来るようになります。
この場合はサムネイル画像を使用したので画像をクリックすると左右800pxの大きい画像を見る事ができます、又その場合はブラウザの戻るボタンで戻って下さい。
又、画像にテキストを回り込みさせた後に続くテキストは回り込みの解除をする必要があります、そんな場合は<br style="clear:right" />と書き込んで回り込みの解除をします。
■InternetExplorer6でレイアウトずれが発生する
「float」を使ってレイアウト設定をした場合「margin」が指定したものより大きくなり、レイアウトずれを起こしてしまうそうです。
これはIE6（IE5も）のバグで、IE7では修正されているそうです。
ともかく僕も「float」を使ったCSSにそれぞれ『display:inline; /*IE6対応*/』を加える事にします。
Comment & Trackback
Comment feed
Comment