パソコン画面だけ見て作ると残念な画像の回り込み

2017年10月22日(日)16:05

画像に文字を回り込ませるとカッコイイけど…

サイト制作はもちろんですが、ユーザーさんが投稿する場合も、文章がそんなに長くなくて、左右に文章と画像を配置したい時ってありますよね。

こんなふうに画像が配置されていると、パッと見カッコイイなと思うんです。

mawarikomi

 

文字を入力して、文字の一行目の前に画像を貼って右寄せにすると、こんな感じになります。

でも、それだけだと、画像のサイズ設定によっては、スマホで見た時にすごく読みにくい表示になっていることがあるんですよ、

こんなの見たことありませんか?

mawarikomishippai

めちゃくちゃ読みにくいですよね!?
絶対下のほうが読みやすいですよね!

resuponsive

画像の横幅を375px以上くらいにすると、こんなふうに↓ ↓ ↓なります。

100歩譲ってこれくらいならまだ許せる範囲でしょうか。

回り込みが少しマシなケース

iPadで見ると、また見え方が違います。

 

レスポンシブ対応のテーマをダメにしないために

このように、パソコンやスマートフォン、タブレットなど、画面の大きさによって表示の仕方を変えて、見やすくしていることをレスポンシブ対応といいます。

WordPressのテーマも、レスポンシブ対応のものがほとんどになってきているのですが、カスタマイズしてもらったり、自分で投稿する際に、細かいところがレスポンシブになっていなくて残念だなぁと思うことがよくあります。
レスポンシブのテーマを使ってるのに、肝心の読んでもらうところがレスポンシブになってないってことなんです。

まぁ、面倒なんですよ~!
ホントならパソコンの見た目だけでハイ終わりってしたいところ、スマホで見たらどうかな、iPadで見たらどうかなって確認しながら、一つ一つ調整するんですけれども、数字をいじるだけじゃなくて、バナーをPC用とタブレット用で作り替えたリすることもあるし、めんどー!(笑)

でもやっぱりこれをやっておくと、完成して全て確認した時の爽快感が違います。

↓ パソコン画面とタブレットでバナーを作り替えている例

ビジネスホテルつじ井様のサイト

 

投稿時、簡単にレスポンシブにするには

回り込み見本ということで、HTMLをコピペして使うのがめんどくさくない方、説明してわかる方には、ホームページ納品時に、上手く回り込みするコピペ用テンプレートをお渡しします。

何だかよくわからないけど、見えにくい表示はいやだなという方は、とりあえず投稿時に画像を右寄せ左寄せにしないことをオススメします。

どうしてもやりたい時は、横幅を375px以上にすれば、iPhone7s Plusでも、まぁOKかな。

今、このピンクの画像が横幅375pxに設定して、ただ右寄せしただけの状態です。
スマホでは見やすいけれど、パソコンでは逆に読みにくくなっていますが・・・。

編集画面と実際のサイト表示では、見え方が違うので、必ず確認して、行間など調節してくださいね。

 

画像の横幅の変え方

画像のサイズの変更の仕方がわからない方のために説明すると、一番簡単なのはこれ。

sizechage

黒い四角の中が画像のサイズ(横×縦)なので、好きな大きさに調整します。

次に確実に狙ったサイズにサッと変えられるのがこれ。上の図のをクリックすると表示される画面です。

sizechange2

ここで、「右」または「左」にして、「カスタムサイズ」を選択し、左の数字(横)を375以上にして「更新」をクリックです。

これで今の表示になります。

 

あまりパソコンの見た目にこだわらないほうがいい

とはいえ、そもそも最近ではインターネットはスマートフォンで見るという人がほとんどなので、あんまりパソコンでの見た目にこだわるのもどうかなと思うのです。

ビジュアル重視でなく読み物としてブログを運用している方の場合、特にです。
スマートフォンで表示されるタテヨコの並びであればOKなわけ。

なので、画像は中央寄せ、その上下に文章を書けばいいんじゃないかな、って思います。

私が制作する場合は、ちゃんとパソコンとスマホ、タブレットの表示をそれぞれ設定しますので、ご安心ください!

 

カッコイイWordPressサイトをサクッと立ち上げる

 

 

Share Now !Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

コメント欄の「Also post on Facebook」にチェックを入れてコメントするとFacebookにシェアできます。