|
DiaryCGI nicky! Strict mode | はじめに 過去ログへのリンクリスト 画像レイアウト右上＆左上指定時 記事本文に改行が続いた場合 タグモード アンカー FAQ 最後に |
このページは、『HTML STRICT』が判る方を対象に記述しています。
nicky.cgiのver2004/07/31より、初期設定→その他より『Transitional / Strict / XHTML』を選択し、モードを切り替える機能を追加しました。
はじめに言及しますが、HTML / XHTML の STRICT モードは、学術系で開発された仕様の為、私達が運営するサイトや営業目的で運営するサイトには不向きです。よって、神経質なまでにSTRICTモードに拘る必要はないと考えています。
なお、今回対象としたタグは以下の３箇所です。
代わりにスタイルシートで調整します。
styleを代用しました。
改行が続いた場合に変換するタグを指定します。
次章より各モードについて解説します。
時代の流れにより<font>タグに抵抗を覚える人が増えたのでTransitionalモード以外に設定した場合は<font>タグを出力しません。代わりにスタイルシートで調整します。
また、JISX8341-3に従って<table><tr><td>内で指定しているbgcolorも外し、スタイルシートで調整するようにしました。
以下に過去ログリンクタグの、各モードの概要を記します。
| Mode | 概要 | 補足 |
| Transitional | 従来のnicky!と互換性を保ちます。 | 従来との互換性を保つ目的で残しました。いつかはこのモードを削除します。（早くても来年） |
| Strict | HTML strictに従ったタグを出力します。 | 画面の上や下に出力する月リスト／ページリストの出力に、<font> / bgcolorを用いません。スタイルシートで調整します。 |
Strict モードにて指定しているclass名を以下に記します。
月リストは１つの<table>タグで表示しています。
以下に月リストにふっているclass名を記します。
| 過去ログ | 2004年 | 10月 11月 12月 |
| 2005年 | 1月 2月 3月 4月 |
class="mtable"を指定しています。
class="pastmsg"を指定しています。
class="pasty"を指定しています。
class="pastm"を指定しています。
月リストで定義するスタイルシートのサンプルを以下に記します。
.mtable{
padding:1em;
background:#fff;
border:solid 1px #00f;
}
.pastmsg{
text-align:center;
color:$MsgOldCol;
font-size:$MsgOldSize;
background:$MsgOldOBgCol;
border:solid 1px #00f;
}
.pasty{
text-align:center;
border:solid 1px #00f;
background:$MsgOldYBgCol;
color:$MsgOldYFnCol;
font-size:$MsgOldSize;
}
.pastm{
border:solid 1px #00f;
background:$MsgOldMBgCol;
color:$MsgOldYFnCol;
font-size:$MsgOldSize;
}
補足１：border:solid 1px #00f;をborder:none;に書き換えれば枠線を消せます。
補足２：あまり知られていませんが、過去ログ月単位指定時に表示される年／月リストは、初期設定→過去ログにまつわる設定→以下月単位指定時に有効、に設定項目があります。
ページリンクの先頭から最後までを<div class="pastlink">で囲っています。
こんな感じ↓
<div class="pastlink"> <[最新][1][2][2][最古]> </div>
STRICTには<img>にalignがありません。よって、Transitionalモード以外に設定した場合は、画像レイアウト右上／左上指定時に<img>よりalignを外し、代わりにclass="layoutl" / class="layoutr" タグを埋め込んでいます。
Transitionalモード
<img src="hogehoge.jpg" width="200" height="200" align="left" alt="hogehoge.jpg 200×200">
Strictモード
<img src="hogehoge.jpg" width="200" height="200" class="layoutl" alt="hogehoge.jpg 200×200">
なので、このモードをご利用される際にはスタイルシートで以下のような行を追加すると良いでしょう。
.layoutl{float:left;}
.layoutr{float:right;}
補足
記事の本文に改行が連続で続いた場合、指定したタグに変換します。
補足：改行が連続で続いた場合をW3Cは認めています。この為、この項目を適用せずともHTML 4.01 STRICTであると認められます。
現状では記事が<p>で始まり、空行を作りたい時は</p>後に再度<p>し、文の終わりに</p>する方法が広まっています。
（補足：<p>は『段落』を示すタグなので、空行を作成するタグではありません。現行ブラウザの殆どで空行を作成しますが）
長いものに巻かれるのは自分のライフスタイルに反しますがデフォルトは、
改行が２つ続いた場合
</p><p>
改行が３つ続いた場合
</p><p><br>
としています。記事の始めと終わりに付加される<p>と</p>は、ユーザーカスタマイズで定義してあげてください。
扱う内容によっては、
改行が２つ続いた場合
</div><div>
改行が３つ続いた場合
</div><div><br>
と定義した方がしっくりくるかもしれません。
個人的には表示範囲が狭いブラウザで閲覧した時には複数の<br>が１つの改行として処理され、通常のブラウザで閲覧した時には<br>数分の改行が行われるので、特に拘る必要は無いと考えています。
XHTMLモードでは、nicky!が勝手に出力するタグをXHTMLに沿った形式で出力します。
<br>→<br />、<img src>→<img src />など。
W3CからはVALID XHTML1.1の称号を貰え、XHTMLに対応したブラウザからは問題無くアクセスできますが、アンカーのIDが数字から始まっています。（暇見て対応します）
nicky!はタイトル一覧等、記事へ直接リンクを貼る機能があります。
目的の記事へジャンプさせる為に<a name="日付"></a>（XHTMLモードでは name の代わりに id を出力）といったタグを出力しますが、これをCGIが出力するか、ユーザーカスタマイズモードで出力させるかを選択します。
初期設定→その他→アンカーをCGIに出力させない、を選択した場合は、ユーザーカスタマイズモードで name または id に $pt を指定してください。
例１）<a name="$pt" href="./nicky.cgi?DT=$pt#$pt" title="$pt">$TitleHead</a>
例２）<span class="title" id="$pt">$Title</span>
等。こう言う時は XHTML も便利ですね。
これは XHTML モードで運用される場合を想定した機能で、HTMLモードの場合はデフォルト（CGIがアンカーを出力する）のままで構わないと思います。
一応補足しておきますが、W3C の規格上、name は XHTML1.0 では使えますが、XHTML1.1 では使えません。それと実装面では N4等の古いブラウザでは id タグを認識してくれないので、自サイトのユーザー層を見てからどうするか検討してください。
Yes。但し、nicky!がデフォルトで出力するレイアウトと同じレイアウトとなるカスタマイズデータを配布しておりますのでご利用ください。→叩き台スキン。
例えば自動で広告が挿入される環境では、スタイルシートファイルへ自動的に広告が挿入されてしまう事で、ブラウザがスタイルシートを認識できなくなってしまう事があります。このような場合は、ヘッダ内で直接スタイルシートを記述することで対処します。
このページでは『STRICT』と銘打っていますが、やりたかった事は<font>タグを外したかっただけなので、DOCTYPE宣言はTransitionalが良かろうと思います、現存するブラウザの操作性ではtarget="_blank"してくれた方が嬉しい場合も多いですし。
N2やMicrosoftが競って独自のタグを実装した事を叩いている記事もよく見かけますが、学術系ではなく、趣味や営業目的でサイトを構築するのに相応しいタグを考案するスタイルは、私にとって嬉しかったです。