2009/6/18 お知らせとお詫び
今年最初のSeesaaブログ機能改定以降、下記の方法がうまくいかなくなりました。
(この記事ではなぜかちゃんと回り込んでるんですが、他のページでは回り込まなくなってしまいました。原因はわからずじまいです。ごめんなさい。)
別のブログで、CSSで指定する方法について書いてありますので、ご参照ください。2006/5/8 本文修正
* * *
Seesaaブログには「回り込み」(画像の周りにも文章を流し込むこと)を簡単に設定するものがないんですよね。
でも、自分でタグを入れれば、このブログのように回り込みができるようになります。
これができると、レイアウトがさらに楽しめますよね。難しくないのでぜひ試してみてください。
imgにスタイルを設定します。
タグの基本は専門に書いているHPやブログ等を見てくださいね。
⇒ 一例:Webページ作りのお勉強(サイトはこちら)
-------
▼画像の右側に文章を流し込む(左寄せ)

<img>の中に
<img src="画像のURL" style="float:left" />
という具合に、赤い文字の部分を書き足してください。
直前の"の後に半角のスペースを入れてくださいね。
<img>タグの後は改行しないで、そのまま文章を書きます。
▼画像の左側に文章を流し込む(右寄せ)

<img src="画像のURL" style="float:right" />
という具合に、赤い文字の部分を書き足してください。
これも、<img>タグの後は改行しないで、そのまま文章を書きます。
▼画像の周りの余白を指定する
デフォルトのままだと、画像と文章がくっつきすぎですね。
特に画像を左寄せにしたときに気になります。
そこで、このブログでは画像の左または右に余白(マージン)を10px入れています。
画像を左に配置して、画像の右側の余白を10pxに指定するには、
<img src="画像のURL" style="float:left; margin-right:10px" />
となります。

画像と文章との間にほどよく余白ができました。
上の左寄せとの違いがわかっていただけますか?

; margin-left:10px;"
leftとrightが入れ替わっただけです。
▼回り込みの解除
最後に、回りこみの解除のタグを入れます。
そうでないと、タイトルや次の画像も回り込んでレイアウトが崩れます。
(いまちょうどそうなってますよね)
いつもなら、<br />と書くところを、
<br style="clear: both" /> という具合に、赤文字の部分を書き足してください。
改行タグ変換を「改行は<br/>タグに変換する」にしていても、回りこみを解除したい箇所で、<br style="clear: both" /> を入れてくださいね。
* * *
スタイルシートで指定する方法を知っているよという方は、ぜひ教えてください。私は今までなぜかうまくいっていないので、どこか間違っているみたいです。
[追記]
こっそり成功しました…(笑)。いつか記事に書くかもしれません。
[さらに追記]
別のブログで、CSSで指定する方法について書きましたので、読んでみてくださいね。↓
http://testomomo.seesaa.net/article/94584561.html
こっそり成功しました…(笑)。いつか記事に書くかもしれません。
[さらに追記]
別のブログで、CSSで指定する方法について書きましたので、読んでみてくださいね。↓
http://testomomo.seesaa.net/article/94584561.html






















ホント凄く分かりやすいです。
私は↓のサイトを参考にしてるから、何を追加したら良いかは分かるけど、何処に追加したら良いのか?って言うのが分からないんです。
(今回のはまったく分からなかったですけどね(^^;)
http://www.htmq.com/style/index.shtml
また応用も出来ないんですよね、私の頭では(笑)
だから本当に嬉しかったし、スッキリしました。
本当にありがとうございました<(_ _)>
ひぃ〜さんはたぶん、私よりブログの設定に関するいろんなことをご存知のように思うんですよ。
私のほうがいろいろお聞きしたいくらいです。
回しこみは、私がやろうとしたときに情報を見つけられなかったので、どうせなら不特定多数の方に説明する感じで書こうと思ったんです。
初心者向けすぎな文章で、ひぃ〜さんにはくどかいかな〜と思いつつ…。
何にせよ、お役に立てて良かったです。
ウェブ屋がやって来ましたよ(笑)
スタイルシートでの設定の仕方、お教えしても良いんですが、取り急ぎ記事中の誤りの指摘を…
ではなく、
です。
(閉じスラッシュ、半角スペースの位置ですね)
もっと言えば、XHTMLなんで、イメージタグも
ではなく
となりますが…
そうなってなくても、表示はされてしまうので一見問題はありませんです。
横やりですみません。
非常にカコワルイ!試験問題みたいだ。
では、空白を埋めてみてください。わははははは。
冗談はさておき…ええと…
要は、タグの閉じ部分は
/ >
ではなく
/> (半角スペース、半角スラッシュ、カッコ)
です、と書きたかったんです。(汗
ご指摘ありがとうございます!(^o^)丿
なにぶん初心者なので、「へぇ」と関心することしきりです。
seesaaが自動で生成するタグは(確か)、カッコの前になぜか半角スペースが入っているんですよ。それって後ろに続くタグのためなのでしょうかねぇ?
一つ賢くなれて嬉しいです!
スタイルシートでの設定の仕方、とっても知りたいです!!
お時間と気分が向いたときにでも、ぜひ教えてください。
seesaaのタグも、半角スペース・半角スラッシュ・カッコ の順なっていました。勘違いでした。すみません。
の記事参考になりました、ありがとうございました。
書籍「FC2ブログ徹底攻略術」でいろいろやってみましたが出来ませんでした。
リンク貼らせていただきました今後ともよろしくお願いします
初めまして。コメントありがとうございます。
お役に立てて、良かったです。
これができるまで、私も「他ではいっぱい使われてる方法なのに、どうしてできないんだろう」と歯がゆい思いで、試行錯誤を重ねました。
ページ下の表「人気記事ランキング」をご覧いただくとわかるように、2年前に書いた記事ですが、アクセス数は今でも多いのです。
でも、こうしてコメントを書いてくださる方はいらっしゃいませんので、shinsakuさんからコメントをいただけて、とても嬉しかったです。
実はここの他に、ブログカスタマイズ方法について書いているブログも持っています。
ここ以上につたないブログですが、上記以外の方法に言及しているので、興味があればご覧ください。
http://testomomo.seesaa.net/article/94584561.html
リンクの件、ありがとうございました。
最近は写真を撮る回数が減っていますが、徐々に戻していきたいと思っていますので、本館ともどもよろしくお願いします。
; margin-left:5px;" で指定したところ、回り込みさせるテキストの1行分だけが画像横にきて、残りの行はすべて画像の下に改行されてしまいました。そこでalign="left" で指定すると、行全体は回り込むのですが、今度はmargin=〜の指定が無効になってしまいます。何しろ初心者でちゃんとHTMLの学習をしておりませんので、何か根本的な理解不足があると思うのですが、よろしければこの点について教えて頂けませんでしょうか?
申し訳ございません。
はじめまして、よこうそ。
ロロさんが使ってるのもSeesaaブログでしょうか。
これはだいぶ前に書いた記事で、実はこの後、Seesaaブログの機能改定後にstyleで指定する方法ではうまくいかなくなってしまいました。
(なぜか上の記事はうまくいってますが、他のページではうまくいってないんです)
その辺をちゃんと書いてなくてゴメンなさい。
他のブログではわかりませんが、Seesaaブログではうまくいきません。ホームページのようにいちから自分で作るサイトの場合はうまくいきます。
その代わり、CSSで指定する方法があります。
私の別のブログ(下記URL)で説明しているので、もし良かったら参考にしてみてください。
http://testomomo.seesaa.net/article/94584561.html
はい、私めのブログはseessaです(お恥ずかしいのですが拙ブログURL記しておきます)。
新たにアドバイス下さったCSS指定>記事のHTMLでのclass指定、と実行してみたのですが、変化なしでした。。。
何か根本的な所で理解していないことがあるような気もするのです(前に半角≠全角で指定が無効になったとか、;を入れ忘れて失敗したとか、初心者ならではの失策は数限りなくあります)。
もう少し様子を見てみようかな(この際専門のテキストを買って読んでみようかなぁ?)と思います。。。
この度は本当にありがとうございました、そしてすみませんでした…<(_ _)>。
私も専門化ではないので、明確な回答ができなくて申し訳ないです。
正確にはfloatは回り込みじゃないですし…。
書籍に雑誌に各種サイト・ブログなど、tipsは山と転がっています。
ただ、体系だった知識を得るには、出版物が適しているように思います。
お勉強がんばってください。