画像の横にも文章を(4) CSSで指定

画像回り込みシリーズも今回が4回目となりました。

• 画像の横にも文章を(1)


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


• 画像の横にも文章を(3) 崩れた?!

一応、前回で完結しているんですけど、今回は他の方法を紹介します。
CSS（スタイルシート）で指定する方法です。

CSSの設定するページは、「文字の設定(7)ちょっと動くリンク」などで説明しているので参考にしてください。

開きました？
それでは、いきましょう。(^-^)ノ

場所はどこでもいいんじゃないかと思うので（根拠はありません…^^;）、一番下のところに次のタグを入れましょう。
そのままコピー＆ペーストすればＯＫです。
画像の横の余白を10pxにしてあります。ご自分の好みで調節してください。

/* 画像右寄せ */
img.right { float: right; margin-left: 10px }

/* 画像左寄せ */
img.left { float: left; margin-right: 10px}

［スタイルシートを変更する］ボタンを押します。画面の上部に、オレンジ色で「設定を変更し、CSSをビルドしました。」という文字が出ましたね。
CSSの設定はこれで終わりです。
次は、本文を書きます。

画像のアップロードの仕方は、「画像の横にも文章を(2) 余白を調整」を見てくださいね。

で、画像を本文中に挿入したところで、さっき書いたCSSを効かせます。
んー、表現がヘンかな。適切な用語を知らない程度のヒトなのでσ( ^ー゜）、お許しを〜。

<img>の中に入れるんです。

<img href="http://☆" class="right" >

という具合です。
上の例ではright、つまり右寄せ。
左寄せにしたいときは、「class="left"」としてください。

回し込みを解除したいところで、
<br style="clear: both" / >
を入れてくださいね。理由は前回説明したとおりです。


見本です。↓

春になりました。あちこちの花壇で花が咲いています。色とりどりの花に目を奪われ、しばらく足を止めずにはいられなくなってしまいます。
こんときは、カメラが欲しくなりますねー。希望としては、もちろんデジタル一眼レフ！
「世界最小・最薄を実現した」というオリンパスのE-420あたりが気になってます。
画像は、Microsoft Office Onlineからダウンロードしたもので、E-420とは関係ありません。こんな写真を撮れるようになったら楽しいでしょうねー。

レイアウトを変更して左寄せにしたいときは、class="right"をclass="left"にすればＯＫ。
簡単でしょ？

「画像の横にも文章を」シリーズはこれで終了です。
画像を右に左に、自在にレイアウトして、素敵なページを作ってくださいね！
　
↓参考になったら、クリックで応援してね！↓


　

Comments

久しぶり更新されていたので、
嬉しかったです♪
ももさんのおかげで初心者の私でも色々カスタマイズできるようになったので、感謝しています！

ＣＳＳで指定してclassで挿入できるんですね〜！　
初めて知りました。

Posted by moe at 2008年04月29日 06:51

◆moeさん
嬉しいコメントありがとうございます♪
身辺がいろいろ忙しくて、更新に時間がかかってしまいました。<(_ _)>

カスタマイズを楽しんでいただくお手伝いができてるみたいで、良かったです♪
CSSはまだ勉強中でわからないことがいっぱい！
自分で消化できたものから、紹介していけたらいいなーと思ってます。

Posted by もも＠管理人 at 2008年04月30日 22:06