画像に文字を周り込ませて、キャプションをつける
「スタイルシートとの格闘」で、ブログをかわいくするために初めてスタイルシートと勉強しましたが、次はもうちょっと進んで、憧れだった「画像に文字を回り込ませる」に挑戦してみることにしました。
他のブログだと、ちゃんと画像に文字が回り込んでいるのに、何故私のブログでimgタグを書くだけでは実現できないか謎だったのですが、どうやら画像にテキストを回り込ませるにはスタイルシートをいじらなくてはいけなかったようなのです。なるほどー。
hxxk.jpの「CSS のみで出来ることを、何故システムを弄って対応しようとするのか ?」を参考に自分のスタイルシートにIMGタグ用の「yoko」という名前のclassと、エントリの最後に必ず出現するpタグのpostedというclassに回り込みを解除するclear: left;
追加することにしました。画像の左以外にはマージンが欲しかったので、yoko classにはmarginを追加で指定しています。赤字が自分の酸いタイルシートに追加した箇所です。
.content p.posted {
color: #666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
border-top: 1px solid #999;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
clear: left;
}
.content .yoko img{
float: left;
margin: 10px 10px 10px 0;
}
この二つを追加すると、以下のように書くだけです。通常の場合に赤字を追加です。
<img class=”yoko” alt=”coco-egao.jpg” src=”http://michys.com/blog/coco-egao.jpg” width=”200″ height=”230″ />
こんな風に画像が回り込みます。画像のモデルは我が家のアイドル、ココです。
うまくいった、わーいわーい。
しかし、ここで野望が沸いてきました。文字の回り込みはエントリの最後だけじゃなくて、途中でも解除したいときもあります。どこで文字の回り込みを解除するかは自分で指定したいです。そんなわけで、kaijoというclassを追加することにしました。
.content .kaijo {
clear: left;
}
これで、以下のように書くと回り込みの解除ができるようになりました。
<img class=”yoko” alt=”coco-egao.jpg” src=”http://michys.com/blog/coco-egao.jpg” width=”200″ height=”230″ />
ココだよ。
<p class=”kaijo”>遊んで！遊んで！</p>
こんな風です。
ココだよ。
遊んで！遊んで！
ここで、さらなる野望が沸いてきました。
画像にキャプションをつけたい！！！
ココのかわいい台詞は、ぜひともキャプションでやりたいものです。そこで、yokoの適用をimgタグだけに限定しないようにしました。キャプションは少し小さな文字がいいので、font-sizeをx-smallに設定します。
.content .yoko {
font-size: x-small;
float: left;
margin: 10px 10px 10px 0;
}
これで以下のように書くとキャプション付きの画像が回り込むようになります。<br />タグはMovable Typeの場合、改行をしておくと自動的に挿入されます。
<p class=”yoko”><img alt=”coco-egao.jpg” src=”http://michys.com/blog/coco-egao.jpg” width=”200″ height=”230″ /><br />
遊んで！遊んで！</p>
遊んで！遊んで！
か、かわいい。かわいすぎる。ココよ、お前は罪人だ。私にこんなに苦労をさせるなんて。
しかし、大満足です。
これで本のレビューをするときなんかも、もうちょっと見やすく紹介できるかと思います。暇があったら、イヤ暇はあるか。やる気があったら昔のエントリのレイアウトなんかも手直ししようと思います。
うーん、何かを成し遂げた気分です。
2 Comments
コメントをどうぞ
-
カウンタ
リンク
オイシックスとか、冷凍食品コーナーとか、実にヤバイ
楽しいiPhoneアプリを見つけると幸せになれる。iPhoneの正体は実は育てゲーなのかも
さりげなくいい曲があるのがフリーダウンロードの不思議
amadanaのケトル。罪な外観です
amadanaのコーヒーメーカー。ケトルと一緒に揃えたくなります
深沢直人デザインのLEDデスクライト。シンプルで機能的で、本読み用にかなり欲しいです
EIZOの新しいモニタ。AV入力対応です。PS3もXbox360も1080pでイケて、PC画面上に同時にAV画像も表示出来るみたいです。キレイな画面でゲームしながら、テレビ見ながら、ネットサーフィンに
なかのひと&うごくひと
ランキングリンク
いろいろ面白くて、興味深い記事いつも読ませて頂いております。
私も画像の下にキャプション付けたり、画像に記事回り込ませたり、何でできるのか？知らなかったもので、参考にさせていただきました。ついでにの設定やら、Now Playingも参考させていただきました。
あいかわらず、ご夫婦のやりとり笑えます・・・
コメントありがとうございます。備忘録がてらまとめていたので、お役にたって嬉しいです！！Now Playingもやってみたくなりますよねー。