ブログをとことん調べます。:スペースを有効活用

2006年02月19日

スペースを有効活用

コメントで質問をいただきました。

hammerさんの「グーグル検索」「ランキングバナー」みたいな感じにするにはどうしたらよいのですか？

このブログのヘッダー右端に配置しているGoogle検索の事ですね。。実はここ、ちょっと凝った事をやっているのですが、まずは基本的な事から。

まず、どうしてこんな隅っこにコンテンツを置いたのかと申しますと、少しでもスペースを活用したかったからです。このブログはヘッダーの画像のサイズが少し大きめなので、ヘッダー部分に結構なスペースが出来てしまいます。当時、いかにアフィリエイトリンクをたくさん張るかばかり考えていたので、こうしたスペースがとても気になっていたんです。スペースを埋めればいいというわけではないんですけどね＾＾；

こうしたスペースにコンテンツを配置するには、コンテンツの位置をCSSでうまくコントロールしなければなりません。そこで使われるのが「float」です。

floatを定義すると、回り込みを設定する事が出来ます。回り込みとは、コンテンツの周囲にテキストを回り込ませる事です。例えば画像とテキストを連続して並べると、通常は後のテキストが画像の右側最下段から開始されてしまいます。これだと画像の右側に余分なスペースが出来て、見た目にもバランスが悪くなります。ここで回り込みを使用すると、テキストが画像の右側最上段から開始され、画像の横にきれいにテキストを並べる事が出来ます。具体的には、CSSに次のようなクラスを追加します。

.headcontent{
float : right;
}

もちろんクラス名は何でもかまいません。float:left;で左側に寄せて右側に回りこみ、float:right;で右寄せで左側に回り込みになります。

後はHTMLでコンテンツを<div class="headcontent">でくくります。

<div class="headcontent">
･･･右寄せしたいコンテンツのHTML･･･</div>
<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
</div>

これでコンテンツが右端に寄せられて、左側にブログのタイトルが来るわけです。

お試しを。

人気ブログランキング。目指せトップ１０入り！