スマホで回り込み解除できない?
私が運営しているオンライン占いサイトでは、ベーステンプレートに「賢威」を使っています。

当然、レスポンシブ対応なのですがサムネイル画像に回り込み(float)を指定した場合、CSSの意図通りになっていないことに気づきました。

これは賢威の問題でなく、ワードプレスの癖のようなもので、一般的なレスポンシブデザインでも同じことが言えると思います。

具体的には下図のようになってしまいます。

パターン1 右下に文字列が一行だけ回り込んでいるように見える

一部だけ回り込み

  • 回り込みは解除されるが、部分的に文字がつながってしまう
  • 画像が中央揃えにならない

CSSは以下のように正しく記述されておりますが、480px幅になっても適用されません。


@mediaonly screen and (max-width : 480px){
 .alignleft, .alignright{
 float: none; margin-right: 0; margin-left: 0; text-align: center;
 }
}

ちなみに、 .alignleft, .alignright は、WordPressの画像アップローダーで写真の「左寄せ」「右寄せ」を使うと付与される、float用のクラスです。

なぜこんなことになるのか、といえば単純な話でした。
僕自身がワードプレスのエディタに慣れすぎてて(甘えすぎて)、写真と文章が同じ段落(pタグ)で括られていたことが原因です。

上記写真のようになってしまう場合のエディタ上の記述は

<img src="https://example.com/イメージフォルダ/xxx.jpg" alt="" width="240" height="300" class="alignleft size-medium wp-image-274" />ご相談にみえる多くの方に言えることは、ご自身のチャンスや転機に気付けていないということです。

パターン2 画像の後、改行で一行空き(改段)になってしまう

ワードプレスでは、imgタグも一緒に段落で囲ってしまうので、imgと後に続く文章を分ける必要があります。
これを単純に、文章を改行してしまうと

回り込みの1行目に空白行

WordPressエディタ上で、文章以下を改行した場合 ↓

<img src="https://example.com/イメージフォルダ/xxx.jpg" alt="" width="240" height="300" class="alignleft size-medium wp-image-274" />
ご相談にみえる多くの方に言えることは、ご自身のチャンスや転機に気付けていないということです。

段落を意識せず、いちいち<p>タグを記述する必要がないのは便利ですが、画像の場合はこの機能が余計に感じてしまいますね。
それとこの場合も、センター揃えは適用されていません。

パターン3 回り込みが解除され、かつセンター揃えに

これを回避するために、最初から<p>段落タグで<img>タグを囲ってしまうことにしました。
同時にスクリーン幅が480px以下になった場合に、センター揃えを適用するため、クラス指定しておきます。
※画像をセンター揃えにするためには、親要素にもtext-align:center を記述

 

<p class="imgParent"><img src="https://hana.garden/cp/wp-content/uploads/2017/07/hanatamaki2-240x300.jpg" alt="" width="240" height="300" class="alignleft size-medium wp-image-274" /></p> 
ご相談にみえる多くの方に言えることは、ご自身のチャンスや転機に気付けていないということです。

CSSは、480px以下で

p.imgParent { text-align:center; }

予め段落タグを指定してしまえば、<p>がダブることはないので、解決します。
画像の回り込みが解除されセンター揃えに
細かい問題ですが、みなさんどうされているのでしょうね。

ちなみに画像のモデルは、カリスマ占い師の華珠季先生です。

先生の影響か、どんどんスピリチュアルの世界にハマってきました 笑

コメントを残す