2006年02月23日

Seesaaをカスタマイズ-1 画像の横にも文章を入れる



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" />
となります。

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


花を贈るなら日比谷花壇私がよく使っている「右寄せ左余白10px」の場合は、style="float:right
; margin-left:10px;"

leftとrightが入れ替わっただけです。

回り込みの解除
最後に、回りこみの解除のタグを入れます。
そうでないと、タイトルや次の画像も回り込んでレイアウトが崩れます。
(いまちょうどそうなってますよね)

いつもなら、<br />と書くところを、
<br style="clear: both" /> という具合に、赤文字の部分を書き足してください。
改行タグ変換を「改行は<br/>タグに変換する」にしていても、回りこみを解除したい箇所で、<br style="clear: both" /> を入れてくださいね。

* * *

スタイルシートで指定する方法を知っているよという方は、ぜひ教えてください。私は今までなぜかうまくいっていないので、どこか間違っているみたいです。
[追記]
こっそり成功しました…(笑)。いつか記事に書くかもしれません。

[さらに追記]
別のブログで、CSSで指定する方法について書きましたので、読んでみてくださいね。↓
http://testomomo.seesaa.net/article/94584561.html
  

この記事へのコメント
わざわざ記事にして頂いて、ありがとうございます<(_ _)>
ホント凄く分かりやすいです。
私は↓のサイトを参考にしてるから、何を追加したら良いかは分かるけど、何処に追加したら良いのか?って言うのが分からないんです。
(今回のはまったく分からなかったですけどね(^^;)
http://www.htmq.com/style/index.shtml

また応用も出来ないんですよね、私の頭では(笑)
だから本当に嬉しかったし、スッキリしました。
本当にありがとうございました<(_ _)>
Posted by ひぃ〜 at 2006年02月24日 17:53
ひぃ〜さん、コメントありがとうございます♪
ひぃ〜さんはたぶん、私よりブログの設定に関するいろんなことをご存知のように思うんですよ。
私のほうがいろいろお聞きしたいくらいです。

回しこみは、私がやろうとしたときに情報を見つけられなかったので、どうせなら不特定多数の方に説明する感じで書こうと思ったんです。
初心者向けすぎな文章で、ひぃ〜さんにはくどかいかな〜と思いつつ…。
何にせよ、お役に立てて良かったです。
Posted by もも@管理人 at 2006年02月25日 00:45
こんにちは。
ウェブ屋がやって来ましたよ(笑)

スタイルシートでの設定の仕方、お教えしても良いんですが、取り急ぎ記事中の誤りの指摘を…

ではなく、
です。
(閉じスラッシュ、半角スペースの位置ですね)

もっと言えば、XHTMLなんで、イメージタグも

ではなく
となりますが…

そうなってなくても、表示はされてしまうので一見問題はありませんです。

横やりですみません。
Posted by salsa at 2006年05月04日 23:01
って!ああ!タグが無視されている!
非常にカコワルイ!試験問題みたいだ。
では、空白を埋めてみてください。わははははは。

冗談はさておき…ええと…
要は、タグの閉じ部分は
/ >
ではなく
 /> (半角スペース、半角スラッシュ、カッコ)
です、と書きたかったんです。(汗
Posted by salsa at 2006年05月04日 23:08
◇salsaさん
ご指摘ありがとうございます!(^o^)丿
なにぶん初心者なので、「へぇ」と関心することしきりです。
seesaaが自動で生成するタグは(確か)、カッコの前になぜか半角スペースが入っているんですよ。それって後ろに続くタグのためなのでしょうかねぇ?
一つ賢くなれて嬉しいです!

スタイルシートでの設定の仕方、とっても知りたいです!!
お時間と気分が向いたときにでも、ぜひ教えてください。
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2006年05月05日 12:17
追記です。
seesaaのタグも、半角スペース・半角スラッシュ・カッコ の順なっていました。勘違いでした。すみません。
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2006年05月07日 21:47
「画像の横にも文章いれる」
の記事参考になりました、ありがとうございました。
書籍「FC2ブログ徹底攻略術」でいろいろやってみましたが出来ませんでした。
リンク貼らせていただきました今後ともよろしくお願いします
Posted by shinsaku at 2008年09月06日 13:10
◆shinsakuさん

初めまして。コメントありがとうございます。
お役に立てて、良かったです。
これができるまで、私も「他ではいっぱい使われてる方法なのに、どうしてできないんだろう」と歯がゆい思いで、試行錯誤を重ねました。
ページ下の表「人気記事ランキング」をご覧いただくとわかるように、2年前に書いた記事ですが、アクセス数は今でも多いのです。
でも、こうしてコメントを書いてくださる方はいらっしゃいませんので、shinsakuさんからコメントをいただけて、とても嬉しかったです。

実はここの他に、ブログカスタマイズ方法について書いているブログも持っています。
ここ以上につたないブログですが、上記以外の方法に言及しているので、興味があればご覧ください。
http://testomomo.seesaa.net/article/94584561.html

リンクの件、ありがとうございました。
最近は写真を撮る回数が減っていますが、徐々に戻していきたいと思っていますので、本館ともどもよろしくお願いします。
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2008年09月06日 20:03
はじめまして。カスタマイズ記事、大変参考になります。ところで、画像横に余白を入れる記事を参考にさせて頂き、style="float:right
; margin-left:5px;" で指定したところ、回り込みさせるテキストの1行分だけが画像横にきて、残りの行はすべて画像の下に改行されてしまいました。そこでalign="left" で指定すると、行全体は回り込むのですが、今度はmargin=〜の指定が無効になってしまいます。何しろ初心者でちゃんとHTMLの学習をしておりませんので、何か根本的な理解不足があると思うのですが、よろしければこの点について教えて頂けませんでしょうか?
申し訳ございません。
Posted by ロロ at 2009年06月18日 14:36
◆ロロさま
はじめまして、よこうそ。
ロロさんが使ってるのもSeesaaブログでしょうか。
これはだいぶ前に書いた記事で、実はこの後、Seesaaブログの機能改定後にstyleで指定する方法ではうまくいかなくなってしまいました。
(なぜか上の記事はうまくいってますが、他のページではうまくいってないんです)

その辺をちゃんと書いてなくてゴメンなさい。
他のブログではわかりませんが、Seesaaブログではうまくいきません。ホームページのようにいちから自分で作るサイトの場合はうまくいきます。

その代わり、CSSで指定する方法があります。
私の別のブログ(下記URL)で説明しているので、もし良かったら参考にしてみてください。

http://testomomo.seesaa.net/article/94584561.html
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2009年06月18日 19:40
ももさん、お忙しいところお騒がせしてすみません(ノД`)。
はい、私めのブログはseessaです(お恥ずかしいのですが拙ブログURL記しておきます)。
新たにアドバイス下さったCSS指定>記事のHTMLでのclass指定、と実行してみたのですが、変化なしでした。。。
何か根本的な所で理解していないことがあるような気もするのです(前に半角≠全角で指定が無効になったとか、;を入れ忘れて失敗したとか、初心者ならではの失策は数限りなくあります)。
もう少し様子を見てみようかな(この際専門のテキストを買って読んでみようかなぁ?)と思います。。。
この度は本当にありがとうございました、そしてすみませんでした…<(_ _)>。
Posted by ロロ at 2009年06月19日 14:40
◆ロロさん
私も専門化ではないので、明確な回答ができなくて申し訳ないです。
正確にはfloatは回り込みじゃないですし…。
書籍に雑誌に各種サイト・ブログなど、tipsは山と転がっています。
ただ、体系だった知識を得るには、出版物が適しているように思います。
お勉強がんばってください。
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2009年06月19日 20:14
コメントを書く
お名前: [必須入力]

メールアドレス: (表示しません)

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/13642981
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

こんな本が参考になります
※ 記事本文からキーワードを自動検索する仕組みですが、本文とは思いっきりずれているときがあります(苦笑)。笑って許してください。





Copyright(C) 2005-2009 MOMO All rights reserved.