DigiPress

Highly Flexible WordPress Theme

メニュー

コンテンツレイアウト用セレクタ

コンテンツ左寄せ(右への回り込み許可): fl-l, alignleft
表示例
あいうえおABCDEefghi12345
画像は左に表示され、この文章は(右への回り込みを許可 = “alignleft” された)画像の右側に回りこんで表示されます。
Code
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width="300"  class="alignleft" />あいうえおABCDEefghi12345
画像は左に表示され、この文章は(右への回り込みを許可 = "alignleft" された)画像の右側に回りこんで表示されます。
コンテンツ中央寄せ: center, aligncenter
表示例

Code
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width="300"  class="aligncenter" />
コンテンツ右寄せ(左への回り込み許可): fl-r, alignright
表示例
あいうえおABCDEefghi12345
画像は右に表示され、この文章は(左への回り込みを許可 = “alignright” された)画像の左側に回りこんで表示されます。
Code
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' alt='dogs' width="300" class='alignright' />あいうえおABCDEefghi12345
画像は右に表示され、この文章は(左への回り込みを許可 = "alignright" された)画像の左側に回りこんで表示されます。
コンテンツの右寄せを解除: cl-r
表示例
あいうえおABCDEefghi12345
画像は右に表示され、この文章は(左への回り込みを許可 = “alignright” された)画像の左側に回りこんで表示されます。

ただし、ここから画像の右寄せの影響を解除します。

Code
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' alt='dogs' width="300" class='alignright' />あいうえおABCDEefghi12345
画像は右に表示され、この文章は(左への回り込みを許可 = "alignright" された)画像の左側に回りこんで表示されます。
<p class="cl-r">ただし、ここから画像の右寄せの影響を解除します。</p>
コンテンツの左寄せを解除: cl-l
表示例
あいうえおABCDEefghi12345
画像は右に表示され、この文章は(左への回り込みを許可 = “alignleft” された)画像の左側に回りこんで表示されます。

ただし、ここから画像の左寄せの影響を解除します。

Code
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width="300"  class="alignleft" />あいうえおABCDEefghi12345
画像は右に表示され、この文章は(右への回り込みを許可 = "alignleft" された)画像の右側に回りこんで表示されます。
<p class="cl-l">ただし、ここから画像の左寄せの影響を解除します。</p>
すべての回り込みを解除: clearfix
このセレクタは、alignleft, fl-l, alignright, fl-r などのセレクタを用いているコンテンツ全体を div タグなどで括り、このdivタグ自体に指定することで内部のコンテンツが他のコンテンツと回りこんでしまうのを防ぎます。

未制御の場合

あいうえおABCDEefghi12345
画像は右に表示され、この文章は(右への回り込みを許可 = “alignleft” された)画像の右側に回りこんで表示されます。

回り込ませたくないのに回りこんでいる文章。

Code
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg'  width='300' class='alignleft' />あいうえおABCDEefghi12345
画像は右に表示され、この文章は(右への回り込みを許可 = "alignleft" された)画像の右側に回りこんで表示されます。

回り込ませたくないのに回りこんでいる文章。

回り込みを解除した場合

あいうえおABCDEefghi12345
画像は右に表示され、この文章は(右への回り込みを許可 = “alignleft” された)画像の右側に回りこんで表示されます。

ここからは回り込まずにコンテンツを表示できます。

Code
<div class="clearfix">
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width='300' class='alignleft' />あいうえおABCDEefghi12345
画像は右に表示され、この文章は(右への回り込みを許可 = "alignleft" された)画像の右側に回りこんで表示されます。
</div>
ここからは回り込まずにコンテンツを表示できます。