2004年05月28日 (金)

iBlog-1.3.7 B1 でタイトルのみのエントリ一覧を整形するには

えー、iblogPatcher-1.3.X の解説をすっ飛ばしてこんなエントリで恐縮ですが、iBlog-1.3.7 B1 からブログページやカテゴリページの下の方に表示されるタイトルのみのエントリ一覧の間が抜けていて格好悪いとお思いの方がいらっしゃいます。そこでこれを解消する方法を紹介します。

私自身はまだ iBlog-1.3.7 B1 を試す時間が取れずにいるので、人のサイトを見ての想像です。心当たりの方は是非検証してください。


[2004.06.06 一部変更(変更点はコメント参照のこと)]

この一覧の間が抜けてしまうのは、それぞれのタイトルを div で囲った上に br タグで改行しているからです。

HTML ミニ講座(読み飛ばしてよし)

div というのは、それで囲まれた部分(要素って言います)が「ブロック要素」だとブラウザに教えるものです。ブロック要素は例えてみれば「段落のようなもの」で、段落を表す p などもブロック要素を作ります。一方で br タグは改行を意味するわけですが、これは「インライン要素」の中で改行をするためのものです。インライン要素は span タグで示されますが、他にも font タグや strong タグなどもインライン要素を作ります。文中の部分と考えるとかなり役割が近いです。

よく行間を沢山あけるために複数の br タグを連続して使用する人がいますが、これは今時の HTML や XHTML が意図している使い方ではありません。行間を沢山あけるためにはスタイルシートを使用しましょう。例えば

<div>
クイズ:<br />
関羽と張飛はどちらが先に死亡したでしょうか?
</div>
<div style="margin-top: 8em;">
答え:<br />
関羽
</div>
このようにします。

解消方針

間が抜ける原因はタイトルを div 要素にしてブロック要素だと指定しているからブラウザは元々改行して表示するのに、更に br が入っているので加えて改行してしまうからです。

ですから、解消方法は三つに分かれます。
  1. タイトルをインライン要素として扱う
  2. div をやめる
  3. br をやめる
1 はスタイルシートを使います。2, 3 は iblogPatcher のプラグイン CHANGE_CONTENT.plugin を利用します。

タイトルをインライン要素として扱う

タイトルを囲む div タグには class="title" が付いています。ですからスタイルシートの .title { font-family: verdana, arial; font-size: small; color: #000000; text-transform: uppercase; font-weight: bold; } というところに一行加えて次のようにします。 .title { display: inline; font-family: verdana, arial; font-size: small; color: #000000; text-transform: uppercase; font-weight: bold; }

普通のエントリのタイトル部分にもこの title というクラスが使用されているので注意が必要です。大抵の場合は普通のエントリのタイトルの次はエントリの要旨か本文なので、そこが div タグで囲まれているから特に表示が崩れないと予想しています。

[2004.05.29 追記]
もっとよい方法を思い付きました。普通のエントリのタイトル部分とリストのタイトルとを別々に指定する方法です。普通のエントリのタイトル部分で class="title" が付いているのはデフォルトでは blog クラスの中の blogbody クラスの中にありますが、問題の箇所は直接 blog クラスの中にあります。この違いを利用します。次をスタイルシートに追加します。 .blog .title { display: inline; } .blogbody .title { display: block; } 最初の指定は「blog クラスの中の title クラスはインライン要素のように表示しなさい」という意味で、これだけですと普通のエントリのタイトルにも影響してしまいます。そこで後半の指定で「blogbody クラスの中の title クラスはブロック要素のように表示しなさい」と指示します。h1〜h6 タグはインライン要素を作る仕様なのですがブラウザはブロック要素のように表示するので、これで表示上は元通りになるでしょう。

div タグをやめる

iblogPatcher の blog 定義ファイルの ACTION > preview > after > onStart の中に次の設定を加えます。 push @{$CHANGE_CONTENT::Conf{'BlogPage'}}, { 'condition' => '<br ¥/>¥s*<div class="title">¥s*(<a href="C¥d+¥/E¥d+/index¥.html">(?:[^<]|<(?!¥/a>))+<¥/a>)¥s*<¥/div>', 'replace' => '<br ¥/>¥n<span class="title">$1<¥/span>', 'option' => 'gs', }; push @{$CHANGE_CONTENT::Conf{'CategoryPage'}}, { 'condition' => '<br ¥/>¥s*<div class="title">¥s*(<a href="E¥d+¥/index¥.html">(?:[^<]|<(?!¥/a>))+<¥/a>)¥s*<¥/div>', 'replace' => '<br ¥/>¥n<span class="title">$1<¥/span>', 'option' => 'gs', }; 加える場所は iblogPatcher-1.3.X に付属の sample で「連続する <br /> を一つにまとめる」と書いてある場所の周辺にしておけば問題ないでしょう。

br タグをやめる

iblogPatcher の blog 定義ファイルの ACTION > preview > after > onStart の中に次の設定を加えます。 push @{$CHANGE_CONTENT::Conf{'BlogPage'}}, { 'condition' => '<div class="title">¥s*(<a href="C¥d+¥/E¥d+/index¥.html">(?:[^<]|<(?!¥/a>))+<¥/a>)¥s*<¥/div>¥s*<br ¥/>', 'replace' => '<div class="title">$1<¥/div>', 'option' => 'gs', }; push @{$CHANGE_CONTENT::Conf{'CategoryPage'}}, { 'condition' => '<div class="title">¥s*(<a href="E¥d+¥/index¥.html">(?:[^<]|<(?!¥/a>))+<¥/a>)¥s*<¥/div>¥s*<br ¥/>', 'replace' => '<div class="title">$1<¥/div>', 'option' => 'gs', }; 加える場所は iblogPatcher-1.3.X に付属の sample で「連続する <br /> を一つにまとめる」と書いてある場所の周辺にしておけば問題ないでしょう。


以上三種類方法を書いてみました。最初にも述べましたが、私はまだ iblog-1.3.7 B1 を試していないのでこれらは試していません。

Posted: 08:14    | Comment | Trackback


以下、類似エントリです。