ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

WordPressで写真の横にちょっと出てる文字をなんとかしたい!

約 4 分

WordPress使い始めだと、慣れてないぶん困ったことって結構出てきますよね。

今回はWordPress4日目に僕が体験した「写真のワキにちょっとだけ文章が出てくる問題」。その解決方法を書きたいと思います。

チャッキー
HTMLってバカでも出来るって思ってたけど相当難しいですね。空間タグってなんだよ!!

画像の横に文字がちょっこっと出て困る

ちょっと前に、作ったサイトで困った事が発生しました。
その状況がコチラ↓↓です。

なんか写真の横に意図せぬ文字が並んでいます。

僕は画像を左あわせにして文章は写真の下から始めたかったんだけど・・・

こんな感じで↓↓↓

原因は写真のサイズとサイト幅でした。

サイト幅が800で、写真サイズが600 余った200のスペースに文字が書き込まれてしまったようです。

絶対に真似してはイケない、オレのダメな対処法

その時はどうすればいいのか?わからなかったので、その場しのぎで「Pタグ」を連打することにしました。

僕が使ったのは「<p>&NBSP;</p>」です。

こいつを連打することで写真の右に出てきていた文字を強制的に下に移動する事ができます。

超アナログな対応ですが、ワードしか使ったことのない僕はこう思ってました。

チャッキー
コレが正しい方法だ

しかし!この方法はPCを見ている人はOKでも・・・

スマホで見ている人にとっては意味不明。

 

ある大きな問題が発生していました。

 

それは「写真のあとに意味のない空白の出現!」

スマホ画面の幅はPCに比べ狭いので、写真の横に文字を表記するスペースがありません。

しかし、僕のHTMLコードには超大量に改行するように記述してあるわけです。PCで見ている人はOKだけどスマホの人は、いきなり長い空白が表示されるのでチンプンカンプンです。

正しい解決方法!

解決する前に1つだけ忘れちゃいけない事があります。

それは、画像の横に文字が出てくると便利なこともあるってことです。

例えばこんな感じ↓ ↓ ↓

 

このように写真にあった文字をキレイに配置することも出来るってこと。

ちなみに画像の横に出てくる文字を「回り込み」と言います。

ココからが本題!解決するためにはどうしたらいいのか?

答えは「回り込みを解除する」です。

 

CSSに回り込み解除用のコードを記述すれば良いんです。↓↓↓

そして上の「.clear」をHTMLの画像に追加してあげれば良いのです。

 

「.clear」を動かすためにはbrタグにクラスをつけてこんな感じ↓↓

上のHTMLを写真の後に追加してあげれば、回り込みは解除されるので、写真の下位置から次の文字が打ち込めます。

こうすれば、スマホで見たときもPCと同じように見れます\(^o^)/

回り込み解除はこんなに便利だった。

例えば下のように、ある程度写真の横に文字を配置したいけど、写真のほうが長くて、文章が途中で終わってしまうことってよくありますよね。

そんな時は、横に配置したい文字の終わりに「回り込み解除」のHTMLを記述すればOKです。

※改行タグや空間タグを連打することなく簡単に行なえます。

この回り込みタグ解除は、写真を沢山使う人やレイアウトを気にしているオシャレな方には必需品だと思います。是非、使ってみてはいかがでしょうか?

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

オススメ記事