スマホで画像の回り込みを解除する方法

スキルアップ
この記事は約3分で読めます。

こんにちは、ダンディPPです!

 

このサイトはwordpressにて制作しているのですが、まだ始めて1ヶ月程度なのでこういうサイトにしたいなぁ、と思ってもなかなか具現化できていません。

 

今回は、そのやりたいことの中の一つができましたので備忘録も兼ねてまとめておきます(^o^)

 

PCで画像の横に文字を回り込ませる

スマホの発達・普及により、パソコンでサイトを見ることが減りつつあります。

しかし、完全にスマホだけということもありません。

 

どちらのデバイスでも対応できるようレスポンシブに対応した「Simplicity 1.9.3」というテーマを利用させていただいています。

 

このSimplicityはクオリティが高い上に無料ということで、私自身非常に満足しています!

 

 

wordpressで投稿を作成する際、”メディアを追加”にて本文中に画像を貼り付けます。

そして、”テキスト”モードにして画像に関するタグの

・・・<img class=”alignnone・・・

・・・<img class=”alignleft (or alignright)・・・

に修正して、画像を左(or右)に寄せて、その隣に文字が表記されるようにしています。

 

キレイにまとまって、なんかオシャレじゃん!!なんて思ったりしてます(^^;

 

 

スマホでは文字の回り込みを解除して、画像の下に表記したい

しかし、これには問題がありました。

 

そうです、スマホでは著しく見難いんです!!

 

 

この問題を解決すべく、調べ上げたところ、Simplicityで完全レスポンシブにしていない場合、スマホでの表示はmobile.cssにて制御できることがわかりました!

 

PCなどの一般的な表示がstyle.cssということも掴めましたので、その中身から”.alignleft”を検索、構文をチェック。

 

 

わかった!!!

 

 

mobile.cssに以下の追記をしたところ、スマホでのみ文字の回り込みを解除することができました!!

 

img.alignleft,
.wp-caption.alignleft {
float: none;
}
img.alignright,
.wp-caption.alignright {
float: none;
}

 

 

フゥ〜、なんか達成感♪

 

 

コメント

タイトルとURLをコピーしました