2005年05月16日 (月)

HaloScan テンプレートお見せします

今私が使っている HaloScan のテンプレートと CSS ファイルを参考例としてお見せします。

昨日のエントリ「HaloScan テンプレートは進化しています」で HaloScan のテンプレートで使えるテンプレートタグを紹介しました。そのエントリの最後の方に form タグが変な位置にあるからデフォルトはお薦めしないと書きました。

しかし、機能が増えた分デフォルトのテンプレートを読み解きしかも直すのは骨が折れる作業です。しかもその間違え方は、テンプレートを抜本的に改造しないと直せそうもないものなのです。直すことをお薦めしておきながらそんな骨の折れる作業というのもなんとも後味が悪いので、今現在使用しているテンプレートと CSS をここに掲載することにしました。HaloScan の機能向上にしたがって陳腐化すると思うので公開フォルダには置きません。

テンプレート
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset={HSCharset}" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <title>HaloScan.com - Comments</title>
        <link href="{HSStylesheet}" type="text/css" rel="stylesheet" />
        <script type="text/javascript"><!--
function emo_pop() {
    window.open('commenthelp.php','Help','width=200,height=360,resizable=yes,scrollbars=yes');
}
        // --></script>
        <script type="text/javascript"><!--
if (opener) {
    document.write('\x3Cbase target=\x22_blank\x22 /\x3E');
}
else if (parent) {
    document.write('\x3Cbase target=\x22_parent\x22 /\x3E');
}
        // --></script>
    </head>
    <body>
        <script type="text/javascript" src="http://homepage.mac.com/yuji_okamura/iblog/C2E.js"></script>
        <div id="Banner">
{HSifBlogPost}
            <h1>「{HSBlogPostTitle}」へのコメント</h1>
{/HSifBlogPost}
            <strong>古いものから新しい順です。</strong>
{HSifSubmit}
            <p>
                <em>
                    投稿は成功しました。
    {HSifModeration}
                    しかし承認待ちです。
    {/HSifModeration}
                </em>
            </p>
{/HSifSubmit}
{HSifErrorMessage}
            <p>
                <strong>{HSErrorMessage}</strong>
            </p>
{/HSifErrorMessage}
        </div>
        <div id="container">
{HSifLoggedIn}
            <form method="post" action="/members/posts.php?silent=1">
                <p>
                    Logged in as: <_a href="/members/" target="_blank">{HSMemberName}</a> (<_a href="/members/logout.php" target="_blank">Logout</a>)
                    <input type="submit" name="massdeletego" value="Delete selected" onclick="return confirm('Permanently delete all selected posts?')" />
                </p>
{/HSifLoggedIn}
            <dl >
{HSCommentStart}
                <!-- {HSCommentID} -->
                <dt>
                    <_a id="C{HSCommentID}" name="C{HSCommentID}"  title="このコメント #{HSCommentID} の URL"><span class="dummy">●</span></a>
    {HSifCommentGravatar}
                    <img src="{HSCommentGravatar}" alt="" title="{HSCommentName} の化身" class="gravatar" width="28" height="28" />
    {/HSifCommentGravatar}
    {HSifCommentUrl}
                    <_a href="{HSCommentUrl}" title="{HSCommentName} さんのサイト">
    {/HSifCommentUrl}
                        {HSCommentName}
    {HSifCommentUrl}
                    </a>
    {/HSifCommentUrl}
    {HSifLoggedIn}
                    |
                    <_a href="/members/editpost.php?post={HSCommentID}&amp;silent=1" title="Edit comment"><img src="/images/icon_edit.png" title="Edit comment" alt="Edit comment" border="0"></a>
                    <_a href="/members/posts.php?deletepost={HSCommentID}&amp;silent=1" title="Delete comment" onclick="javascript:return confirm('Permanently delete this post?')"><img src="/images/icon_delete.png" title="Delete comment" alt="Delete comment" border="0"></a>
                    <input name="massdelete[]" value="{HSCommentID}" type="checkbox">
    {/HSifLoggedIn}
                </dt>
                <dd class="MessageCell">{HSCommentMessage}</dd>
                <dd class="postedDate">
    {HSifLoggedIn}
        {HSifCommentEmail}
                    <div class="attribute">
                        <span class="name">メール</span>
                        <span class="value"><_a href="mailto:{HSCommentEmail}">EMail</a></span>
                    </div>
        {/HSifCommentEmail}
    {/HSifLoggedIn}
                    <div class="attribute">
                        <span class="name">投稿日時</span>
                        <span class="value"><_a href="#C{HSCommentID}" title="このコメント #{HSCommentID} の URL">{HSCommentDate}</a></span>
                    </div>
                </dd>
{HSCommentEnd}
            </dl>
{HSifLoggedIn}
            </form>
{/HSifLoggedIn}
            <div class="InputCell">
                <script type="text/javascript"><!--
document.write(
    '\x3Cdiv class=\x22function\x22\x3E',
    '\x3Ca href=\x22javascript: window.location.reload(true)\x22 target=\x22_self\x22\x3Ereload\x3C/a\x3E',
    '\x3C/div\x3E'
);
                // --></script>
                {HSFormStart}
                <dl>
                    <dt><label for="name">Name (<span class="accesskey">N</span>)</label></dt>
                    <dd><input id="name" name="name" type="text" size="38" value="{HSVisitorName}" tabindex="1" accesskey="N" /></dd>
                    <dt><label for="email">Email (<span class="accesskey">E</span>)</label> - <em>表示されません</em></dt>
                    <dd>
                        <input id="email" name="email" type="text" size="38" value="{HSVisitorEmail}" tabindex="2" accesskey="E" />
                        <div class="note">
                            <_a href="http://www.gravatar.com/" title="Gravatar - Globally Recognized Avatar">Gravatar</a> にサインアップするとメールアドレスの入力でアバターアイコンを表示できます。
                        </div>
                    </dd>
                    <dt><label for="url">URL (<span class="accesskey">U</span>)</label></dt>
                    <dd><input id="url" name="url" type="text" size="38" value="{HSVisitorUrl}" tabindex="3" accesskey="U" /></dd>
                    <dt><label for="addMessage">Comment (<span class="accesskey">C</span>)</label> <_a href="commenthelp.php" onclick="emo_pop(); return false;" title="Smiley and tag help">コメントの入力ヘルプ</a></dt>
                    <dd><textarea id="addMessage" name="addMessage" rows="12" cols="38" tabindex="3" accesskey="C">{HSVisitorMessage}</textarea></dd>
                </dl>
                <div class="formSubmit">
                    <input name="submit" type="submit" value="投稿する" class="SubmitButton" tabindex="4" accesskey="S" />(<span class="accesskey">S</span>)
                </div>
                {HSFormEnd}
            </div>
        </div>
        <div id="Footer">
            Commenting by <_a href="http://www.haloscan.com/">HaloScan.com</a>
        </div>
    </body>
</html>
ダウンロード

body 要素の先頭にある <script type="text/javascript" src="http://homepage.mac.com/yuji_okamura/iblog/C2E.js"></script> の部分は複数ブログで一つの HaloScan アカウントを使用しているときに、対応する元のエントリへのリンクを表示するためのもので、私専用です。それ以外は一般に使えると思います。

CSS
body {
    background-color:   silver;
}
#container {
    margin-top:     1em;
    margin-bottom:  1em;
    margin-left:    1em;
    margin-right:   1em;
}
.MessageCell {
    padding:        1em 1em 1em 0em;
    margin-bottom:  1em;
}
.dummy {
    display:    none;
}
.InputCell {
    position:   relative;
    margin-top: 1em;
}
.InputCell .function {
    position:   absolute;
    top:        0.25em;
    right:      0.25em;
}

#Banner {
    border-bottom:  medium ridge black;
}
a img {
    border: 0;
}
.MessageCell {
    background-color:   white;
}
dd.MessageCell {
    margin-left:    0em;
}
.InputCell {
    margin-top:     0.5em;
    padding-top:    0.5em;
    border-top:     thin dotted black;
}
#Footer {
    border-top: medium ridge black;
}

#Banner {
    text-align: center;
}
.postedDate {
    text-align: right;
}
.InputCell .function {
    text-align: right;
    font-size:  smaller;
}
.formSubmit {
    text-align: center;
}
label:after, .attribute .name:after {
    content:    ": ";
}
.accesskey {
    text-decoration:    underline;
}
.note {
    font-size:  smaller;
    font-style: italic;
}
#Footer {
    text-align: center;
}

/* for Trackback View */
td.MessageCell {
    padding-left:   1em;
}
ダウンロード

この二つを用いると不必要と思える table レイアウトを排し、管理者モードのタグ構成の不具合も解消されます。HaloScan がテンプレートタグに間違った XHTML を吐き出さなければ valid な上にアクセシビリティも向上すると思います。

テンプレートの方は、UTF-8 でのバックスラッシュを用いています。コピー&ペーストで円マークになってしまったりするので参考にするときは注意してください。UTF-8 ではバックスラッシュと円マークは別な文字ですがエディタとその使い方によっては円マークに丸められてしまいます。


Posted: 19:29    | Comment | Trackback

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

CacheUpIt

iblogPatcher

Weblog Commenting and Trackback by HaloScan.com

iBlog

Copyright © 2003-2006 OKAMURA Yuji, All rights reserved.