SEO対策、WEBサイト(ホームページ)の作り方、そして時々柴犬と愛媛県

スポンサーリンク

画像の回り込みを解除する方法

珍しくCSS(スタイルシート)に関する記事です

アクセス数の増加を増やす方法なんかを実験しているニュース(ネタ)サイト(NEWS73)のほうなんですが、モンスト(モンスターストライク)の記事を書いたら低レベルながらアクセス数爆上げ、調子に乗って渾身(笑)の別の記事を書いたらそっちは効果なし。でトホホと思ってたら、なんか相撲の記事でジワジワ来てて、訳が分からん状態のわたくしです。

さて今回は、向こうの記事では画像を使うことが多く、比較的記事上で画像の位置調整をすることが多くなってきます。その際によく問題になってくるのが、画像周りのテキストの回り込みの問題です。

そこで、回り込みを簡単に解除する簡単な方法(と言ってもwordpressの管理画面上で簡単な解除ボタンみたいなものはないのかなと思っただけですが)を調べたので今回は取り上げてみることにしました。


wordpress上で簡単に回り込みを解除する方法はない

例えば下のように画像を使って左寄せにした場合、

 

wordpress普通の設定ではこのように画像を左寄せすると、右側に文字が回り込み解除しようとすれば、スペースを連打するという方法しかありません。

この場合、新しい段落を画像の下に持ってきたい場合は

 

 

 

このように改行を繰り返すしかありません。

 

これが多くの方が現在よく使っているであろう手っ取り早い方法だとおもいます。そこで、もっとスマートな方法はないのかな?と思って調べてみたわけです。

プロフィールなんかを見ていただくと分かると思いますが、一応わたくしCSSは普通の人以上に分かってはいるつもりではいるんですが、今回はお手軽な方法が欲しかったわけで、ざっと調べたら特にありませんでしたという結果です。(笑)

 

結局どうテキストの回り込みを解除するべきか?

CSSであらかじめ指定しておく

最初に断っておきますと、このサイトに関しては最初から解決はしてます(一応元プロなので(笑))。

初心者の方向けに、このサイトではどういった対策をしているかというと、まず手っ取り早い方法としては、CSSなどの外部ファイル(別に外部ファイルでなくても構いませんが)で見出しタグに回り込み解除の指定をしておく方法です。

h2,h3,h4 {clear:both}

こういった感じで画像の次に見出し(h)が来た場合にテキストの回り込みを確実に解除をしたい場合は、clearという属性に対してbothと、まとめて指定しておけば簡単に解除できます。上のソースはh2~h4まとめて解除する書き方ですが、もちろん個別に指定しても構いません。

初心者の方向けに基本的なことを書きますとこのclearという属性は画像の左寄せや右寄せを指定するfloat属性に対するアンサーソング(笑)みたいなものなので、ワンセットで使うと覚えておくといいでしょう。clearに対する指定地はbothの他にleftやrightでも構いません。左寄せや右寄せが全解除を指定するのでbothが無難だと思います。

 

個別のページで指定・対応する方法

ネットによく出ていた方法だと回り込みを解除したいテキストの前に

<div style="clear:both;"></div>

を入れるというのがほとんどでしたね。まぁ、理屈上はこれで大丈夫です。言ってしまえばhtmlソースの要素を直接スタイル指定する方法ですが、初心者でCSSのこととかよく分からない場合はこれが確実でしょう。

 

が、もっとスマートにするなら別にpタグにスタイルを指定(divの代わりにpを入れる)するだけでいいような気がするとは思うんですが、わざわざ空っぽの要素を入れるのも僕的には美しくないのでそちらをオススメしますね。ブログのエディタなんかではpタグが非表示になっているケースが多いですが、実際のソース上では文章はまず間違いなくpタグに囲まれているのでhtml編集などに切り替えてpタグやhタグに直接指定する方法がお勧めです。

とは言っても、上の一行をコピペするほうが簡単か・・・(笑)。


CSSを勉強中の方はoverflow:hiddenもワンセットで

ちなみにスタイルシートを勉強中の方にアドバイスをしておきますと、回り込み(float)をした場合、そのエリアの高さが失われてしまい、背景色がうまく表示されない場合があります。背景に色や画像を指定しているのに、うまく表示されたりしないのは、まずfloatが原因で高さが0だと認識されているはずなので、

そういった場合はそのエリアに

overflow:hidden

としておくと多分高さを得ることができますので、覚えておくといいでしょう。(なぜ多分と書いているかというと普段当たり前にワンセットで使っているので、その理由がこうだったはずだと認識しているからです。)

 

まとめると

foatとclear:both、overflow:hiddenはワンセットで使いましょう

ということです。

 

まぁclearfixとかありますけど、僕はこれを理論的に説明するのが難しい(元理系からするとワケの分からないものは使いたくない)ので実は使用していません。

 

ちょっと元WEB業界の人間ポイ内容の記事でした。この記事がお役に立ちましたら下のSNSボタンなんかクリックしておいてください(笑)。


スポンサーサイト

タグ: ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)