イマカラピアニスト > 記事のサンプル
記事のサンプル
■画像への記事回り込み
画像を左に配置する場合
画像を左側に回り込ませる為には、画像タグ<img src=”画像” alt=”画像説明” width=”画像横幅” height=”画像縦幅” class=”設定”> の中の「class=””」の中に、「image-left」を追加します。
ちなみにこの画像では<img src=”http://www.hicocho.jp/wp-content/uploads/2014/02/sidebar_left_image01.jpg” alt=”sidebar_left_image01″ width=”298″ height=”293″ class=”aligncenter size-full wp-image-361 image-left” />と設定しています。
※こちらのclassに入っている「aligncenter size-full wp-image-361 」は、「メディアを追加」で画像を埋め込んだ際に勝手に張り付いてくるものです。
※こちらのclassに入っている「aligncenter size-full wp-image-361 」は、「メディアを追加」で画像を埋め込んだ際に勝手に張り付いてくるものです。
画像を右に配置する場合
画像を右側に回り込ませる為には、画像タグ<img src=”画像” alt=”画像説明” width=”画像横幅” height=”画像縦幅” class=”設定”> の中の「class=””」の中に、「image-right」を追加します。
画像回り込み(float)を使用した際の注意事項
「float」を利用した際、左右のコンテンツの長さのバランスが合わな場合、次のコンテンツが回りこんで表示されることがあります。
これは、次のboxで「clear:both;」によりfloat指定を解除しない為の起こるのですが、本デザインでは下記のタグにて強制的にfloatを解除する方法を用いています。
これは、次のboxで「clear:both;」によりfloat指定を解除しない為の起こるのですが、本デザインでは下記のタグにて強制的にfloatを解除する方法を用いています。
<div class=”clear”><hr /></div>
これは、hr(境界線)の非表示にし、更に「clear:both;」を埋め込むことにより、このタグ以前のfloatをリセットするようにしています。
floatを用いる際には、用いたコンテンツの下に、このタグを記述して下さい。