画像の横に文字が回り込んでしまうトラブルの解決法(ワードプレス)

どうも、穹音春海です。

 

今回は画像の横周りを解除する方法についてお話したいと思います。

 

画像の横に文章が回り込んでしまうと、

読んでいる人の集中力が途切れてしまうとの事なので、

私は画像の横には文章を置かないようにしています。

 

そんなわけで、

今日はワードプレスにおける画像と文字の回り込みについてのお話です。

 

 

☑回り込みとは。

 

これの事ですね。

 

%e7%94%bb%e5%83%8f%e3%81%ae%e5%9b%9e%e3%82%8a%e8%be%bc%e3%81%bf

 

色の濃い部分が画像です。

 

上の場合は画像の横に文字が回り込んでいますね。

 

それに対して下の場合は画像の横には文字を置かず、

画像の下から書き出しています。

 

 

☑改行してごり押しすると・・・

 

私も初心者の頃は文字が回り込んでしまう時は

回り込みの行を改行して対処していたのですが、

それを繰り返していたらこんな風に、

デバイスを変えた時に不格好になってしまうんですね。

 

%e6%94%b9%e8%a1%8c%e3%81%a7%e3%81%94%e3%82%8a%e6%8a%bc%e3%81%97%e3%81%99%e3%82%8b%e3%81%a8%e3%83%bb%e3%83%bb%e3%83%bb

 

 

ごめんなさい、少し見にくいのですが、

タブレットの画面だとこのように、

 

画像と文章の間に差が開きすぎてカッコ悪い事になっています。

 

 

☑floatタグは打ち消される

 

私はこの問題を解決するために<br clear=”all”>と言うタグを配置することで

文字の回り込みを削除しようとしたのですが、

この方法を使うと、「テキスト」→「ビジュアル」に戻した時にタグが無くなってしまいます。

 

なので、この方法はワードプレスでは使えないんですね。(苦笑)

 

 

☑解決方法は簡単だった。

 

そんなこんなで半日くらいこの問題について

調べたり、実践したりしていた所、

解決法に出会いました。

 

それがこれです。

 

%e6%96%87%e5%ad%97%e3%81%ae%e5%9b%9e%e3%82%8a%e8%be%bc%e3%81%bf%e3%82%92%e8%a7%a3%e9%99%a4%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95

画像をクリックすると、

画像の上の吹き出しに図解で出ていました。(苦笑)

 

左から順番に

 

・画像を左側にして、右側にテキストをまわりこませる

・画像をサイト中央に持ってくる

・画像を右側にして左側にテキストをまわりこませる

・回り込みを解除する

 

このようになっています。

 

 

☑これで問題解決です。

 

今回はあっけなかったですが、

さまざまなサイトがfloatタグでの設定方法について記述していたため、

私のサイトで解説する事にしました。

 

この方法を使えば、

スマートフォンやタブレットなど、

デバイスを変えても上の画像のように改行でおかしくなるトラブルを防ぐ事が出来るわけなんですね。

 

それでは、是非とも使ってみてください。

 

 

 

 

コメント

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

筆者紹介

穹音春海
    【穹音春海】

1995年に生まれた凡人です。

貧乏な家庭に生まれ、子供の頃からお金に困った生活をしていました。

高校の時に初めて人生を逆転するために有名国立大学を目指して勉強する事に決めましたが、理想はなかなか上手く行かないもので、勉強しても偏差値が伸び悩み、程遠い学力で第一志望に挑むも、結局ボーダーすら突破できず人生終了しました。

自宅浪人中は実質ニートな上、お金に困ってるわけですから、勉強しながらも稼げる方法を探しました。

そしてたどり着いたのが、

・学歴なし
・資格なし

の自由な世界でした。

覚える事もセンター試験より少ないうえ、パソコン1台で稼げるので、今では自由気ままな生活を送っています。

その方法を教える事で生計を立てていますから、
聞きたい事があればなんなりと質問してくださいね。

名刺

名刺

穹音の企画

チーム穹音



穹音の企画



穹音の企画02


推奨商材

『情報商材の白チャート的存在』


>>詳細はこちら


物販アフィリで稼ぐための初めの一歩

風花初芽


『書いた文章が伝わっていない方へ』


ミリオンライティングのイメージ

>>詳細はこちらをクリック


『メール1通で100万円稼ぐ現実的な方法とは』


>>詳細はこちらをクリック


『ツールに言われた事だけやってれば稼げる再現性の高いノウハウ』

ass[answer sheet system]

詳細はこちらをクリック

推奨無料商材

ダウンロード数100を突破してます。

宇崎恵吾のコピーライティングレポート

宇崎恵吾のコピーライティングレポートの詳細はこちらをクリック。


期間限定で
1000円⇒0円
まだ手に入れてない方は
早めに手に入れてください。

自由な人生を手に入れる教科書の詳細はこちらをクリック

特典を受け取れなかった方へ

特典が送付されてない、特典を受け取る事が出来なかったという方は、

「注文日」
「注文ID」

をご記入の上、コメント、またはメールを送ってください。
確認が取れ次第特典をメールに送付させていただきます。

推奨テンプレート

穹音春海愛用のテンプレート


FMテンプレート

>>詳細はこちらをクリック


「最高のSEOを誇る本格派テンプレート」


>>詳細はこちらをクリック

穹音春海のメール相談

ブログランキング(日本ブログ村)

日本ブログ村 ランキング


オススメポイントサイト

モッピー!お金がたまるポイントサイト

友達紹介のシステムと
2ティアシステムで
不労所得も可能に!?

詳しく知りたい方はこちらをクリック

アーカイブ

カテゴリー

▲トップへ戻る