スキップしてメイン コンテンツに移動

ブログテンプレートのマークアップ規則

Web サイトや Web 文書にはその目的に応じて固有のマークアップルールがあります。

このルールを正しく反映したマークアップを行うために“デザイナーズ DTD”と仮に呼ぶものを定義します。ルールの決定には Web デザイナーが中心となるため一旦そう呼ぶことにします。また当ブログでは実用上記事本文用のソレだけを定義します。

当ブログの DDTD は以下の通りです。マルチデバイス、マルチメディアでの検証が済んでいると考えます。

パーツの定義

サイトに固有のタグ構造・クラス名や属性と値を組み合わせたものをパーツと呼びます。

PicaThumnail
サムネイル画像にオリジナル画像へのリンクを張ったものです。
<a href="//*.bp.blogspot.com/**/original.jpg"><img src="//*.bp.blogspot.com/**/s200/thumb.jpg"></a>
ObjCap
オブジェクトにキャプションを追加します。img[alt] は alt="" としておきます。
<div class="caption" style="width:200px">
<figure>
img | iframe | object | embed | video | PicaThumbnail
<figcaption>インラインテキスト</figcaption>
</figure>
</div>
Code
Google Code Prettyfy です。
<pre class="prettyprint lang-*"><code>/* code here */
</code></pre>
Links
<div class="links">
<a href=""></a>
</div>
AA
<pre class="aa">A-+-B
  |
  +-C</pre>
MONA
<pre class="mona">明日はがんばろう
 ∧_∧
( ´・ω・`)  (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““</pre>

包含要素(と包含パーツ)の定義

1. ArticleBody

a[href], img[src] は picasa の画像についてはプロトコルを省略すること

div class="aBodyRoot"
 - h2-h6, p, hr, ol, ul, dl
 - table(2列以下)
 - blockquote
 - img, video, audio, iframe, object, embed
 - PicaThumbnail
 - Code
 - Box
 - HScroll
 - Links
 - AA
 - MONA
2. blockquote
cite, title 属性の内容は画面に表示されます。
直下に table を含むことはできません。blockquote > HScroll > table とします。
blockquote
 - h2-h6, p, hr, ol, ul, dl
 - img, video, audio, iframe, object, embed
 - PicaThumbnail
 - Code
 - Box
 - HScroll
 - Links
 - AA
 - MONA
3. Box
200px 程度までの複数のサムネイル画像を並べる際に使用します。
ブログ記事の最初の画像は 200 x 200 以上とします。Facebook の OGP のためです。
一つないし2つのサムネイルにテキストを回り込ませる際に使用します。サムネイルが3つ以上の場合はその他の要素を含めないで Box を閉じます。
div class="box"
 - img, video, audio, iframe, object, embed
 - PicaThumbnail
 - ObjCap(2つまで)
 - p, hr, ol, ul, dl
4. Note
補足情報を書くときに使います。
直下に table を含むことはできません。Note > HScroll > table とします。
div class="note"
 - h2-h6, p, hr, ol, ul, dl
 - blockquote
 - img, video, audio, iframe, object, embed
 - Code
 - Box
 - HScroll
 - Links
 - AA
 - MONA
5. HScroll
小さいディスプレイで極端に閲覧性の落ちてしまう要素とパーツを横スクロールにします。3列以上のテーブルは HScroll でラップしましょう。また余白を大きく取る Note, blockquote 下の table は列に関わらず HScroll でラップします。
HScroll
 - table
 - Code

デモ、またはこのブログのオールキャスト

ArticleBody 直下の h3 タグです

ArticleBody 直下のデモです。


直前は hr タグです。

ArticleBody > h4 です

  1. ol li です。
  2. ArticleBody 直下のデモです。

  • ul li です
    1. ul li ol li です
    2. ArticleBody 直下のデモです。
  • ArticleBody 直下のデモです。
ArticleBody > h5 です
ArticleBody > h6 です
dt です
dd です
thaed th[rowspan=2]thead td
thead td
thead th のリンクthead td のリンク
tbody thblockquote 下に table を配置する際は hscroll で囲みます
tbody th のリンクtbody td のリンク
tfoot thtfoot td
A-+-B
  |
  +-C
明日はがんばろう
 ∧_∧
( ´・ω・`)  (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““

2. blockquote 直下

blockquote > h2 です

blockquote > h3 タグです

blockquote > p です。


直前は hr タグです。

blockquote > h4 タグです

  1. ol li です。
  2. blockquote 直下のデモです。

  • ul li です
    1. ul li ol li です
    2. blockquote 直下のデモです。
  • blockquote 直下のデモです。
blockquote > h5 です
blockquote > h6 です
dt です
dd です

blockquote 直下に Box を配置することもできます。

thaed th[rowspan=2]thead td
thead td
thead th のリンクthead td のリンク
tbody thblockquote 下に table を配置する際は hscroll で囲みます
tbody th のリンクtbody td のリンク
tfoot thtfoot td
A-+-B
  |
  +-C
明日はがんばろう
 ∧_∧
( ´・ω・`)  (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““

3. Box

オブジェクトの整列

Boxで画像等に文書等を回り込ませる

オブジェクトに対してテキストを回り込ませます。


  • オリジナル画像へのリンク付きのサムネイル画像はクリックでボックス幅まで引き伸ばすことができます、これは PicaThumbnail で実現しています
  • img, video, audio, iframe, object, embed は左寄せになります。
ジャンク狼

ObjCap で PicaThumbnail, img, video, audio, iframe, object, embed にキャプションを付けます。alt="" としておきます。


オリジナル画像へのリンク付きのサムネイル画像はクリックでボックス幅まで引き伸ばすことができます、これは PicaThumbnail で実現しています
img, video, audio, iframe, object, embed は左寄せになります。

4. Note

note > h2 です

note > h3 です

ArticleBody 直下のデモです。


直前は hr タグです。

note > h4 です

  1. ol li です。
  2. note 直下のデモです。

  • ul li です
    1. ul li ol li です
    2. note 直下のデモです。
  • note 直下のデモです。
note > h5 です
note > h6 です
dt です
dd です
thaed ththead td
tbody thnote 下に table を配置する際は hscroll で囲みます