fc2ブログ

タグ: (X)HTML

投稿日
2008-02-18
カテゴリー
WebDesign
タグ
(X)HTML

はじめに

昨日の記事で少し書いた、記事タイトルの見出しレベルの件に関してです。

もともとこういう手法を使おうと思ったのは、記事本文で見出しを使った場合に個別記事ページまたはそれ以外のページで文書構造がおかしくなるのを防ぐためでした。ブログツールによっては、記事内の見出しレベルを自動調整するプラグインが作られていたりして(MTのこういうやつとか)、FC2ブログでも同じようなことができればなと思ったりもしていました。しかし記事を「記事本文(h2)」「コメント(h2)」「トラックバック(h2)」の3つに分割する(以下、三分割)という手法は、自動調整と比較してある利点を持っています。

以下で具体的に見てみましょう。例として「Mozilla Firefoxの歴史」という記事を書いたとします。記事タイトルの見出しは、個別記事ページではh1、それ以外ではh2。個別記事ページでのみ表示される「コメント」「トラックバック」の見出しレベルはh2とします。

自動調整の場合

記事内の見出しレベルが、個別記事ページではh2から始まり、それ以外ではh3から始まるように自動調整された場合、次のようになるはずです。

個別記事ページ以外
個別記事ページ

さてこの例では、自動調整のおかげで見出しの出現順序に一見何の問題もなくなっているように見えます。しかし、個別記事ページに注目すると、記事内の見出しと「コメント」「トラックバック」が同列に扱われています。なんだか妙な感じがしないでしょうか。「コメント」や「トラックバック」は、「Mozilla Firefoxの歴史」についての直接の見出しではありません。

三分割の場合

一方、個別記事ページにおいて記事を「記事本文(h2)」「コメント(h2)」「トラックバック(h2)」の3つに分けた場合は以下のようになります。

個別記事ページ以外
個別記事ページ

このように「記事本文」という見出しの下に記事内の見出しがあるほうが、文書構造として妥当ではないでしょうか。

おわりに

とまあそんなことを考えてみたんですが、そこまで文書構造を気にして何の意味があるのかと言われればそれまでです。そもそも個別記事ページで記事タイトルをh1にすべきかどうかというのも、人それぞれでしょう。サイト名が最も重要と考えるなら、常にサイト名をh1にしても別に悪くないと思います。

かくいう自分は、一応トップページ以外ではh1要素にサイト名を使わない派です(が、これを書いてる現在はどのページにもサイト名を併記しちゃってます。後で消すつもり)。しかしわざわざ見出しを使うほど筋道立った記事を書くわけでもないので、個人的にはそんなに記事内の見出しレベルで悩む必要もなかったりします。今回は、試験的に見出しを無理矢理つけてみました。

投稿日
2008-02-17
カテゴリー
WebDesign
タグ
(X)HTML
CSS
変数

FC2ブログの新管理画面統合のアナウンス(今度こそ延期しないよね)も出たわけだし、いい加減そろそろテンプレを共有登録申請したいところです。もうひと息という感じではあるんですが、しかしFC2ブログにはすでに膨大な数の共有テンプレが存在しているため、今さら下手な作品を登録したところで、それはテンプレ探しの邪魔にしかならないんじゃないかと思うんです。それでだいぶ慎重になっています。

とりあえず申請予定のテンプレの特徴を簡単に整理しておきます。

文章を書くのが面倒でリストにしてしまいました。しかも全然整理できてない。まあいいか。

投稿日
2008-01-10
カテゴリー
FC2BLOG
タグ
(X)HTML
変数

FC2ブログで使用できる、ほんの少し便利かもしれないテクニックを発見しました。ただ、このテクニックには謎が多いので、まだまだ検証が必要かと思われます。一応、現時点でわかっていることを(主に自分のために)メモしておきます。

説明しやすくするため、FC2ブログ用の独自変数を以下のように(勝手に)分類することにします。

フラグ型変数
条件によって出力/非出力を分岐するタイプの変数。たとえば以下のようなもの。
リスト型変数
内容を繰り返し出力するタイプの変数。たとえば以下のようなもの。
単変数
1つの数値や文字列等を出力する変数。<%hogehoge>という形のもの。

まず、テンプレートの中に以下のようなソースがあるとします。

<dl id="sidebar">
        <dt>カテゴリー</dt>
        <dd>
                <ul>
                        <!--category--><li><a href="<%category_link>" ><%category_name> (<%category_count>)</a></li><!--/category-->
                </ul>
        </dd>

        <dt>最近のコメント</dt>
        <dd>
                <ul>
                        <!--rcomment--><li><a href="<%rcomment_link>" ><%rcomment_name> → <%rcomment_title></a></li><!--/rcomment-->
                </ul>
        </dd>

        <dt>最近のトラックバック</dt>
        <dd>
                <ul>
                        <!--rtrackback--><li><a href="<%rtrackback_url>" ><%rtrackback_title>(<%rtrackback_blog_name>)</a> → <a href="<%rtrackback_link>" ><%rtrackback_etitle></a></li><!--/rtrackback-->
                </ul>
        </dd>
</dl>

まあよくあるサイドバーのようなものです。全体を<dl>で囲み、<dt>に項目名、<dd>内にその内容を<ul><li>で並べています。

こういう場合、カテゴリーは必ず1つは存在しているので問題ありませんが、コメントやトラックバックがまだ1件もないときは、空の<ul></ul>ができてしまうという問題が起こります。空のリストなんて気にする人はほとんどいないと思いますが、そのほかに、コメントやトラックバックがないのに「最近のコメント」「最近のトラックバック」といった項目名が表示されるのも、少し気になったりすると思います。

そこで、以下のようにすると、コメントやトラックバックがない場合に「最近のコメント」「最近のトラックバック」の項目をまるごと消し去ることができます。単に非表示にするだけではなく、ソースから完全に消せます。

<dl id="sidebar">
        <dt>カテゴリー</dt>
        <dd>
                <ul>
                        <!--category--><li><a href="<%category_link>" ><%category_name> (<%category_count>)</a></li><!--/category-->
                </ul>
        </dd>

        <!--rcomment--><!--not_edit_area--><!--/rcomment-->
        <dt>最近のコメント</dt>
        <dd>
                <ul>
                        <!--rcomment--><li><a href="<%rcomment_link>" ><%rcomment_name> → <%rcomment_title></a></li><!--/rcomment-->
                </ul>
        </dd>
        <!--rcomment--><!--/not_edit_area--><!--/rcomment-->

        <!--rtrackback--><!--not_edit_area--><!--/rtrackback-->
        <dt>最近のトラックバック</dt>
        <dd>
                <ul>
                        <!--rtrackback--><li><a href="<%rtrackback_url>" ><%rtrackback_title>(<%rtrackback_blog_name>)</a> → <a href="<%rtrackback_link>" ><%rtrackback_etitle></a></li><!--/rtrackback-->
                </ul>
        </dd>
        <!--rtrackback--><!--/not_edit_area--><!--/rtrackback-->
</dl>

強調部分が追加されました。これだけで完了です。コメントやトラックバックが1件もないときは、強調部分に挟まれた内容がきれいさっぱり消え失せます。コメントやトラックバックがあれば、何の問題もなく通常通り表示されます。

これを一般化すると、以下のようになります。

<!--リスト型変数--><!--フラグ型変数--><!--/リスト型変数-->
(リスト型変数が空のときに消える内容)
<!--リスト型変数--><!--/フラグ型変数--><!--/リスト型変数-->

このとき、リスト型変数はすべて共通のものにする必要があります。しかしフラグ型変数に関しては、共通のものにする必要はありません。たとえば<!--category_area-->~<!--/not_search_area-->のように、前後のタグが対応関係になくても問題ありません。とにかくいずれかのフラグ型変数で開始し、いずれかのフラグ型変数で閉じれば、正常に機能するようです(<!--not_edit_area-->~<!--not_edit_area-->のように閉じなかった場合、エラーでページ自体が表示されません)。また、これはどのページでも関係なく、たとえばトップページ(index_area)において<!--not_index_area-->~<!--/not_index_area-->という組み合わせを使用しても、同様の結果が得られます。

これが、このテクニックの謎の部分です。そもそも、一体どういう仕組みでこのようなテクニックが可能となっているのか……?

たとえば<!--rcomment-->~<!--/rcomment-->は、最近のコメントの数だけその中身を繰り返して表示します。環境設定で最近のコメントの表示件数を5件に設定して、ブログにコメントが5件以上寄せられている状態では、<!--rcomment-->あ<!--/rcomment-->は「あああああ」と表示されます。同様に、3件ならば「あああ」、1件ならば「あ」とだけ表示されます。そして、コメントが1件も寄せられていない状態では、「あ」を0回繰り返して表示、つまり何も表示されません。

同様に考えれば、<!--rcomment--><!--not_edit_area--><!--/rcomment--><!--rcomment--><!--/not_edit_area--><!--/rcomment-->も、コメントが0件のときには何の意味も持たなくなるはずです。ところが、なぜか上記のようなことが起こるのです。しかも、単純に<!--rcomment-->~<!--/rcomment-->の中身が出力されるわけではないようです(もしそうであれば、前述のようにindex_areaにおいて<!--not_index_area-->~<!--/not_index_area-->を使用したり、対応関係にないタグを組み合わせたりはできないはずです)。

さらに、なぜコメントやトラックバックがある場合に問題が生じないのか、という点も謎です。すなわち、最近のコメントが5件あれば、<!--rcomment--><!--not_edit_area--><!--/rcomment-->は一見<!--not_edit_area-->を5回繰り返しそうに思えます。そうであれば、たとえば<!--rcomment--><!--category_area--><!--/rcomment-->~<!--rcomment--><!--/not_search_area--><!--/rcomment-->

<!--category_area--><!--category_area--><!--category_area--><!--category_area--><!--category_area-->
内容
<!--/not_search_area--><!--/not_search_area--><!--/not_search_area--><!--/not_search_area--><!--/not_search_area-->

という具合になり、閉じられるべきものが正しく閉じられていないため、当然ながらエラーでページが表示できなくなるはずです。ところが実際は、このような問題は生じず、通常どおり項目が表示されます。とはいえ、ここで<!--/not_search_area-->を省略するとエラーになるため、このことから、<!--rcomment-->~<!--/rcomment-->内が完全に無視されているわけではないということが推測できます。

……書いていてわけがわからなくなってきたので、謎解きはひとまずこの辺まで。

どういう仕組みかはさておき、これは地味に使えるテクニックではないかと思います。コメントとトラックバックを例にとりましたが、もちろんほかの変数でも同様で、たとえば、

<!--topentry--><!--not_edit_area--><!--/topentry-->
(エントリーが存在しないときに消える内容)
<!--topentry--><!--/not_edit_area--><!--/topentry-->

のようにすれば、エントリーが1つもない場合(ブログ内検索で1件もヒットしなかった場合等)に、エントリーを内包しているブロック自体を消したりできます。工夫次第では、何かもっと面白いことができるかもしれません。

投稿日
2007-12-23
カテゴリー
WebDesign
タグ
(X)HTML

<ul><li>って、いわゆる箇条書きみたいな感じに項目を並べるときに使う要素だと理解しているんですが、箇条書きっていうと、普通は項目が複数あることを想定しますよね。それで、じゃあ1つしか項目がなかったらリストにしちゃいけないのか、とふと疑問に思いました。

直感では、別に1つでも問題ないような気がします。が、まだ(X)HTMLのなんたるかを良くわかっていないので、全然自信がないです。項目が1つのリストもマークアップとして間違っていないはず。たぶん……そう思いたい。たとえばブログの記事について考えると、投稿日時とかカテゴリーとかコメント数とか、そういう情報はリストに適しているはずです。でもこれが投稿日時だけだったら(FC2ブログは記事が必ずどれかのカテゴリーに属するので、そういうことはあまりないと思いますが、他のブログサービスならありえそうです。カテゴリーなし、コメントもトラックバックもなし、みたいな)……どの要素でマークアップするのがいいんでしょうか。やっぱりこの場合でも<ul><li>が適してるような気がします。なんとなく。だって、他にもっといいのが思い浮かばない。<p>でもまぁ良さげだけど、やっぱり段落よりはリストの方がいい気がします。ってこれはもしかしてものすごく当たり前のことなのかな。

そんなことを考えていたところ、巡回先の綺麗なデザインのサイトでこんな記述を見つけました。

次にdiv要素のclass名"date"の部分。日付を段落で表示するのもどうかと思うので、これはOKだと思う。

むぅ、divとな……divって、こういうときに使うものなのかな? なんとなく、div直下にそのままテキストを置くのは避けていたのだけど。そして私ならここで<ul><li>を使いたくなります。divを使うなら、まだ段落のほうがいい気が……いや、でも自信はないです。必要以上にdivを嫌ってしまってるかも。

というか、人様のサイトに意見する前に自分のブログの絶望的に汚いCSSを早く何とかしないと……勉強することがたくさんあって、テンプレの共有登録申請はまだまだ先になりそうです。

余談ですが、この記事で初めて<blockquote>を使ってみたところ、何故かIEでの表示がずれてしまっていました。調べたら、paddingとborderの指定が原因で起こったバグであると判明(とりあえず、blockquoteのスタイルを変更しました)。こんなの全然知らなかったです。IE怖ぇ……

投稿日
2007-12-15
カテゴリー
FC2BLOG
タグ
(X)HTML
CSS
変数

前のエントリーでちらっと書いたんですが、他に同じことをしている例が見つからなかったので、一応ちゃんと紹介しておくことにします(ずーっと以前に雲の上のDanielさんがこれに近いことをされていたようですが、それとはまた違う方法)。

FC2ブログの独自変数のひとつに、<%comment_url+str>というものがあります。これは<!--comment-->~<!--/comment-->内で使用でき、コメント投稿者がURLを入力していた場合に「URL」という文字列にリンクが張られる、というもの。そして、URLが入力されていなかった場合でも空のリンクは生成されない、というのがこの変数の便利なところなんですが、しかしその場合でも「URL」という文字列だけは表示されてしまいます。以下はこの文字列を非表示(不可視と言ったほうが正しいかも)にする方法です。

HTMLの編集で、<%comment_url+str>の部分を以下のように書き換えます。

<span class="commenturl"><%comment_url+str></span>

そして、CSSに以下のコードを追加します。

.commenturl {
        visibility: hidden; 
}

.commenturl a {
        visibility: visible; 
}

以上で完了ですが、注意点があります。visibility: hidden;は、display: none;とは違って、ボックスを生成させなくするのではなく、生成されるボックスを不可視化するものです。すなわちボックス自体は生成され、その部分はレイアウトに影響を与えます。なので、<%comment_url+str>の直後に何か(たとえばコメントの投稿時間)を記述すると、「URL」という文字列が表示されるはずであった部分に空白ができてしまいます。というわけで、この小技を使う際は、<%comment_url+str>が行の末尾(右寄せの場合は、先頭)にくるように工夫してください(よく考えると微妙な技だな)。

ところで何故display: none;を使用しないのかというと、実はこのdisplay: none;が指定してあると、子孫要素のdisplayに他の値を指定していても、その値が上書きされないからです。……という基本的なことを理解せずに、当初はdisplayを使って悪戦苦闘しておりました。まだまだ勉強不足です。

奥付