文字の回り込み(FC2ブログ)

今回は文字の回り込みについて書いてみたいと思います。
「文字の回り込み」とは……

09073009.jpgこのように画像の横に文字を書いていく方法です。

通常は画像の横に文字を入力しようと思っても、写真の下部に沿った一行にしか入りません。
回り込みを指定してやることによってこのように横に文字を書けます。

例えば……同じように入力したつもりでも……

09073009.jpg「このように画像の横に文字を書いていく方法です。
通常は画像の横に文字を入力しようと思っても、写真の下部に沿った一行にしか入りません。」
となってしまうわけです。

09080301.gifところで…FC2ブログをお使いの皆様はどちらの入力方法で記事を書いておられるのでしょうか?
通常の↑こんな画面?

09080302.gif
それとも←「高機能テキストエディタ」と呼ばれるこんな画面?

私はいつも上の画面ばかりで、下の「高機能テキストエディタ」はちょっと使いにくく感じるので、たまにFLASHを挿入する時などにちょこっと使っているだけですが、「高機能テキストエディタ」を使うと視覚的に文章や画像の配置が自由にできるのでタグだけで書きにくい場合はこちらを使われるとよいかもしれません。

09080303.gif「高機能テキストエディタ」を使用する場合はツールバーの「W」マークのアイコンをクリックすると使えるようになります。

さて、本題です。

まずは…「高機能テキストエディタ」を使わない方法から。
私はこちらの方が簡単だと思っています。
いつも通り画像を挿入します。(↓黒色文字部分)
そして画像を左に配置し、画像の右側に文字を配置したい場合は「align="left"」を↓赤字部分に打ち込みます。

<a href="https://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09073009.jpg" target="_blank"><img src="https://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09073009s.jpg" alt="09073009.jpg" border="0" width="230" height="158" align="left"/></a>


右に画像、左に文字の場合は「align="right"」と入れるだけです。
そして文章が終わったところで「<br clear="all" />」と入力しておきます。

例えば……上記1枚目の画像と文章の部分では……
このようになっています。

<a href="https://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09073009.jpg" target="_blank"><img src="https://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09073009s.jpg" alt="09073009.jpg" border="0" width="230" height="158" align="left"/></a>このように画像の横に文字を書いていく方法です。

通常は画像の横に文字を入力しようと思っても、写真の下部に沿った一行にしか入りません。
回り込みを指定してやることによってこのように横に文字を書けます。

例えば……同じように入力したつもりでも……<br clear="all" />

というふうになっています。

「<br clear="all" />」をつけ忘れるとレイアウトがおかしくなったりしますので、つけ忘れないようにしてください。

「align="left"」「align="right"」「<br clear="all" />」は自分が覚えやすい言葉で単語登録しておくと便利です。




09080304.gif「高機能テキストエディタ」を使う場合は…
このボタンから画像を挿入します。

09080305.jpg
画像をクリックしてイメージプロパティ画面を出します。

09080306.jpg
「行揃え」の▼マークをクリックし、画像を左に配置したい場合は「左」を、画像を右に配置したい場合は「右」を押して「OK」。

09080307.jpgこれで画像を右や左など、自由に配置することができます………。
たぶん…。

無責任ですが…「高機能テキストエディタ」を使って画像を配置させて記事を書くことがないので、詳しい使い方が把握できておりません。
 
ゆえに「高機能テキストエディタ」を使用される場合は、こんな感じですので、いろいろと試してくださいm(__)m
ごめんなさい

関連記事

18 Comments

ニュータイガー8  

こんにちは

またしても興味のある記事です、次回で早速試してみます
高機能テキストエディタでない方でやってみるつもりです
上手く1回でできれば嬉しいです

2009/08/04 (Tue) 17:32 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/08/05 (Wed) 04:49 | REPLY |   

れん  

ニュータイガー8様

文字の回り込みができると、小さい写真を使った場合見た目が違ってきますよね♪

私は「高機能テキストエディタ」でない方が使いやすいと思うのですが、また一度「高機能テキストエディタ」でもされてみて、ニュータイガー8さんのやりやすいと思う方を見つけてください。

「テーブル」を使う方法もありますので、こちらもまた書いてみます。

2009/08/05 (Wed) 08:43 | EDIT | REPLY |   

れん  

鍵コメ2009/08/05(Wed) 04:49 様

OKでしたか~。
例えば「align="left"」を「左」とか単語登録しておくと使いやすくなりますよ。

回り込みを使った記事を楽しみにしています♪

2009/08/05 (Wed) 08:49 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/08/05 (Wed) 22:41 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/08/06 (Thu) 13:11 | REPLY |   

バタースコッチ  

コレかなり知りたかったことなんです~!
いつも「どうするんだろなー」と思いながら、自分で調べる気合はなく。。。れんさんありがとうございますe-349e-460
早速次回試してみるですぅ♪ちなみに私も
高機能でない方派でーす。

2009/08/06 (Thu) 21:09 | EDIT | REPLY |   

れん  

鍵コメ 2009/08/05(Wed) 22:41様

わざわざご挨拶に来てくださってありがとうございますm(__)m
鍵コメさんのお気持ちわかるような気がします。
これからも写真あり~の、テンプレートのお話しあり~の…なんでもありの記事を書いていきますので、おヒマがありましたらお立ち寄りくださいね~。

ええ、ええ!
100点ですっ!
だって……余白までちゃんと取ってあったんですもの♪

2009/08/06 (Thu) 22:32 | REPLY |   

れん  

鍵コメ 2009/08/06(Thu) 13:11様

いつも応援ポチありがとうございます♪

ネットでのご縁、ワンちゃん仲間と再会できたこともネットがなければあり得なかったことですが、こうやって鍵コメさんはじめ、たくさんの方と出会えてネットを通じていろんなお話しができることも私にとっては幸せなことです♪
全てのご縁、大切にしたいです♪
これからも仲良ししてくださいね~(#^.^#)

2009/08/06 (Thu) 22:36 | REPLY |   

れん  

バタースコッチ様

スコッチさん、いらっしゃいませ~m(__)m
いつも覗かせていただいては読み逃げ…申し訳ありませんe-466

回り込み試してみてくださいね♪
「高機能でない方」のが絶対に使いやすいですよね~。
以前普通ので使ってて、「テーブル」を使う時に高機能にして使ったことがあるのですが、そのたびになぜかタグが一部おかしくなって、いちいち訂正しなくてはならなかったり、コピーや切り取りが右クリックで使えなかったり、動作反応が鈍かったりで、どうも使いづらく感じてしまうのです…。
自由度は高いかもしれませんけど…。

また来てくださいね~。
私も今度行った時は足跡残して帰ります( *^艸^)
コメントありがとうございました~。

2009/08/06 (Thu) 22:41 | EDIT | REPLY |   

バタースコッチ  

こんばんわ☆

ご無沙汰です~(時々こっそり覗いてはいましたが(;^_^A アセアセ・・・)
ここで教わった「文字の回りこみ」、とっても重宝させていただいてます♪♪
それで、ウチのブログによく立ち寄ってくださる方が
「上手にしてますね」みたいなコメを寄せてくださったので、
コチラで伺ったんですよ~ってな感じでlink貼らせて頂いても
差し支えないでしょうか???

OK頂けたら、ちょこっと記事にしたいと思ってますので、よろしくお願いします♪

2009/10/21 (Wed) 20:13 | EDIT | REPLY |   

れん  

バタースコッチ様

こちらこそご無沙汰ばかりで申し訳ありません。

文字の回り込み、使ってくださってるんですね(#^.^#)

リンクの件大丈夫です!
わざわざご連絡いただいてありがとうございますm(__)m
OKですので、ぜひリンクしてやってくださいませm(__)m

2009/10/22 (Thu) 01:36 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/05/17 (Mon) 05:57 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/05/17 (Mon) 19:00 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/05/17 (Mon) 21:44 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/05/17 (Mon) 23:17 | REPLY |   

aya  

れんさんこんばんは。
今日はムスコの遠足でした。

回り込みの件で色々としていただき
本当にありがとうございました。
他のテンプレにすると私のパソコンからも画像横に
文がきてるのですが、今のテンプレですとどうも駄目なようです。
他の方からみたら横になっているようですのでこのままで
やっていきたいと思います。
れんさんのブログこれからも拝見させていただきますね!
ためになることばかりですので読んでいて楽しいです♪
応援していますe-349

2010/05/18 (Tue) 21:59 | REPLY |   

れん  

aya様

昨日はお天気も良く、息子君遠足を楽しまれたことでしょうね♪
今日はこちらは朝からずっと雨です…e-95

文字の回り込みの件、なぜなのか不明ですが、きちんと回り込んで見えていますので、ご安心を!(?)

何でもありの一貫性のないブログですが、これからもよろしくお願いしますm(__)m
私もお邪魔させていただきま~す♪

2010/05/19 (Wed) 15:40 | EDIT | REPLY |   

Post a comment