大阪府堺市のSEO・MEO対策ホームページ制作会社
トランジット( 合同会社うえせいや)
営業時間 9:00〜17:00(土日祝休)

コピペでできる! 画像にテキストを回り込みさせて、スマホでは横幅いっぱいに表示させる方法

回り込み
LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

合同会社うえせいやの最新情報をお知らせします。

友だち追加

sponsored link

うえせい写真

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

取引実績業種

公立高校・各種クリニック・歯科・産婦人科・商店街・鍼灸院・整骨院・整体院・ホテル・ネイルサロン・各種モデル・講師業・生花店・ベビーマッサージ協会・カメラマン・自動車教習所・占い・飲食店・各種クリニック・旅館・ホテル・宿泊施設・など

全国どこでも対応可能です

メールはもちろん、SNSや、LINE、スカイプなどを使ってしっかりとコミニュケーションをとりながら、進めることが可能です。
もちろん、お近くの方や、仕事で行くとこの多い関東圏であれば、実際お会いしてのコンサルティングやレクチャーも対応可能です。

面談可能地域

堺市堺区・堺市中区・堺市東区・堺市西区・堺市南区・堺市北区・堺市美原区・和泉市・大阪狭山市・泉大津市・岸和田市・貝塚市・泉佐野市・泉南市・松原市・富田林市・大阪市此花区. 大阪市福島区 · 大阪市北区 · 大阪市都島区 · 大阪市旭区 · 大阪市港区 · 大阪市西区 · 大阪市中央区 · 大阪市城東区 · 大阪市鶴見区 · 大阪市大正区 · 大阪市浪速区 · 大阪市天王寺区 · 大阪市東成区 · 大阪市西成区 ·大阪市阿倍野区 · 大阪市生野区 · 大阪市住之江区. 大阪市住之江区. 大阪市住吉区 · 大阪市東住吉区 · 大阪市平野区・吹田市
※ここに掲載されている場合でも、一部地域では困難な場合もございます。

最近のブログやホームページは、スマートフォンで見てもらうことほとんどとなってきいています。

このため、画像に関してはスマートフォンで見た時と、見え方が変わらないように横幅いっぱいに配置することが多くなっているようです。

girl.png
A さん

それでも、画像の横に文字を表示したいのですが・・・

という、ご質問を頂いても、あまりおすすめしていませんでした。

 

sponsored link

画像の横に文字を回り込みさせることをオススメしない理由

回り込みをさせて、パソコンで表示した場合

回り込み表示サンプル
▲このように左側にある桜の写真に対して右側に文字が表示されることになります。

 

uesei.png
うえせい

ちなみにWordPressで、文字を回り込みさせるには?

写真を挿入する際に、「添付ファイルの表示設定」にある「配置」を「左」もしくは、「右」にすると、写真が左右どちらかに寄って、その空いたスペースに文字が回り込むようになります。
回り込みをさせる方法

 

回り込みをさせた時に、スマートフォンで見ると、残念な結果になることもある

スマートフォン画面の横幅より、少し小さいサイズの画像を使っていた場合、文字を表示するスペースが少なすぎて、逆に読みづらくなる結果になってしまうことがあります。
文字の回り込みをスマートフォンで表示した場合

 
現在のスマートフォンは巨大化していて、サイズが機種によってまちまちです。
全部の機種やサイズに完璧に対応させることはできないとは思いますが、多くの端末では見やすく表示させたいものですからね。

girl.png
A さん

でも、だいたいみんなiPhoneでしょ?

uesei.png
うえせい

いやいや、半分弱はAndroidで、大きさがまちまちだし、iPhoneでもいろいろ画面サイズあるでしょ?
それに、タブレットだってあるし

uesei.png
うえせい

このため、文字を回り込みをさせことはオススメしていないのですよ

girl.png
A さん

と言っても、パソコンで見たときに写真が大きすぎて気になるし、小さくしてスペースが空くのも気になるんです

 
ということで、パソコンでは文字を回り込みさせておいて、スマートフォンでは横幅いっぱいに表示させる設定にしてみました。

 

CSSを追加してください

/*----------------------------------------------------
  .res-img
----------------------------------------------------*/
.res-img { width: 40%; height:auto; }

@media only screen and (max-width:640px){
  .res-img {
  width: 100%;
  }
}

なにを、書いているかというと、res-imgというクラスの画像は横幅を画面に対して40%にしておいて、画面サイズが640px以下のスマートフォンなどで見ている時は、画像を横幅いっぱい100%で表示させる。

ということを書いています。

※パソコンで表示させる時に、40%ではなくこの値を変えると横幅が変わり、縦はautoにしてあるので、画像の大きさを変えることが可能です。

 

HTML側やること

<img class="res-img alignleft" src="http://www.hogehoge.com/sample.jpg" alt="HTMLサンプル" >

「alignleft」というのは、左側に寄せるようにするものですが、それにさきほど追加したCSSの「res-img」を追加することで完成です。

 

表示させみると

スマートフォンでピッタリ表示
このように横幅いっぱいに画像が表示されるので、文字はその下から表示されることになります。

 

【まとめ】スマートフォン全盛とはいえ、たまたまパソコンで見た時の表示も気にしたいですからね

うえせいイラスト
パソコンでは文字を回り込みさせて、スマートフォンでは画像を100%表示させて、回り込みをさせないという設定をしてみました。

この設定を行うことによって、スマートフォンとパソコンでの見た目は変わりますが、スマートフォンだとちょうどいい画像のサイズでも、パソコンだと大きすぎるなんてこともありますよね。

かと言って、小さい画像を回り込みさせていないと、なんかどうしても素人くさいページになってしまう・・・。

そんな時に、このCSSをコピペして使ってもらうといいですよ。

では、また。テリマカシ。

 
【関連記事】WordPressをサブディレクトリにインストールして、ルートディレクトリに表示する方法

【関連記事】WordPressに会話形式の吹き出しプラグイン「Speech Bubble」を入れてみた

【関連記事】長いURLを記事に記載した時に、スマホ表示で右側に余白ができしまう時の対処法