« 残るは MonthLabel だけ | Main | 文書の適合性(Mac_Stripe-XHTML_Strict-ja 解説) »

2005年10月27日

Mac_Stripe-XHTML_Strict-ja

私が使用しているテンプレートと CSS を公開します。

ダウンロード

Mac_Stripe-XHTML_Strict-ja.tar.gz (5015byte)

特徴

このセットには次の特徴があります。

  • Thingamablog 1.0.2 に付属のテーマ Mac_Strip が視覚プレゼンテーションのベースになっている。

    たまたまこのブログを作成するときに Mac_Stripe をテーマに選んだからです。このため CSS で指定されている背景画像 stripes.png が web ディレクトリにあることが前提になっています。

  • 日本語に最適化されている。

    日時の書式などを現時点でできる限り日本語として自然なものにしてあります。

  • HaloScan のための安全なコードが組み込まれている。

    HaloScan アカウントを取得し Custom Tags で HaloScanAccount を設定するだけで HaloScan によるコメントとトラックバックが使用できるようになっています。しかも現時点で私がわかる範囲で最も Web アクセシビリティと相互運用性に富んだコードを採用しているだけでなく、HaloScan が不調の時にも対応可能なものにしてあります。(エントリ「Thingamablog にコメントとトラックバックを付ける」参照)

  • 所謂「Read More」を付けられる。(参照「Hypertext タグの置換設定の使い方」)

    エントリ中に HTML コメント <!-- end of abstruct --> を追加すると、Front Page、Archive Page、Category Page でそれ以降が「続きを読む」と書かれたリンクになり、Entry Page へのリンク(permalink)になります。RSS においても permalink へのリンクに統一し <!-- end of abstruct --> 以降は省略されます。

    <!-- end of abstruct --> はエントリの編集画面を HTML モードにして書いてください。

  • エントリ中でテンプレートタグ <$BaseURL$> を使える。(参照「Hypertext タグの置換設定の使い方」)

    <$BaseURL$> はエントリの編集画面を HTML モードにして書いてください。

  • RSS Auto-Discovery が組み込まれている。

    Thingamablog のオリジナルのテンプレートには RSS Auto-Discovery が組み込まれていません。そこで RSS Auto-Discovery を組み込んであります。これにより RSS リーダや RSS を処理するサービスでブログの RSS を自動で発見できるようになります。(「RSS Auto-Discovery も付けよう」参照)

  • Trackback Auto-Discovery が組み込まれている。

    Thingamablog のオリジナルのテンプレートには Trackback Auto-Discovery が組み込まれていません。そこで Trackback Auto-Discovery を組み込んであります。これによりトラックバックをするツールなどでトラックバック Ping を送るための URL が自動で発見できるようになります。(「Trackback Auto-Discovery を付けよう」参照)

  • CSS シグネチャが組み込まれている。

    Custom Tags で設定する BlogID の値を用いた CSS シグネチャが組み込まれています。これにより閲覧者があなたのブログにだけ適用するためのスタイルをブラウザのユーザスタイルシートに設定できます。(「CSS シグネチャとその iBlog への応用 」参照)

  • ページの種類を表す class 属性が body 要素に組み込まれている。

    例えば main.template の body 要素には class="mainPage" という指定が入っています。これにより CSS でページごとに異なるスタイルを割り当てることが可能になります。これは「CSS シグネチャとその iBlog への応用 」で勝手に名付けているページシグネチャです。

  • エントリの内容のための CSS ファイルをサイトのための CSS ファイルと分離。

    styles-site.css はあくまでもテンプレートファイルに記載したマークアップのプレゼンテーションを記述し、日々追加更新されるエントリの内容のためのプレゼンテーションは styles-entry.css としました。

  • XHTML 1.0 Strict が使用されている。

    現在最も使いやすい HTML の仕様は XHTML 1.0 です。XHTML 1.0 の中でも Transitional が多く使用されていますが、その名のとおりこれは旧態のタグ付けからの移行用の仕様です。XHTML 1.0 本来の仕様は Strict なのです。

  • 所謂 Web 標準に則ったマークアップ。

    表示のためのマークアップを排除しページの論理構造をマークアップしてあります。このため読み上げブラウザや携帯電話のブラウザなどで閲覧しても遜色がありません。

    ただしカレンダーは対象外です。カレンダーはそもそも視覚に訴えるプレゼンテーションなので妥協しました。

要するに iBlog の利用を通して私が学んだ色々なことが投入してあります。その結果、Web アクセシビリティ、 SEO に配慮され、相互運用性と将来への互換性に優れたブログを構築できると自負しています。

必要な Custom Tags

Mac_Strip-XHTML_Strict-ja.tar.gz に含まれるテンプレートは幾つかの Custom Tags が設定されていることを前提としています。これはテンプレートを私個人のものではなく一般に使えるようにするための措置です。以下、設定すべき Custom Tags を列挙します。

BlogAuthor
役割
あなたの氏名またはハンドルです。これは head 要素内の conent="Author" 属性を持った meta 要素において content 属性の値と conent="Copyright" 属性を持った meta 要素において content 属性の値の一部して用いられます。
例
OKAMURA
BlogAuthorEmail
役割
あなたのメールアドレスです。これは head 要素内の rev="made" 属性を持った link 要素において href 属性の値の一部として用いられます。なるべく実体参照を使ってスパマーによるメールアドレスの自動収集に対抗しましょう。心配な人は人には訂正方法がわかる範囲内でわざと偽装のメールアドレスを記載しておくのもよいでしょう。
例
&#121;u&#106;i&#95;o&#107;a&#109;u&#114;a&#64;m&#97;c&#46;c&#111;m
BlogInURL
役割
ブログのベース URL のうちホスト部以降の部分を表す文字列。これは Google によるサイト内検索のパラメータの一部として使用されます。この検索のためのフォームは index.template にあります。
例
homepage.mac.com/yuji_okamura/DotMac/t/
BlogKeywords
役割
ブログのキーワード群です。これは head 要素内の conent="Keywords" 属性を持った meta 要素において content 属性の値として用いられます。
例
Thingamablog,iBlog,.Mac,dotMac,Mac,Mac OS X
CopyrightPeriod
役割
著作権が発生している期間です。これは head 要素内の conent="Copyright" 属性を持った meta 要素において content 属性の値の一部として用いられます。
例
2004-2005
BlogID
役割
body 要素の id 属性の値です。これは上述の CSS シグネチャになります。一意性を保つためにブログの URL をベースにした文字列がよいでしょう。
例
homepage_mac_com-yuji_okamura-DotMac-t
HaloScanAccount
役割
HaloScan アカウントです。
例
okamura
NavigationItems
役割
各ページの Powered by の手前に出力する HTML コードです。
例
<div class="side">
<h2>関連リンク</h2>
<ul>
<li><a href="http://tbp.jp/tbp_4376.html" title="Thingamablog - トラックバック・ピープル">Trackback People に寄せられた話題</a></li>
<li><a href="http://www.technorati.jp/search/search.html?query=http%3A%2F%2Fhomepage.mac.com%2Fyuji_okamura%2FDotMac%2Ft" title="リンク検索結果">Technorati Japan による被リンク検索結果</a></li>
<li><a href="http://blogsearch.google.com/blogsearch?q=Thingamablog&amp;scoring=d&amp;num=15&amp;output=rss" title="Google Blog Search: Thingamablog">Google Blog Search による Thingamablog の検索結果</a></li>
</ul>
</div>

インストールの仕方

適用するブログのディレクトリに Mac_Stripe-XHTML_Strict-ja.tar.gz を置いて、シェル上でそのディレクトリに移動してから次のようにします。

tar xfz Mac_Stripe-XHTML_Strict-ja.tar.gz

シェルを使い慣れていない人のために解説を加えます。

Mac_Stripe-XHTML_Strict-ja.tar.gz を解凍すると web ディレクトリと templates ディレクトリができます。それぞれのディレクトリには適用するブログのディレクトリ直下にある同名のディレクトリに上書きコピーするファイル群が収められています。

  • Posted by OKAMURA at 05時26分
  • Edited on: 2006年07月09日 18時27分
  • Categories: 配布