RSS 1.0
今回は、もうちょっと自分でいじれる部分が増やせるように配置する方法です。
もっとスマートな方法があるかもしれないけど、私がやってる方法を紹介します。
まず、ファイルマネージャーを使って、自分のブログのスペースに画像をアップします。方法は前回のページを見てくださいね。
一覧が表示されているウインドウで、「元画」ボタンをクリックします。
それでは、文章を画像の周りに流し込む呪文をいれましょう♪
イメージタグの中に回し込みを指定する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）まーるくて、つやつやしてて、オブジェのような加湿器。
スタイリッシュで人気の±0の加湿器は今年で3代目。
カラーバリエーションは、ホワイト、ライトブルー、ブラウン、ベージュ、ソフトピンク、今年はさらにオレンジ、ディープグリーン、ブルーが加わりました。
艶やかな光沢で心まで潤うかも。[詳細]
上の画像みたいに、背景が白い場合はこれで気にならないかもしれません。
でも、多くの画像はそうではないですよね？
では、次の例を見てください。
フロストガラスのコップの中に入ったLEDライトがキャンドルの炎のように、ゆらゆらとやさしいひかりを灯してくれます。電池式で、コードレスなのでどこにでも持ち運べます。
年間を通して人気商品ですが、冬にこそ側におきたいですね。
画像と文章がくっつきすぎな感じがしませんか？
適度な余白があったほうが読みやすくない？
そんなわけで、画像と文章の間に余白が入るように指定します。
<img src="http://☆" style="float:left; margin-right:10px;">
float:left ≫ 左寄せ
margin-right:10px ≫ 右の余白10px
余白を入れるとこうなります。
フロストガラスのコップの中に入ったLEDライトがキャンドルの炎のように、ゆらゆらとやさしいひかりを灯してくれます。電池式で、コードレスなのでどこにでも持ち運べます。
年間を通して人気商品ですが、冬にこそ側におきたいですね。
どうですか？
余白があったほうがいいでしょう？
（いいって思ってほしい〜^^;）
画像を右に寄せるには、
<img src="http://☆" style="float:right">
leftがrightに変わっただけ。
簡単すぎて、わざわざ書くまでもなかったかな？(笑)
画像右寄せ＋左側に余白10pxは
<img src="http://☆" style="float:right; margin-left:10px;" >と書きます。
フロストガラスのコップの中に入ったLEDライトがキャンドルの炎のように、ゆらゆらとやさしいひかりを灯してくれます。電池式で、コードレスなのでどこにでも持ち運べます。
年間を通して人気商品ですが、冬にこそ側におきたいですね。
右に寄せるとこんな感じですね。
これで、右に左に自由自在！
サイトのデザインに合わせて余白も調節して、ちょうど良いバランスを見つけてくださいね。
これができると、レイアウトがもっと楽しくなりますよ♪
前回のサンプルはこんなでした。↓↓
FF1600フォーミュラ･フォード1600（オーストラリア）
フォーミュラの入門車と言えるのがこのFF1600。
その性格上、コストはできるだけ抑え、イコールコンディションで競えるようにスリックタイヤ、リアウイング等は禁止されている。（那須クラシックカー博物館の展示より）
今回の方法で、「左寄せ・右余白10px」に指定するとこうなります。↓↓
FF1600フォーミュラ･フォード1600（オーストラリア）
フォーミュラの入門車と言えるのがこのFF1600。
その性格上、コストはできるだけ抑え、イコールコンディションで競えるようにスリックタイヤ、リアウイング等は禁止されている。（那須クラシックカー博物館の展示より）
今回の方法だと、元の画像サイズのまま表示できるんです。
前回のは、元の画像のサイズのままで指定するには不便でしたけどね。
「画像の横にも文章を」シリーズ（というほど大げさな話でもないけど^^）、次回に続きます！
↓参考になったら、クリックで応援してね！↓
前回の投稿の後、お陰さまで42位になりました。ありがとうございます！
今回はどこまでいけるかなー。
[関連記事]
ちょっとしたことだけど、印象が違いますね
。
説明の文章が読みやすいです。
”回り込み”シリーズとっても参考になりました。
話し変わるのですが、ももさんのプロフのイラスト、やわらかい印象でかわいいですね。
プロフ用の人物をイラストでで作りたいのですが、なにかよいアドバイスおねがいします。
アバターじゃ、絵が強くなりすぎちゃって・・・
コメントありがとうございます。
余白、あったほうがいいでしょう？
良かったー、賛同してくれる人がいてくれて。
ちなみに、このシリーズ、まだ続きます(笑)。
良かったら、また見に来てくださいね。
私のプロフィールのイラストね、あれもアバターなんですよ、実は。
ギラギラしたイラストは嫌だなーと思っていたんですけど、これは素敵と思えるものに出会えたので使ってます。
アバターについては以前に下記のタイトルで記事を書きましたので、参考にしてもらえるかと思います。
コメントで情報をいただいたサイトのも、ユニークで可愛いですよ。
季節や気分に合わせて着せ替えもできちゃうし、ポーズもいっぱいありますしね。
アバターを作ってみる
http://testomomo.seesaa.net/article/39263179.html
絵心と慣れさえあれば、お絵かきソフトで描けるかも。
でも、なかなか難しいですよねー。
早速しらべていただいたんですね。
ありがとうございました。
４月号の実験室にあったんですね。
灯台下暗しでした。（笑）
イラストのサイト行ってみました。
はじめ、パーツが少ないかなって感じだったのですが、微調整でかなり個性がだせますね。
ほんと作りこむとかなりパワーいりますね。
気がついたら５時間ほど没頭してました。
ぴったりのアドバイスありがとうございました。
次号楽しみにしています。
寒くなりましたが、がんばってくださいね。
( ･´_｀･)ﾉ⌒ see you agａin♪
まぁ、5時間も！
でも、わかりますー。私もそんな感じでしたから。
お気に入りのオリジナルができるといいですね！
> ４月号の実験室にあったんですね。
そんなふうに言ってもらうと、ちゃんとした定期刊行物みたい（笑）。
不定期更新ですが、続けていきますので、また気が向いたらコメント入れてくださいね。(*^ー゜)ノ
「オーナーの承認したコメントのみ表示」ということは存じていたのですが、送信したらエラー表示が…、それで３回も送ってしまいごめんなさい。でも、エラーって、、この辺、seesaaさんももうちょっと考えてほしいですし、それにどのseesaaブログもちょっと重いと思うのですが･･･。
おっと、話が逸れてしまいましたね。
実は、すぐ(2)の記事に気づいて、説明されているとおりやってみました。バッチリ、一回でできました。私には珍しいことです。それにしても、ももさんの記事、すごく分かりやすいです。初心者の気持ちになって説明されています。このブログって、seesaa初心者のためのバイブルですね。
というわけで、ほんとにありがとうございました。今後ともよろしくお願いします。では。
コメントありがとうございます。
最近、コメント関連のエラーがよく出ますねー。
書き込みエラーとか、新しいコメントがなかなか反映されないとか。
まじろさんにもご迷惑掛かっちゃいましたね。
受信されたのは1つだけでした。
バイブルだなんておほめの言葉をいただけて、すっごく嬉しいです♪
こういう内容のブログですから、反応があるとモチベーションが全然違ってくるんですよ。
ましてや喜んでもらえたら、なおさらです。(*^ー゜)
回り込みシリーズ、もう1回書く予定です。
また見に来てくださいね！