イマカラピアニスト > 記事のサンプル
記事のサンプル
■画像への記事回り込み
画像を左に配置する場合
![sidebar_left_image01](http://www.hicocho.jp/wp-content/uploads/2014/02/sidebar_left_image01.jpg)
ちなみにこの画像では<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 」は、「メディアを追加」で画像を埋め込んだ際に勝手に張り付いてくるものです。
画像を右に配置する場合
![sidebar_left_image01](http://www.hicocho.jp/wp-content/uploads/2014/02/sidebar_left_image01.jpg)
画像回り込み(float)を使用した際の注意事項
「float」を利用した際、左右のコンテンツの長さのバランスが合わな場合、次のコンテンツが回りこんで表示されることがあります。
これは、次のboxで「clear:both;」によりfloat指定を解除しない為の起こるのですが、本デザインでは下記のタグにて強制的にfloatを解除する方法を用いています。
これは、次のboxで「clear:both;」によりfloat指定を解除しない為の起こるのですが、本デザインでは下記のタグにて強制的にfloatを解除する方法を用いています。
<div class=”clear”><hr /></div>
これは、hr(境界線)の非表示にし、更に「clear:both;」を埋め込むことにより、このタグ以前のfloatをリセットするようにしています。
floatを用いる際には、用いたコンテンツの下に、このタグを記述して下さい。