Wordpress

記事に画像を入れるとスマホの表示がおかしくなる時の解決方法

更新日:

WordPressで記事を書いていて画像を入れるといつもデザインがおかしくなる。

体裁を整えるために改行を入れてキレイにしてみるんだけど。。。

パソコンではうまくいっているのにスマホで見たら余白だらけで見づらい記事になっている。。。

このページは、そんな時にチェックしてほしい記事です!初心者向けの記事です。

文中に画像を入れると変になる

編集段階での様子です。記事の途中に画像を挿入したときの様子です。(画像の位置設定は中央)

こんな感じです!

ABC123ダミーテキストです。ABC123ダミーCSSテキストです。ABC456ダミーテキストです。ABC123ダミーテキストです。DABC103ダミーテキストです。HTMLABC123ダミーテキストです。ABC1243ダミーテキストです。ABC8123ダミーテキストです。ABC123ダミーテキストです。編集中の画面ダミーテキストです。ABC123ダミーテキストです。ABC789ダミーHTMLテキストです。LABC1203ダミーテキストです。見本300pxの正方形ABC123ダミー画像テキストです。ABC123ダミーテキストです。ABC123ダミーJVテキストです。ABC123ダミーCSSテキストです。ABC82123ダミーテキストです。ABC123ダミーテキストです。ABC123ダミーテキストです。ABC123ダミーテキストです。dkABC123ダミーテキストです。ABC123ダミーテキストです。ABC123ダミーテキストです。ABC123ダミーAIテキストです。

サイトで表現される実際の画面です。

編集画面とほぼ同じような感じになります。

ここからです。

画像を途中に入れると変になる

ここまで。

画像が中央にくるのを左に修正してみる

画像の位置設定を左にしてみると。画像は左にきますが、下の方にある次の章の文章が画像の右に回り込んでくる場合があります。

これを修正しようと、多くの方が次の文章の前に改行を連打して下に押し下げていきます。

改行で体裁を整える

画像とテキストのバランスを取る

改行で下にある文章が画像の横に行くのを防ぐとパソコンでの体裁は整います。。。

スマホで体裁・デザインを見ると

スマホ画面では余白ができる

改行で体裁を整えると、パソコンではきちんと見えていたのにスマホでは上とか下に意図せぬ余白がたくさん生まれることがあります。または画像のまわりがテキストだらけになってしまうということも。。。

改善方法

この画像は中央寄せになっています

この画像は中央寄せになっています

改善するには、いくつかの方法がありますが、初心者の方におすすめなのが、画像位置の指定を解除してあげることです。

左寄せ、中央寄せ、右寄せになっている場合は、鉛筆マークのすぐ左横のボタンをクリックすれば画像位置が解除されます。

改善してからの見映え

改善画像

▲画像位置を指定なしにすると画像の横に空白ができます(パソコン)。テキストは下に自動で配置されるようになります。見た目もおかしくなく、これであれば画像の下にスマホで見ても余白は生まれません。画像のまわりがテキストだらけになることも防げます。

まとめ

パソコンとスマホでは見た目が変わる場合がよくあります。画像を配置する時は基本「配置ナシ」にするのが無難です。中央寄せにした場合は上下のテキストとの間に1行ほど改行を入れると見やすくなります。

右寄せ、左寄せは、パソコンとスマホで表示が変わります。パソコンでイメージして編集するとスマホでは、がっかりな表示になっていることがあります。

編集が終わって「公開」したら、どちらのディスプレイでも確認するようにしましょう。

初心者の場合は「配置ナシ」または「中央寄せ」がおすすめであり、使いやすいと思います。

WordPress の簡単なカスタマイズします どうしてもできない!あんな感じにしたい!などを実現!?

このテーマがおすすめです!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

ドロップシッピング×Wordpress制作代行!

Wordpress制作ショップ(ドロップシッピング)

ドロップシッピング×Wordpress ショップ制作をお手伝い!

ドロップシッピングでバリバリ頑張りたい人を応援するひな型・土台ショップが手に入る!

商品ページがすでに実装されているから分かりやすい!構造や商品ページ作りの勉強にもなる!

扱う商品ごとにショップが分かれています!

興味津々のサイトです!

ショップできすぎくん制作代行

ショップできすぎくんで作ったショップ

副業にピッタリ!将来のために収入源を増やそう!ドロップシッピングは無在庫で無料で始められるネットビジネス!しかも梱包・発送作業ナシ!問い合わせ対応ナシ!リスクが最小限で始められるビジネスです。

ショップできすぎくんはMOSHIMOドロップシッピングの公式ショップ作成ツールです。 作り方が分からない方のためにショップ制作を代行します!納品後すぐに使えます! ブログからの誘導、広告を使って初売上を目指しましょう!

★会社勤めの方、主婦の方、子育て中の方、高齢の方!副業にぜひご活用ください!

  • この記事を書いた人
アバター

<50ブログ>

こんにちはこの<50ブログ>を書いている管理人です。職歴は有名チェーン店飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆50ブログとは、自分の座右の銘です。人は常に50:50の分岐に立たされています。やるかやらないか、どっちにするのか、など。。。話せば長くなるのであとはご想像にお任せします☆

Copyright© 副業・起業に役立つブログ!WEB制作・ネットビジネス応援<50ブログ!> , 2019 All Rights Reserved.