最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
TopSeesaaブログの使い方>画像周囲にテキストの回り込みをさせる方法

■画像周囲にテキストの回り込みをさせる方法

スポンサードリンク

皆さん、こんばんは!

先日は、記事に画像を載せる方法について説明しました。

まだ見てない方で、よく分からないという人は、参考にしてください。

今日は、画像の周囲にテキストの回り込みさせる方法について紹介していこうと思います。

アフィリエイトにチャレンジする人は、このスキルは、必須なので早いうちに身に付けるようにしましょう!

これも、ブログがないと分かりにくいので、まだ作ってない人は、早速作ってみましょう!

登録は、こちらでできます。

毎度いっておりますが、もうこんなにたくさんの方達が、ブログを始めていますよ。→人気ブログランキング

Seesaaブログ にはもう登録した?

六本木ヒルズ.jpgまた、東京見物の写真ですが、六本木ヒルズの写真です。


こんなふうに、画像の横に文章を書くことができます。画像が、小さい時などに有効だと思います。

それでは、やり方を説明します。

途中までは、先日の記事に画像を載せる方法とまったく一緒です。

ちょっと違うのは、<img src="http://blogdehp.seesaa.net/image/ ***.jpg" alt="***.jpg" width="サイズ" height="サイズ" / >のあとに「align = "left"」と回り込ませたい文章を書き終わったら<br clear="all">を追加して、

<img src="http://blogdehp.seesaa.net/image/ ***.jpg" alt="***.jpg" width="サイズ" height="サイズ" / align = "left">自分が画像の横に回り込ませたい文章をここに書いてください。<br clear="all">

としてください。

これで、画像が左側によって文章が画像の右側に回りこんだと思います。

画像を右側に文章を左側に回りこませたかったら、「align = "right"」としてください。

これで、説明は終わりです。

それでは、皆さん、試してみましょう!

ランキングに参加中!←応援お願いします!

次は、SeesaaBLOGのバックアップの取り方を紹介しようと思います。

ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ
スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
ケンジさん初めまして。
いつも参考にさせて頂いております。

まだ先月の1日に始めたばかりで
全くの初心者なので分からない事だらけで、
くじけてしまいそうです。汗。

今、画像の隣に記事を書きたいと、
あれこれ四苦八苦し、
2時間程が経過してしまいました。笑。

教えて頂きたいのですが、
>ちょっと違うのは、のあとに「align = "left"」と回り込ませたい文章を書き終わったらを追加して、

自分が画像の横に回り込ませたい文章をここに書いてください。

というのは、同じ事を書いているのですか?
それとも違う事なのですか?

それと、「align = "left"」の次にと書いたら、
この「align = "left"」という字も
画像の一番下横に色が変わって写ってしまうのですが・・。汗。

それは、「」ではなく、<>にする必要があり、
height="サイズ" /の後に書くのではなく、
画像を貼った一番最後に
と、本文を書くと云う事なのでしょうか?

それと、画像の横、一番下に1行しか書き込めないのですが、
ケンジさんの様に 画像の横、一番上から書き込むにはどうしたらいいのでしょうか・・。

本当に初心者で 申し訳ありません。m(_"_)m

もしかしたら返信を頂いても
難しくて分からないのではないかと、
不安でもあります。汗。

そして最後に 長々と
貴重なページを使ってしまい、
申し訳ありません。

まだまだ聞きたい事は山程あるのですが、
今日、まずは これからクリアしていきたいと
思っています。

ご指導の程、宜しくお願い致します。m(_"_)m

Posted by ぴょ〜く at 2005年04月02日 01:58
はじめまして、ぴょ〜くさん。

質問ですけど、私の説明が拙いばっかりにすいません。

「」とかつけるからわかりずらくなるんですかね…。

> 教えて頂きたいのですが、
> >ちょっと違うのは、のあとに「align = "left"」と回り込ませたい文章を書き終わったらを追加して、
>
> 自分が画像の横に回り込ませたい文章をここに書いてください。
>
> というのは、同じ事を書いているのですか?
> それとも違う事なのですか?
>
> それと、「align = "left"」の次にと書いたら、
> この「align = "left"」という字も
> 画像の一番下横に色が変わって写ってしまうのですが・・。汗。
>
> それは、「」ではなく、<>にする必要があり、
> height="サイズ" /の後に書くのではなく、
> 画像を貼った一番最後に
> と、本文を書くと云う事なのでしょうか?


記事にも書いているんですが、要するにこうすれば出来ると思います。
<img src="http://blogdehp.seesaa.net/image/ ***.jpg" alt="***.jpg"
width="サイズ" height="サイズ" / align = "left">ここにぴょ〜くさんが画像の横に回り込ませたい文章を書いてください。<br clear="all">
ここからは、普通に文章を書いていただいて大丈夫です。

<と>は、HTMLの仕様上大文字でかいてあるのでブログを投稿する時は、半角に直してください。

> それと、画像の横、一番下に1行しか書き込めないのですが、
> ケンジさんの様に 画像の横、一番上から書き込むにはどうしたらいいのでしょうか・・。

上記のようにすれば一番上から書き込めるはずですよ。

追伸、名前のリンクがSeesaaのトップページになっているので、ぴょ〜くさんのブログをリンクしてもらって
いいですか?ブログを見たほうが、状況がわかると思うので宜しくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月02日 02:21
お返事 遅くなりまして
申し訳ありませんでした。m(_ク_)m

まだ頑張っては みたものの、
ジブンの納得のいくものが出来なかったので
再構築はせず、ブログに反映されていません。

今日は忙しくて 中々出来なかったので、
明日 Seesaa大好きケンジさん(笑)の
ご指導の様に頑張ってみます。

貴重な時間をすみませんでした。

それと、ジブンのブログのURLを
貼ったつもりでしたが、seesaaのTOPが
載ってしまい、失礼致しました。

くれぐれも、荒らしではないので、
ご了承をば・・。笑。

それと、1つの記事に画像を4,5枚載せるのは
可能ですよね?

画像と画像の間に 記事を滑り込ませたいと
思っているのですが、中々思う様にはいかず、
四苦八苦しています。笑。

又明日 時間をちゃんと作って
やってみたいと思っています。

又 上手くいかなかった場合には、
Seesaa大好きケンジさん(笑)に
助け舟を出させて頂きたいと思っております。

本当に 貴重な時間を すみません。
ありがとうございます。m(_ク_)m

Posted by ぴょ〜く at 2005年04月03日 00:38
ぴょ〜くさん、こんばんは。

色々と悪戦苦闘されているようですが、それを乗り越えると
とてもブログは楽しいですよ。
頑張られてください。

> それと、ジブンのブログのURLを
> 貼ったつもりでしたが、seesaaのTOPが
> 載ってしまい、失礼致しました。
>
> くれぐれも、荒らしではないので、
> ご了承をば・・。笑。

大丈夫ですよ。荒らしなんて思っていません(笑)

> それと、1つの記事に画像を4,5枚載せるのは
> 可能ですよね?

可能ですよ。SeesaaBLOGはファイルのアップロードの
容量が大きいのが魅力の一つですからね。

また分からないことがあったら質問してくださいね。
応援しています。
今後とも宜しくお願いします。

追伸、ブログ拝見させて頂きました。
とても記事が多いのにびっくり!私より断然多い(汗)
子供の写真などが、多くてとてもアットホームなブログですね。
ブログの日記としての使い方としてとてもいいと思います。
孫の成長が分かっておじいちゃんとかおばあちゃんとか喜びそうですね。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月03日 01:17
わざわざブログを見に来て下さって
ありがとうございます。

実は私、『まぁ待て、ブログを‥』で
Seesaaと、他のブログで悩んでいたのですが、
Seesaa大好きケンジさんの押しがあって
Seesaaに決めたんです。笑。


それと、一応記事は載せましたが、
違った形をとりました。

まだまだやりたい事があるので、
分からない事があったら
又 教えて下さい。m(__)m

本当に親切にありがとうございました。
Posted by ぴょ〜く at 2005年04月03日 10:58
ぴょ〜くさん、こんにちは。

> わざわざブログを見に来て下さって
> ありがとうございます。

私も他の人のブログを見るのは、とても楽しいです(^_^)。

> 実は私、『まぁ待て、ブログを‥』で
> Seesaaと、他のブログで悩んでいたのですが、
> Seesaa大好きケンジさんの押しがあって
> Seesaaに決めたんです。笑。

そうだったんですか。意外なところで
接点があったんですね(笑)

> それと、一応記事は載せましたが、
> 違った形をとりました。

写真日記のところですよね。
とても見やすくなっていると思います。
テキストの回りこみは、そんなに使う必要ないのかも
しれませんね。

> まだまだやりたい事があるので、
> 分からない事があったら
> 又 教えて下さい。m(__)m>
> 本当に親切にありがとうございました。
>

分からないことあったら、これからも質問してくださいね。
時間の許す限り答えて行きたいと思っています。

今後とも宜しくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月03日 13:18
はじめまして!ハニ子と申します。
実は私もプログの超初心者で、画像の貼り付けに悪戦苦闘している最中ここにたどり着いた次第です。
画像の回り込みの仕方がずっと分からなかったのですが、このサイトに出会ったおかげで無事に解決しました!
ホントに有難うございました!!
Posted by ハニ子 at 2005年04月14日 23:07
はじめまして、ハニ子さん。

お役に立ててよかったです。

もし分からないことあったら遠慮なく言ってくださいね。
私の分かる範囲でお答えしたいと思います。

今後とも宜しくお願いします。

追伸
ブログ拝見させて頂きました。
本、音楽、映画がお好きなようですね。
ブログは、好きな時に好きな事をかける所がいいところだと
思うので、これからも頑張られてください。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月14日 23:19
ケンジさんはじめまして。
ブログ初心者の ん!?と申します。

お陰さまで画像の回り込み出来ました。
悪戦苦闘していたところなんです。
ありがとうございました。

ケンジさんのブログとても参考になりますね。
ありがたいありがたい…
隅から隅までよーく読ませていただきますね。
これからもよろしくお願いします。

Posted by んっ!? at 2005年05月02日 21:42
はじめまして、んっ!?さん。

私の拙い説明で分かっていただけてよかったです(^_^)

ブログは色々できてとても楽しいと思うので
頑張られてください。

今後ともよろしくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年05月02日 22:35
ケンジさん、こんにちは。
いつもお世話になっていますm(__)m
ようやっと、画像の横に文字を入れる作業が
できました。でも、
1)文字の下の線、消せませんか?
2)色を変えるにはどこを直せばいいでしょうか?
3)画像の中央に文字を入れるにはどうしたらいいのでしょうか?
教えて下さい。
宜しくお願いしますm(__)m
Posted by おっかあ♪ at 2005年05月19日 14:46
ケンジさん、こんにちは。
今日、やっと画像の横に文字を入れる作業がなんとかできました。でも・・
1)文字の下の線は消せますか?
2)文字の色を変えるには?
3)画像横中心に文字を入れるには?
以上3つの質問です。
宜しくお願い致しますm(__)m
Posted by おっかあ♪ at 2005年05月19日 16:22
こんにちは、おっかあ♪さん。

今回もまたまた記事にさせて頂きました。
http://blogdehp.seesaa.net/article/3750952.html

ちょっと難しいかもしれませんが、頑張ってください。

Posted by Seesaa大好きケンジ(管理人) at 2005年05月19日 18:58
ケンジさんはじめまして。
あおきと申します。
最近、ブログを始めたばかりで分からないことだらけの中、こちらにたどり着きました。
大変、参考にさせていただいてます。

これからもたびたびお邪魔するかと思いますがどうぞよろしくお願いします(^_^)


Posted by あおき at 2005年10月17日 12:31
ども、ハートです。

ブログはじめたはいい物の
画像の貼り付け方に悩んでいたので
いやー助かりましたょ。

まだseesaaブログをはじめて間もないので
ちょくちょく訪問しますね。
Posted by ハート at 2005年10月29日 22:14
はじめまして、今年からブログで日記を始めたド素人の者です。
やり方がわからず、悩んでいます。
ヘッダーの右横の開いているスペースでちょうど右サイドバーの上あたりのスペースに、右サイドバーの横幅と同じサイズの画像を貼り付けたいのですがどうしたらいいでしょうか?画像のサイズを変えるやり方もいまいち理解できないですし・・・ご指導宜しくお願いします。
Posted by 原田加寿世 at 2006年02月05日 13:25
こんにちは!

ケンジさんのアドバイスに助けられ、ようやくここまでカスタマイズできました♪

ひとつ気になることがあり、ぜひ、アドバイスをお願いしたいのです!

画像の周りに文章を入れ込ませることに成功したのですが、画像のまわりにスペースを付けたいと思うのですが、わがままでしょうか?

画像と文字が接近しすぎて、文字も読みづらいですし、画像も文字に囲まれて全体的にすっきりしません。

画像をテーブルなどに入れるような作業はできますか?テーブルを入れて、画像より少し大きいスペースを取り、そこに貼り付ける・・といような形になるのでしょうか?なにか、簡単な方法はありますか?

某ex○tブログでは、この作業が自然に出来、また画像の周りに一文字分くらいのスペースが綺麗に出来るんです。はやくseesaaもこの機能をつけてほしいですよねぇ。
今、seesaaでは、二つのブログを使用しています。もうひとつのワンコと暮らす私の日記http://cyocobox.seesaa.net/なんですが、こちらはただのお遊びなので、画像は適当でよかったのですが。今回、いろいろ真剣にseesaaのお勉強をしました。

これからも、ケンジさんのこのサイトはお気に入りの中でもきっと一番クリックする回数が多いと思います。メルマガも、楽しみにしています♪
Posted by hito at 2006年05月05日 10:58
JavaScriptで作ってあった場合、どうやって回り込みをさせればいいんでしょうか。

今までは普通のHTMLだったからわかったんですが、JavaScriptに変わったら全然できなくなりました。

お願いします。
Posted by Yoshi at 2007年02月23日 06:13
新しいWindows プロダクトキー、Windows 7 プロダクトキー、Windows XP プロダクトキー、Windows 7 Ultimate プロダクトキーを取得するなら、myonlinesoft.comのオンランサイトへどうぞ!送料無料です!Windows プロダクトキー、Windows 7 プロダクトキー、Windows XP プロダクトキー情報を掲載しております。新作の通販情報などもお任せ下さい
Windows 7 Professional プロダクトキー:http://www.myonlinesoft.com/goods-22.html
Windows 7 Ultimate プロダクトキー:http://www.myonlinesoft.com/goods-21.html
プロダクトキー 販売:http://www.myonlinesoft.com/article-14.html
Windows 7 Ultimate 販売:http://www.myonlinesoft.com/goods-49.html
Windows プロダクトキー:http://www.myonlinesoft.com/category-14-b0.html
Windows 7 プロダクトキー:http://www.myonlinesoft.com/category-14-b0.html
Windows XP プロダクトキー:http://www.myonlinesoft.com/goods-30.html
Posted by Windows プロダクトキー at 2012年04月01日 17:28
こんばんは。先程RegistryLifeを1.40にアップデートし、こちらの日本語パッチを当てようと致しましたら、「CRCが一致しません」との反応が。
XP32bit・Vista32bit両方で、アンインストール後に再インストールしてみても同じでした。
パッチは本体とのフォルダで実行しております。hhgfhgfhdhfd
Posted by christian louboutin lady peep 150mm at 2012年04月23日 11:33
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック
この記事へのTrackBack URL
http://blog.seesaa.jp/tb/2413378
※スパム対策のために管理人が承認したトラックバックのみ表示させて頂いています。
すぐに表示されないからといって連続で送る必要はありません。
※半角英数字のみのトラックバックは受信されません。

画像の横にテキスト
Excerpt: 単なる自分用の覚書です。 画像の横にテキストを回り込ませるには、imgタグで画像を挿入しaline属性を指定することでテキストの配置を指定できます。 ●画像を左側に置きテキストを右側に費配置する..
Weblog: WEBLOG
Tracked: 2006-05-18 15:18

このページのトップへ▲
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。