アメブロ ブログ記事 画像の回り込みをする方法とは?

アメブロ ブログ記事 画像の回り込みをする方法とは?

アメブロでも、他のブログでもそうですが、
記事の見せ方にも、ちょっと工夫を・・・

これとっても大事なことです。

画像の横に、本文を回り込ませる方法です。

 

 

 

ブログで画像をたくさん使っている方、多いですよね。

 

私もそうなんですが、画像を入れることによって、
文章よりも、読者さんにとって解りやすい場合もあります。

 

画像や、動画などは【見せる記事】作りに役立ちます。

 

もちろん、これは記事を読んでいただくとともに、
ブログのPVや滞在時間を延ばすことにもなりますので、
取り入れたほうがいいですね。

ただ、画像加工などできない!!

 

っていう方は、フリー素材などをちょっとポイントで入れるもよしです。

 

ワードプレスには、アイキャッチといって、
記事を見た時に、まず目に付く画像のことですね。
ちょっと意味合いが違ってきますが、アイキャッチの役目は、
画像を使って、記事のテーマを一目で伝える役割をしています。

 

記事の内容の中でも、解説をした方がいいなーとか、
きれいな画像の横に、コメントや記事を書きたいなーってことも
ありますよね?

 

そう、イメージとしては新聞のように、
回り込みをかけて、画像の横に記事を見せるようにする方法
ちょっとご紹介します。

 

 

このブログでも、一番上の部分は、
画像を左にして、右に回り込みをしています。

 

 

画像に回り込みをかける設定と、
その横にちょっと余白を入れる設定
回り込みを解除する設定をすると、
文章が画像の横に入って、解除した後にも文章が続けられるように
スムーズに流れるような、設定をしていきましょう。

 

こんな感じのイメージです。

右に回り込み

右回り込み

左に回り込み

左に回り込み

 

アメブロだけでなく、他のブログにも使えますので、
覚えておくと便利です。

 

アメブロの記事投稿を例にとります。
他のブログでも、HTMLタグは同じだと思いますので、
試してみてくださいね。

まず、画像をアップします。

HTMLタグを見てみましょう。

こんな感じの記述だと思いますよ。

<img src=”アップロード画像” style=”スタイルの設定など”>

 

ここで、回り込みの設定と
回り込んだとき、画像と文章との余白の設定をします。

 

右に文章を記述させたい場合

float: left;

左に文章を記述させたい場合

float: right;

画像の余白の一括処理

margin: 0px 0px 0px 0px;

marginは、余白のことです。

 

数字(余白の大きさのことですね。)をいろいろ調整してみてください。
今は全部0になっていますよね。
ここで、上下左右の余白サイズの設定をします。

 

設定する順番は下記の通りです。

上・右・下・左

 

画像の右にちょっと余白を入れる場合は、
こんな感じです。

 

margin: 0px 20px 0px 0px;

 

このコードを、アップロードした画像に追加します。

つまり、こんな感じになります。

 

 

一番最後にコードを追加すると、解りやすいかもですね。

次に、回り込みを解除して、文章を画像の下、(次の段落)に入れるときは、
必ず、解除のコードを追加します。

回り込み解除

 

多分、文章を書いていくと最後に</p>タグで閉じられていると思いますので、
その後ろに、<br clear=”left”>を追加しましょう。

 

 

回り込みが解除され、文章も改行されます。

 

回り込み・解除をした感じはこんな感じです。

回り込み

 

どうでしょう?

 

画像の説明などに使えますよ♪

 

ちょっとしたタグなので、覚えておくと便利です。

 

見せる記事の場合は、いろんなHTMLタグを覚えておくと、
いろいろ応用できますよ。

 

ぜひ、お試しあれ!!
 
 

 
A6A6

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 
 

 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ