studiofly software

　Narutoの標準テンプレートはほぼ全てのデザイン要素をスタイルシート(CSS)で定義しています。 つまり、CSSを変更することで全く違う外見のサイトにすることが可能です。 このページでは標準テンプレート内で定義されているタグ・クラス・IDについて解説していきます。

　CSSについての詳しい説明はとほほのスタイルシート入門やCYBER@GARDENの「CSS講座」が参考になります。

　標準テンプレートは大きく分けて4つのブロックに分けられています。

　それぞれのブロックは「ヘッダ」「コンテンツ」「ナビゲーション」「フッタ」と呼ばれ、それぞれに「head」「content」「navi」「foot」とIDが振られており、 HTML上では　ヘッダブロック→コンテンツブロック→ナビゲーションブロック→フッタブロック　の順で並んでいます。

　これらのブロックの幅や位置をスタイルシートで指定することで、表示するときには ヘッダブロックが上、コンテンツブロックが右中央、ナビゲーションブロックが左中央、フッタブロックが下となるようにしています。つまり、これらを調整することで ヘッダブロックが左上、コンテンツブロックが上中央、ナビゲーションブロックが右上、フッタブロックが下など、自由な位置に動かすことが可能です。

　標準テンプレートではこのレイアウトをfloatを利用したテクニックで実現しています。IE5以降、NN7、Mozillaなどで正常な描画を確認済みです。

div#container [ID]

全体を囲むdivタグに振られたIDです。
標準：

text-align: left;
background: #ABF;
padding: 8px;
margin: 0 auto;
width: 660px;

div#head [ID]

ヘッダブロック全体を囲んでいるdivタグに振られたIDです。
標準：

color: #FFF;
background: #ABF;
text-align: right;
padding: 10px;
border: 1px solid #FFF;
width: 638px;

h1 [タグ]

ブログのタイトルを囲んでいるタグです。
標準：

font: 28px Verdana;
margin-bottom: 10px;

div#description [ID]

タイトル下のコメントを囲んでいるdivタグに振られたIDです。
標準：

div#content [ID]

コンテンツブロック全体を囲んでいるdivタグに振られたIDです。
標準：

padding: 8px 0 0 8px;
width: 482px;
float: right;

div.sheet [クラス]

エントリの日時、タイトル、本文などを囲んだdivタグに振られたクラスです。
標準：

margin-bottom: 1em;
width: 482px;

h2 [タグ]

エントリのタイトルを囲むタグです。
標準：

font: bold 9pt Tahoma;
color: #000;
background-color: #FFF;
padding: 5px;

div.text1 [クラス]

エントリの日時以外を囲んでいるdivタグに振られたクラスです。
標準：

font: normal 9pt Tahoma;
background-color: #FFF;
line-height: 180%;
padding: 5px;
margin-top: 4px;
border: 1px solid #FFF;

div.auther [クラス]

投稿者(auther)の部分を囲むdivタグに適用されるクラスです。
標準：

text-align: right;
font: normal 8pt Tahoma;
color: #5893FF;

div.stamp [クラス]

投稿日時の部分を囲むdivタグに適用されるクラスです。
標準：

text-align: right;
font: normal 8pt Tahoma;
color: #5893FF;

img.pict [クラス]

エントリ内の画像に適用可能なクラスです。投稿時にツールボックスの「画像」を使うと自動で挿入されます。
標準：

border: 1px solid #000;
padding: 15px;

div#navi [ID]

ナビゲーションブロック全体を囲んでいるdivタグに振られたIDです。
標準：

font: 9pt Tahoma;
color: #FFF;
background: #ABF;
margin-top: 8px;
border: 1px solid #FFF;
width: 168px;
float: right;

div#menu [ID]

メニュー部分全体を囲んでいるdivタグに振られたIDです。
標準：

padding: 0 10px;

div.link_title [クラス]

「Calendar」や「Category」など、メニューの各サブメニューのタイトルを囲むdivタグに適用されるクラスです。
標準：

font-weight: bold;
color: #ABF;
background: #FFF;
padding: 2px 5px;
margin: 1em 0 0.5em 0;

div.link_body [クラス]

メニューの各サブメニューの本文全体を囲むdivタグに適用されるクラスです。
標準：

ul.link_body [クラス]

メニュー内のリンクなどの「リスト(ul)」に適用されるクラスです。
標準：

margin: 0 0 10px 0;

ul.link_body li [タグ]

メニュー内のリンクなどの「リスト(ul)」内のliタグに適用されるスタイルです。
標準：

font: 8pt Tahoma;
list-style-type: none;

div.calendar_month [クラス]

カレンダーの「月」の部分に適用されるクラスです。
標準：

font: 8pt Tahoma;
color: #444;
text-align: center;

table.calendar [クラス]

table型カレンダーのtableタグに適用されるクラスです。
標準：

font: 8pt Tahoma;
color: #888;
text-align: center;
width: 100%;
border-collapse: collapse;

table.calendar td [クラス]

table型カレンダーの日付部分(td)に適用されるクラスです。
標準：

span.calendar_today [クラス]

カレンダー中の日付が表示した当日だった場合に適用されるクラスです。
標準：

text-decoration: underline;

div#foot [ID]

フッタブロックに振られたIDです。
標準：

color: #FFF;
text-align: right;
width: 660px;
clear: both;