個別記事のページです

2015年1月22日(木)
このエントリーをはてなブックマークに追加

画像を追加する時にテキストの横に配置させる方法

ブログを公開する時に、いつも画像の下にテキスト、また画像の下にテキスト...の繰り返しで
見た目が少しなぁ...画像の横にも文章を表示させたいなぁとお考えの方もいらっしゃると思います。


そこで、テキストの横に写真を載せてみようと思います。


早速タグでテキストの横に画像が出るように入れてみたものの...

<p><img src="photo01.jpg" width="200" height="auto">ここに本文を入れます。ここに本文を入れます。</p>

画像をブログに投稿しようとするとありがちな場面

このように、あまりかっこよくない見た目になってしまいます。


回り込み機能を活かそう!

画像を左に表示させて、テキストも画像の先頭に合わせて表示した方が見た目が良いですよね。


その場合は画像に回りこみのタグ「align="left"」を入れると回り込みが簡単にできます。

<p><img src="photo01.jpg" width="200" height="auto" align="left">ここに本文を入れます。ここに本文を入れます。</p>

テキストに対して左寄せにした画像


そのままでは画像とテキストの間隔があいていなくて窮屈なので、イメージに対して以下のように
マージンをかけると文字が読みやすくなりますね。

<p><img src="photo01.jpg" width="200" height="auto" align="left" style="margin:0 10px 10px 0;">ここに本文を入れます。ここに本文を入れます。</p>

マージンを付けて画像とテキストの間隔を調整する


align="right"」にすれば画像を右側に寄せられます。

<p><img src="photo01.jpg" width="200" height="auto" align="right" style="margin:0 0 10px 10px;">ここに本文を入れます。ここに本文を入れます。</p>

画像を右寄せにする場合


画像の回り込みを活かして、以下のように複数の画像を使うとブログ記事の見た目も楽しくなります。

画像の回り込みを複数使った例


ブログ記事を投稿する際に画像の投稿はSEO的にも良いので、いつものブログを楽しく見せたい、
ちょっと工夫したい...などなどお悩みの方は是非お試しください!

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ