タイトルからフッタまで一つの記事を囲む方法

あちこちのブログのソースを眺めているうちに何となくわかったので、メモ。
コメントにしようとして、間違ってブラウザの戻るで消してしまいまひた。
長いので、あらためて自分の記事にトラバ。(って、いいのかな……、わからんけどしてしまう)

結論:ココログプロにしないとできない。(^^;)

いじるのは、スタイルシートとメイン表示用のhtmlファイル(かな? もしかしたらアーカイブ表示用とかもあるのかしらん?)。
まず、メイン用ファイルで、記事が表示される部分のタイトル行の前に、

<div class="blogbody">と記述し、フッタ行のあとで、</div>と記述。
この場合の"blogbody"は、他のID、クラス名と競合しなければ、好きなようにつけて可。"kiji"とか。

次に、スタイルシートのほうで、
.blogbody{BORDER: 1px solid #57B1AF} などという行を追加。メイン側で "kiji" としたなら、.kiji{ } とする。
これで、記事の複数表示か単独表示かにかかわらず囲まれるはず、と思う。(^^;)
スタイルシートの記述により、線で囲むだけでなく、記事の背景に画像を使うことも可能。

なお、フッタまで囲むのをあきらめるのならば(^^;)、設定部分に記述する形で外部からスタイルシートを読み込めばプラスやベーシックでも対応可能。
この場合には、やはりスタイルシートに新たなクラス名の記述を付け加えtop以外で線を指定、線がつながって見えるように記事本文とタイトル部分との間隔を調整し、タイトル部分のtop,right,leftに線を表示するようスタイルシートで指定。
あとは記事を書くときに必ず、本文先頭に

<div blogbody>末尾に</div>と記述でOK(なはず)。

それから、記事を一つしか表示しない設定にしているのであれば、スタイルシートの.content部分に線なり背景なりを指定しておけば、タイトルからフッタまで囲まれているように表示できる。ただし、記事複数表示にしている場合は、全部の記事が一緒に囲まれてしまう。

……と、こんなところだろうか。(^^;)
スタイルシートに詳しい方、間違っているところがあったら指摘してくださ~い。

2004 06 20 [ウェブログ・ココログ関連] | 固定リンク