画像の横にも文章を(2) 余白を調整

前回、画像の横に文章を回しこむ方法を紹介しました。


今回は、もうちょっと自分でいじれる部分が増やせるように配置する方法です。
もっとスマートな方法があるかもしれないけど、私がやってる方法を紹介します。


まず、ファイルマネージャーを使って、自分のブログのスペースに画像をアップします。方法は前回のページを見てくださいね。

一覧が表示されているウインドウで、「元画」ボタンをクリックします。


それでは、文章を画像の周りに流し込む呪文をいれましょう♪

イメージタグの中に回し込みを指定するfloatタグを入れます。
画像左寄せなら、 style="float:left"
画像右寄せなら、 style="float:right" です。
<img src="http://☆" style="float:left" >

という感じですね。☆のところは自分の画像のURLを入れてください。
imgタグの中身は、srcの後ろにalt="◎"やwidht="◎"、height="◎"、border="0"が来てます。◎はそれぞれ違う値が入ります。
Seesaaブログではこうなってますが、使ってるブログによって多少違うかもしれません。
最後の>の前にでもstyle="float:left"を入れてください。

それじゃ、左寄せのタグを入れた見本を挙げます。



加湿器Ver3 アロマポット付 オレンジ (±0)加湿器Ver3 アロマポット付 オレンジ (±0)
まーるくて、つやつやしてて、オブジェのような加湿器。
スタイリッシュで人気の±0の加湿器は今年で3代目。
カラーバリエーションは、ホワイト、ライトブルー、ブラウン、ベージュ、ソフトピンク、今年はさらにオレンジ、ディープグリーン、ブルーが加わりました。
艶やかな光沢で心まで潤うかも。[詳細]



上の画像みたいに、背景が白い場合はこれで気にならないかもしれません。
でも、多くの画像はそうではないですよね?
では、次の例を見てください。



LEDキャンドル (Lumino)
フロストガラスのコップの中に入ったLEDライトがキャンドルの炎のように、ゆらゆらとやさしいひかりを灯してくれます。電池式で、コードレスなのでどこにでも持ち運べます。
年間を通して人気商品ですが、冬にこそ側におきたいですね。




画像と文章がくっつきすぎな感じがしませんか?
適度な余白があったほうが読みやすくない?

そんなわけで、画像と文章の間に余白が入るように指定します。
<img src="http://☆" style="float:left; margin-right:10px;">

float:left ≫ 左寄せ
margin-right:10px ≫ 右の余白10px

余白を入れるとこうなります。



LEDキャンドル (Lumino)
フロストガラスのコップの中に入ったLEDライトがキャンドルの炎のように、ゆらゆらとやさしいひかりを灯してくれます。電池式で、コードレスなのでどこにでも持ち運べます。
年間を通して人気商品ですが、冬にこそ側におきたいですね。




どうですか?
余白があったほうがいいでしょう?
(いいって思ってほしい~^^;)


画像を右に寄せるには、
<img src="http://☆" style="float:right">

leftがrightに変わっただけ。
簡単すぎて、わざわざ書くまでもなかったかな?(笑)

画像右寄せ+左側に余白10pxは
<img src="http://☆" style="float:right; margin-left:10px;" >
と書きます。



LEDキャンドル (Lumino)
フロストガラスのコップの中に入ったLEDライトがキャンドルの炎のように、ゆらゆらとやさしいひかりを灯してくれます。電池式で、コードレスなのでどこにでも持ち運べます。
年間を通して人気商品ですが、冬にこそ側におきたいですね。




右に寄せるとこんな感じですね。
これで、右に左に自由自在!
サイトのデザインに合わせて余白も調節して、ちょうど良いバランスを見つけてくださいね。
これができると、レイアウトがもっと楽しくなりますよ♪


前回のサンプルはこんなでした。↓↓

j071125.jpgFF1600
フォーミュラ・フォード1600
(オーストラリア)
フォーミュラの入門車と言えるのがこのFF1600。
その性格上、コストはできるだけ抑え、イコールコンディションで競えるようにスリックタイヤ、リアウイング等は禁止されている。(那須クラシックカー博物館の展示より)


今回の方法で、「左寄せ・右余白10px」に指定するとこうなります。↓↓

j071125.jpgFF1600
フォーミュラ・フォード1600
(オーストラリア)
フォーミュラの入門車と言えるのがこのFF1600。
その性格上、コストはできるだけ抑え、イコールコンディションで競えるようにスリックタイヤ、リアウイング等は禁止されている。(那須クラシックカー博物館の展示より)

今回の方法だと、元の画像サイズのまま表示できるんです。
前回のは、元の画像のサイズのままで指定するには不便でしたけどね。

「画像の横にも文章を」シリーズ(というほど大げさな話でもないけど^^)、次回に続きます!

↓参考になったら、クリックで応援してね!↓

前回の投稿の後、お陰さまで42位になりました。ありがとうございます!
今回はどこまでいけるかなー。

[関連記事]
  • 画像の横にも文章を(1)


  • この記事へのコメント

    • cocoro

      余白があったほうが全然いいですね!!

      ちょっとしたことだけど、印象が違いますね

      説明の文章が読みやすいです。

      ”回り込み”シリーズとっても参考になりました。

      話し変わるのですが、ももさんのプロフのイラスト、やわらかい印象でかわいいですね。

      プロフ用の人物をイラストでで作りたいのですが、なにかよいアドバイスおねがいします。

      アバターじゃ、絵が強くなりすぎちゃって・・・



      2007年12月20日 16:55
    • もも@管理人

      ◆cocoroさん
      コメントありがとうございます。
      余白、あったほうがいいでしょう?
      良かったー、賛同してくれる人がいてくれて。

      ちなみに、このシリーズ、まだ続きます(笑)。
      良かったら、また見に来てくださいね。

      私のプロフィールのイラストね、あれもアバターなんですよ、実は。
      ギラギラしたイラストは嫌だなーと思っていたんですけど、これは素敵と思えるものに出会えたので使ってます。
      アバターについては以前に下記のタイトルで記事を書きましたので、参考にしてもらえるかと思います。
      コメントで情報をいただいたサイトのも、ユニークで可愛いですよ。
      季節や気分に合わせて着せ替えもできちゃうし、ポーズもいっぱいありますしね。

      アバターを作ってみる
      http://testomomo.seesaa.net/article/39263179.html

      絵心と慣れさえあれば、お絵かきソフトで描けるかも。
      でも、なかなか難しいですよねー。
      2007年12月20日 18:23
    • cocoro

      こんにちは。ももさん!
      早速しらべていただいたんですね。
      ありがとうございました。

      4月号の実験室にあったんですね。
      灯台下暗しでした。(笑)

      イラストのサイト行ってみました。

      はじめ、パーツが少ないかなって感じだったのですが、微調整でかなり個性がだせますね。

      ほんと作りこむとかなりパワーいりますね。
      気がついたら5時間ほど没頭してました。

      ぴったりのアドバイスありがとうございました。

      次号楽しみにしています。
      寒くなりましたが、がんばってくださいね。

      ( ・´_`・)ノ⌒ see you again♪


      2007年12月22日 13:04
    • もも@管理人

      ◆cocoroさん
      まぁ、5時間も!
      でも、わかりますー。私もそんな感じでしたから。
      お気に入りのオリジナルができるといいですね!

      > 4月号の実験室にあったんですね。
      そんなふうに言ってもらうと、ちゃんとした定期刊行物みたい(笑)。
      不定期更新ですが、続けていきますので、また気が向いたらコメント入れてくださいね。(*^ー゜)ノ
      2007年12月22日 14:07
    • まじろ

      あ、私のコメント、表示されているんですね。レスもいただいて、今まで気づかず、お礼を申し上げるのが遅れてすみません。

      「オーナーの承認したコメントのみ表示」ということは存じていたのですが、送信したらエラー表示が…、それで3回も送ってしまいごめんなさい。でも、エラーって、、この辺、seesaaさんももうちょっと考えてほしいですし、それにどのseesaaブログもちょっと重いと思うのですが・・・。

      おっと、話が逸れてしまいましたね。
      実は、すぐ(2)の記事に気づいて、説明されているとおりやってみました。バッチリ、一回でできました。私には珍しいことです。それにしても、ももさんの記事、すごく分かりやすいです。初心者の気持ちになって説明されています。このブログって、seesaa初心者のためのバイブルですね。

      というわけで、ほんとにありがとうございました。今後ともよろしくお願いします。では。
      2008年01月23日 01:28
    • もも@管理人

      ◆まじろさん
      コメントありがとうございます。

      最近、コメント関連のエラーがよく出ますねー。
      書き込みエラーとか、新しいコメントがなかなか反映されないとか。
      まじろさんにもご迷惑掛かっちゃいましたね。
      受信されたのは1つだけでした。

      バイブルだなんておほめの言葉をいただけて、すっごく嬉しいです♪
      こういう内容のブログですから、反応があるとモチベーションが全然違ってくるんですよ。
      ましてや喜んでもらえたら、なおさらです。(*^ー゜)

      回り込みシリーズ、もう1回書く予定です。
      また見に来てくださいね!
      2008年01月23日 22:05
    • JYU

      ありがとうございました。
      助かりました。
      2013年04月04日 11:07
    • もも@管理人

      ◆JYUさん
      お役に立って良かったです。^^
      2013年04月05日 15:17
    • ばむせ

      初めまして。
      ブログ初心者なのでhtmlの知識など皆無なのですごく参考になりました。
      07年当時のももさんに有難うございますとお伝えください^^
      2015年04月15日 12:05
    • もも@管理人

      ◆ばむせさん
      ご丁寧にありがとうございます。^^
      ばむせさんからのメッセージを、タイムマシーンに乗せて送っておきます。
      2015年04月15日 12:23
    • ばむせ

      >>もも様
      先程はご丁寧に返信までしてくださって有難うございます。もも様に1点だけお伺いしたいことがあります。この記事内の工程は新しい記事に画像を貼るたびに毎回行わなければならないのでしょうか?
      初歩的な質問で申し訳ありませんが、ご教示くだされば幸いです。
      2015年04月15日 17:44
    • もも@管理人

      ◆ばむせさん
      仰るとおり、その都度タグを挿入しなくてはいけません。
      私は毎回「class="left"」と入力するのが面倒なので、ユーザー辞書に登録しています。
      その他の方法として、ブログが用意している「配置指定」を使用する方法もあります。この場合、画像ごとに、指定なし/右回り込み/左回り込み、のいずれかを選ぶことになります。
      コードって、いちいち書いてやらなければ働いてくれない存在なのです。
      2015年04月15日 18:52
    • ばむせ

      >>もも様
      やっぱりそうですね…
      独学でスタイルシート等書きあげる皆さんに頭が上がらないです…

      教えてくださり有難うございましす^^
      わたしも頑張ります♪
      2015年04月16日 13:59
    • もも@管理人

      ◆ばむせさん
      世界中で数えきれない人たちが書いているのに自分にできないわけがない!という気分で少しずつでも前進してみてください。
      陰ながら私も応援します。^^
      2015年04月16日 17:58

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


    SPONSORED LINK