こととねお試しBlogは、こととねとは対照的に画像をたくさん使ってみようという意図のもとに開始されたBlogであった。ということを前回いったわけだが、じゃあ画像を使った結果はどうだったのであろうか、ということも前回少しいったことだが、実はこの画像を使うことで思い掛けない影響が生じていた。それを少し説明しようと思う。
Blog記事中で画像を表示させる際に、文字の回り込みが自然になるよう画像をフロートさせているのだが、これが実は非常に困った事態を引き起こしかねないので、当初私は悩んだものだった。困った事態というのは、そのもの見た目に関することである。では、この見た目の問題とはどういうものであろうか。
フロートを使うと、後続の要素の内容はフローティングされた要素を取り囲むようにして表示されるのであるが、この表示に問題があった。本文が、画像を囲んでいるのなら問題はないのだ。しかし、その本文が短かったりすると、次の記事のタイトルが画像に対して回り込んでしまう。
次のような表示をご覧になったことはないだろうか。
フロートさせた画像に対して、後続の見出しが回り込みを起こしてしまっているのがわかるかと思う。私は、画像をフロートさせることでこうした表示上のまずさが生じることに悩んで、一時はフロートをやめてみたり、またフロートさせてみたりといろいろ試してみて、結局はフロートをさせるということで決着した。しかし、なぜこのような本質的でない試みを繰り返したのだろう。それこそ、フロートを打ち消す方法はあるというのに。
フロートさせた要素に対する回り込みを打ち消す方法がある。CSSのclearを使えばよいのだ。例えば上記の例ではh2要素に対して、あるいは更新時刻や更新者、コメント、トラックバックの有無を表示しているiteminfoクラスのdiv要素に対して、clear
: both; とでも書いてやればすむ話なのであるが、これを書くことができないから問題はややこしい。
Blogの仕様の問題なのだが、私の使っているBlogサービスは、クライアントによるデザインの改変を許していない。プロバイダが用意したテンプレートから選ぶことができるだけで、細かなところを修正したり、例えばメニューに自由になにかを追加したりということはできない。もちろん、CSSの記述なんてのは不可能だ。クライアントが自由にできるのは、記事の中身、本文に限られている。
h2要素やdiv.iteminfoに対してclear
: both; を指定することはできなかったわけだ。しかし、私はそれでもプロバイダに対して、ユーザーがCSSを書けるような仕組みをつけてくれないか、無理ならせめて、プロバイダ提供のCSSファイルにdiv.iteminfo
{clear: both;}を書き加えてはくれないかと要求したが、そうした要求は聞き入れられなかった（まあ、妥当な判断だとは思う）。そのため、私は違う手段で持って、問題の解決をはからねばならなかった。
私のとった解決策とは、文字数を増やすということだった。文字を増やして、回り込みが記事の前半（[Read More!]の表示されるまで）内部でおさまるようにすれば、後続の見出しが影響を受ける心配はなくなる。しかし、この方法は得策であっただろうか。
私は記事の前半に、主に枕となるような内容を書くことが多かったのだが、Blogの表示上のスタイルが、記事の前半、後半を明確にわけてしまうから、自然そのように書くようになったのだろう。前半で導入をおこない、[Read More!]をクリックして本文を読む。実際、このようなスタイルをとっているBlogは多い。
ここに問題があったのだ。私は、画像の回り込み問題を回避するために文字数を増やすという選択をした。ということは前半の文章量が増え、しかしそれは枕に過ぎない。枕が大きくなれば、釣り合いを考え、後半本文が膨らむのも自然なことであったといえるだろう。枕の肥大が、全体の文章量の増加を招いて、当初五六百文字で表現されていた文章が、いつしか一千字一千五百字を超えるまでにいたらせる主要因となったのだった。
でも、工夫のしようはあると思っている。その工夫をどのように具体化するかが、これからの課題となるのだろう。
< Blog、アフィリエイトへの挑戦 コメントとトラックバックについて >
