ブロック型とインライン型

これは、HTMLのブロック要素とインライン要素の違いでもあります。ここは重要なので最低限理解するようにしてください。これは、Wikiの書き方だけでなく、テーマのデザインや、プラグインの開発でも必要になってきます。

まずは、タグの意味から入るとより、読みやすくなおかつ、サーチエンジンにもヒットしやすいサイトを作ることができます。

ブロック型とは?

ブロック型とは文章で言うところの段落や骨組みに相当します。pタグやdivタグが有名です。pタグはparagraph(段落)の略で、divはdivision(区分)の略、h1, h2, h3などといったhタグはheadline(見出し)の略です。また、テーブルタグや、ul(Unordered List)やol(Ordered List),dl(Defention List)などといったリストタグもブロック型です。

文章で考えるブロック型

まず最初に、文章を載せることから考えましょう。以下のテキストをWikiで入力します。

 吾輩(わがはい)は猫である。名前はまだ無い。
 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)には一度も出会(でく)わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙(けむり)を吹く。どうも咽(む)せぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
 この書生の掌の裏(うち)でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗(むやみ)に眼が廻る。胸が悪くなる。到底(とうてい)助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

正しい例は、以下のやり方です。

吾輩(わがはい)は猫である。名前はまだ無い。 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)には一度も出会(でく)わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙(けむり)を吹く。どうも咽(む)せぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。 この書生の掌の裏(うち)でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗(むやみ)に眼が廻る。胸が悪くなる。到底(とうてい)助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

間違った例は以下のようになります。

吾輩(わがはい)は猫である。名前はまだ無い。
どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)には一度も出会(でく)わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙(けむり)を吹く。どうも咽(む)せぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
この書生の掌の裏(うち)でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗(むやみ)に眼が廻る。胸が悪くなる。到底(とうてい)助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

この2つの違いは、改行の入れ方です。上は段落を区切ったもの。下は<br>で改行したものです。なぜ、<br>で改行するとよくないのか?それは、改行というのは文章の途中でも使用可能です。しかし、段落は文章ごとの扱いになります。言い換えると、下の例では、段落と段落がつながって、すべて同じことを示しているという状態になります。

HTMLではわかりにくいので、原稿用紙を例にとってみましょう。原稿用紙で文章を書くときに段落の一番先頭から書くときは、1文字空けるという習慣があるとおもいます。下の文章は、この1文字あげるという習慣を無視した書き方であると言えます。

PukiWikiでは2回リターンすることで文章を段落ごとに分けることができます。まず最初に、ここを頭に入れてWikiを使いましょう。

じゃあ、インライン型って何?

インラインとは、文章の一部分(単語とか)をさします。

吾輩(わがはい)は猫である。名前はまだ無い。

この文章で、「吾輩」という部分に原作者は、ルビを降ろうとしているのがわかると思います。これをWikiで表現すると、

&ruby(わがはい){吾輩};は、猫である。名前はまだない。

になり、出力されるテキストは、以下のようになります。

吾輩(わがはい)は、猫である。名前はまだない。

このように、文章中のひとつの単語に対して反映されるものがインライン型と考えると分かりやすいと思います。

実際デザインするにあたって

テーマのデザインで考えるブロック型

layout.png

PukiWiki Adv.のテーマの構造は左図のようになっています。

Navigationの位置やToolBarの位置はスキンによって変わりますが、原則的に、headerの位置はページ上部、Footerの位置はページ下部、MenuBarやSideBarはBodyの右側か左側に置きます。

この様子がまるで積み木のようになっていることに気がついたでしょうか?つまり、この積木がブロック型ということになります。

ここの例は、フル仕様の3段組みになっていますが、実際使う場合は2弾組みで十分でしょう。

しかしながら、tableタグを使わずに段組をするのは難しいと思います。下記サイトで実際CSSのみで段組を実現しているCSSのサンプルがあるので、参考にしてみてはどうでしょうか?サーチエンジン最適化を考慮するならば、一般的に本文がページの先頭に来るように書くと効果が高いです。tableタグによる左にメニューが来るデザインの場合、メニューの部分が本文よりも先に来てしまうので、その分SEO的に損をするという問題もあります。

参考

プラグインで考えるブロック型

さて、プラグインにもブロック型とインライン型があります。一般に#で始まるものがブロック型で&で始まるものがインライン型です。一番分かりやすい違いは、インライン型のものは、[と]でリンクを貼ることができますが、ブロック型はリンクを貼ることができません。(refプラグインは別)

○
[[&color(red){Red};>赤]]
[[&ref(banner.png,nolink);>http://example.com/]]
×
[[#code(plain){テキストだよ};>テキスト]]
[[#flash(banner.swf,width=200,height=40);>http://example.com/]]

このことを念頭においてプラグインを設計してください。なお、例外はimgタグを出力する場合で、imgタグはブロック型にもかかわらず、インライン要素であるaタグを外側に含めることができます。

また、objectタグやiframeもブロック型とインライン型があり得えます。こういう場合は、ブロック型で出力したい場合は、divタグなどでくくってください。

なお、Adv.は、HTML5前提なので、安易にdivタグのみを使うことは避けてください。ナビゲーション用途のプラグインならくくるタグは<nav>にすべきですし、あるワードとそれに対する説明文を出力するようなプラグインならば、<figure>と<figcaption>タグを使ったものになるでしょう。