2006年04月アーカイブ：スタイルシートメモ

Top ＞ 2006年04月

2006年04月30日

ブロックレベル要素とインライン要素

HTMLの要素には大きくわけて、ブロックレベル要素とインライン要素の2種類があります。

■ブロックレベル要素
文字単位ではなく、ある大きな範囲（ブロック）に大して構造や意味を付加する要素です。
「ブロックレベル要素」に分類されている要素は、一般的には要素の直後で自動的に改行されます。
たとえば、見出しや段落の後には必ず改行されます。

■インライン要素
文字単位で構造や意味を付加する要素です。
「インライン要素」に分類されている要素は、特に要素の直後に改行はされません。
インライン要素は主に、ブロックレベル要素の中に含まれます。
インライン要素の中にインライン要素を含むことは出来ますが、ブロックレベル要素を含むことは出来ません。

■DIV（ブロックレベル要素）とspan（インライン要素）の違い

同じ「くくる」要素、DIV（ブロックレベル要素）でspan（インライン要素）、ブロックレベルとインラインの違いを確認してみましょう。

■DIV（ブロックレベル要素）

DIV（ブロックレベル要素）の場合は、このようにブロックごとの設定が出来ます。

ブロックレベル要素なので、タグが終了すると改行されます。
文字の下に引かれるラインもその一行全てに色がついています。

■span（インライン要素）
ちなみにspan（インライン要素）の場合は、このように文章の特定の設定が出来ます。インライン要素なので、タグが終了しても改行されません。
文字の下に引かれるラインもspanタグで囲ってある場所のみに色がついています。

※主なブロックレベル要素、インライン要素
■ブロックレベル要素

要素名	意味	デザイン
h1	見出し	文字サイズが大きく、太字に。前後に空行ができる
p	段落	前後に空行ができる
ul	リストの範囲	前後に空行ができる
li	リストの項目	文字の前に黒丸を付ける、行末で改行する
hr	区切り	領域を区切るための横罫線を引く
blockquote	引用	前後左右空行ができる
div	汎用ブロック	複数の要素を一まとめにくくる

■インライン要素

要素名	意味	デザイン
strong	強調	太字にする
a	リンク	文字色を青色にし、下線を引く
img	画像	画像を表示する
br	改行	改行する
span	汎用インライン	文章内の特定の箇所をくくる

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 18:42|パーマリンク

2006年04月06日

ページが縦に長いとき

とても長いページ…それだけで読みたくなくなるものですが…それでも1ページ以内で表示しなければいけない時があります。
ただでさえ長いと読みたくなくなるものですから、ユーザーが読みたいところだけを読めるように工夫してあげる必要があります。

■ページ内のカテゴリごとにリンクをはる

ページが縦に長いときは、文章をいくつかのカテゴリにわけ、ページの上部でカテゴリ一覧としてリンクを作るとユーザーが便利です。
たとえば…
例）ホームページ・ブログ　【サイトの作り方・アクセスアップの仕方】インターネット便利帳
このページはページの上部に【コンテンツ】として、ページ内の各場所へリンクを作っています。
上からいちいち見る必要がなくてとても便利です。

●リンク

<a href="#1">1へのリンクです。</a>

●リンクが飛ぶ場所に配置

■ページの内部へページトップへのリンクをおく

例）アフィリエイト(アソシエイト)【ネットで副収入】インターネット便利帳

各コンテンツ（緑のバー）の横に「▲」印があります。
これがページトップへ行くリンクです。

●ページトップへ行くリンク

※ちなみにリンク先を「#」にするとそのページを再読み込みするため、実質そのページのトップへ画面が移動します。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 15:37|パーマリンク

自分がどこにいるかわかる

制作した自分はサイトの構造がわかっていても、ページを見てくれるユーザーがわかってくれるかどうかはわかりません。
ユーザーが探している情報に効率よくアクセスできるようにするためにはナビゲーションが重要になってきます。

わかりやすいナビゲーションを作るには、そのページにアクセスしてきたユーザーが何を必要とするのかを考えます。
ページの階層が深い場合、すぐにトップページに戻れるようトップへのリンクがあると便利です。
大コンテンツと小コンテンツがある場合、大コンテンツに戻ることなく小コンテンツ内を行き来するリンクがあると便利です。
…このように自分がもしこのページを使うとしたら？と考えて書き出してみるといいかもしれません。

■同じ階層のページにアクセスするリンクを作る

※コンテンツ前後のページへのリンクや、カテゴリーメニューなど同じ階層のページにアクセスするリンク

■上位階層に戻るリンクを作る

※トップページやカテゴリトップなど上の階層にアクセスするリンク

■トップページに戻るためのリンクを作る

※トップページに直接アクセスできるリンク
大抵は、ページ左上にあるロゴ画像部分にリンクをはります

トップページに戻る…はロゴにリンクをはっておけばまず間違いはありません。
でも、上位階層や同じ階層のページへのリンクはちょっと頭をひねらないと出てこないかもしれません。
ここで便利なのがパンくずリストです。

トップページ　＞　カテゴリ名　＞　ページ名

このようにトップページからカテゴリ、そして現在のページまでが一度にリンクされます。
それぞれにそれぞれのページへのリンクを張ればユーザーとしてはとても便利です。
このスタイルシートメモも、ページの上部にこのパンくずリストを表示するようにしています。

ついでに、ポイント。
検索エンジンでは、他のページからのリンクが多いページほど、「良いページ」とされ、それが検索結果に影響します。
全てのページにトップページへのリンクをはることで、一応そのページのランクを高くする事が出来ます。
もちろん、リンクはトップページへのリンクでなくても効果はあります。
※絶大な効果があるわけではありませんが(^^ゞ
ロゴのトップページへのリンクとパンくずリスト、両方使う事をオススメします。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 15:20|パーマリンク

2006年04月04日

Movable Type3.2の基本構造

テンプレートのデザインを変えてみようかなぁ…と思った瞬間に、<div id="container">だの<div id="container-inner" class="pkg">だの…入れ子がすごくて、デザインする気が起きなくなる、私のような方に(^^ゞ

少しはデザインを当てる気分になります。

<body>

　　　<h1 id="banner-header">Weblog Name</h1>

　　　<h2 id="banner-description">Weblog Description</h2>

　　</div>

　　　　</div>

　　　　</div>

　　　　</div>

　　　</div>

</body>

正直、これを見ても分からない人は分からないかもしれません。
（１）まず全てを「body」で囲っている
（２）その次に「container」で囲っている
※デザインをつけるために「○○-inner」や「pkg」で囲っている。
（４）「container」のなかに「banner」と「pagebody」がある。
※デザインをつけるために「○○-inner」や「pkg」で囲っている。
（５）「banner」部分にタイトルとして「banner-header」やサイト概要として「banner-description」がおかれている。
（６）「pagebody」部分に「alpha」や「beta」や「delta」や「gamma」などのカラムがおかれている。
※通常のデフォルトの場合は、2カラムなので、「alpha」と「beta」だけ。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 18:46|パーマリンク

index.rdf（RSS1.0）を3.2で書き出すには

「index.rdf」はMovableType3.2では標準では書き出されないみたいです。というわけで、バージョンアップした方の中には今まで「http:○○/index.rdf」としてRSSを配信していた方も多いでしょうから…
「あれ！？なんだかRSSが全然更新されないんだけど？」とか「RSSが消えちゃった！？」なんていう事になってしまうわけです。

というわけで、MovableType3.2に「index.rdf」を追加する方法を紹介します。

（１）テンプレートで新規に「index.rdf」のテンプレートを作成します。
「テンプレートを新規作成」を押して、出力ファイル名を「index.rdf」にします。テンプレート名はわかりやすければそれでいいです。
たとえば、「RSS1.0」とか…

内容には以下の情報をコピーしてペーストしてください。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:cc="http://web.resource.org/cc/"
xmlns="http://purl.org/rss/1.0/">
<channel rdf:about="<$MTBlogURL$>">
<title><$MTBlogName encode_xml="1"$></title>
<link><$MTBlogURL$></link>
<description><$MTBlogDescription encode_xml="1"$></description>
<dc:language><$MTDefaultLanguage$></dc:language>
<dc:creator></dc:creator>
<dc:date><MTEntries lastn="1"><$MTEntryDate format="%Y-%m-%dT%H:%M:%S" language="en"$><$MTBlogTimezone$></MTEntries></dc:date>
<admin:generatorAgent rdf:resource="http://www.movabletype.org/?v=<$MTVersion$>" />
<MTBlogIfCCLicense>
<cc:license rdf:resource="<$MTBlogCCLicenseURL$>" />
</MTBlogIfCCLicense>
<items>
<rdf:Seq><MTEntries lastn="15">
<rdf:li rdf:resource="<$MTEntryPermalink encode_xml="1"$>" />
</MTEntries></rdf:Seq>
</items>
</channel>
<MTEntries lastn="15">
<item rdf:about="<$MTEntryPermalink encode_xml="1"$>">
<title><$MTEntryTitle encode_xml="1"$></title>
<link><$MTEntryPermalink encode_xml="1"$></link>
<description><$MTEntryExcerpt encode_xml="1"$></description>
<dc:subject><$MTEntryCategory encode_xml="1"$></dc:subject>
<dc:creator><$MTEntryAuthor encode_xml="1"$></dc:creator>
<dc:date><$MTEntryDate format="%Y-%m-%dT%H:%M:%S" language="en"$><$MTBlogTimezone$></dc:date>
</item>
</MTEntries>
</rdf:RDF>

（２）メインページ、アーカイブ、エントリー・アーカイブ、カテゴリー・アーカイブ、日付アーカイブ、のヘッダー部分に以下のソースを追加する

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 17:01|パーマリンク

システムのテンプレート

MovableType3.2のテンプレート「システム」の中のテンプレートです。
最初の初期の状態のテンプレートです。
データを初期に戻したいときに、該当するテンプレートのデータをコピーして使用してください。■画像のポップアップ・ウィンドウ

■コメントの一覧

<MTIfCommentsActive>
<a id="comments"></a>
<div class="comments">
<h3 class="comments-header">コメント</h3>
<div class="comments-content">
<MTComments>
<a id="c<$MTCommentID pad="1"$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">
<div class="comment-content">
<$MTCommentBody$>
</div>
<p class="comment-footer">
Posted by:
<$MTCommentAuthorLink default_name="Anonymous"$> <MTCommentAuthorIdentity> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a>
</p>
</div>
</MTComments>
</div>
 <MTEntryIfCommentsOpen> 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 <div class="comments-open">
<h2 class="comments-open-header">コメントを投稿</h2>
<div class="comments-open-content">
<MTIfRegistrationAllowed>
<script type="text/javascript">

</script>
</MTIfRegistrationAllowed>
<MTIfCommentsModerated>
<p class="comments-open-moderated">
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</p>
</MTIfCommentsModerated>
 <div id="comments-open-data">
<MTIfRegistrationNotRequired>
<p>
<label for="comment-author">名前: </label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">メールアドレス: </label>
<input id="comment-email" name="email" size="30" />
</p>
</MTIfRegistrationNotRequired>
<p>
<label for="comment-url">URL: </label>
<input id="comment-url" name="url" size="30" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" value="1" />
この情報を登録しますか?</label>
</p>
</div>
 <p id="comments-open-text">
<label for="comment-text">コメント:  <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="10" cols="30"></textarea>
</p>
</div>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" name="preview" id="comment-preview" accesskey="v" value="&nbsp;確認&nbsp;" />
<input type="submit" name="post" id="comment-post" accesskey="s" value="&nbsp;投稿&nbsp;" />
</div>
</div>
</form>
</MTEntryIfCommentsOpen>
</div>
</MTIfCommentsActive>
</div>
</div>
 <div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
<h2 class="module-header">検索</h2>
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
</div>
 <div class="module-archives module">
<h2 class="module-header">最近のエントリー</h2>
<div class="module-content">
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
</div>
 <div class="module-syndicate module">
<div class="module-content">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>
</div>
 <MTBlogIfCCLicense>
<div class="module-creative-commons module">
<div class="module-content">
<a href="<$MTBlogCCLicenseURL$>"><img alt="クリエイティブ・コモンズ・ライセンス" src="<$MTBlogCCLicenseImage$>" /></a><br />
このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>">クリエイティブ・コモンズ・ライセンス</a>.
</div>
</div>
</MTBlogIfCCLicense>
 <div class="module-powered module">
<div class="module-content">
Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

■ダイナミックページ・エラー

■トラックバックの一覧

<!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" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
 <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
 <title><$MTBlogName encode_html="1"$>: トラックバックの一覧 - <$MTEntryTitle$></title>
 <script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
</head>
<body class="layout-two-column-right">
<div id="container">
<div id="container-inner" class="pkg">
 <div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
 <div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
 <h3>トラックバック: <$MTEntryTitle$></h3>
 <MTIfPingsActive>
<div class="trackbacks">
<a id="trackback"></a>
<h3 class="trackbacks-header">トラックバック</h3>
<div class="trackbacks-info">
<MTIfPingsAccepted>
<p>このエントリーのトラックバックURL: <br /><$MTEntryTrackbackLink$></p>
</MTIfPingsAccepted>
<p>この一覧は、次のエントリーを参照しています:  <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p>
</div>
<div class="trackbacks-content">
<MTPings>
<div class="trackback">
<div class="trackback-content">
<p>
<a id="p<$MTPingID$>"></a>
&raquo; <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[詳しくはこちら]</a>
</p>
</div>
<p class="trackback-footer">
トラックバック時刻: <$MTPingDate$>
</p>
</div>
</MTPings>
</div>
</div>
</MTIfPingsActive>
</div>
</div>
 <div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
<h2 class="module-header">検索</h2>
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="検索" />
</form>
</div>
</div>
 <div class="module-archives module">
<h2 class="module-header">最近のエントリー</h2>
<div class="module-content">
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
</div>
 <div class="module-syndicate module">
<div class="module-content">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>
</div>
 <MTBlogIfCCLicense>
<div class="module-creative-commons module">
<div class="module-content">
<a href="<$MTBlogCCLicenseURL$>"><img alt="クリエイティブ・コモンズ・ライセンス" src="<$MTBlogCCLicenseImage$>" /></a><br />
このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>">クリエイティブ・コモンズ・ライセンス</a>.
</div>
</div>
</MTBlogIfCCLicense>
 <div class="module-powered module">
<div class="module-content">
Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

■コメント・プレビュー

<MTEntryIfCommentsOpen> 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 <div class="comments-open" id="comments-open">

<div class="comments-open-content">
<MTIfCommentsModerated>
<p class="comments-open-moderated">
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</p>
</MTIfCommentsModerated>
 <div id="comments-open-data">
<div id="name-email">
<MTIfRegistrationRequired>
<MTElse>
<p>
<label for="comment-author">名前: </label>
<input id="comment-author" name="author" size="30" value="<$MTCommentPreviewAuthor$>" />
</p>
<p>
<label for="comment-email">メールアドレス: </label>
<input id="comment-email" name="email" size="30" value="<$MTCommentPreviewEmail$>" />
</p>
</MTElse>
</MTIfRegistrationRequired>
</div>
<p>
<label for="comment-url">URL: </label>
<input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
</div>
 <p id="comments-open-text">
<label for="comment-text">コメント:  <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="10" cols="30"><$MTCommentPreviewBody autolink="0" sanitize="0" convert_breaks="0"$></textarea>
</p>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" name="preview" id="comment-preview" accesskey="v" value="確認" />
<input type="submit" name="post" id="comment-post" accesskey="s" value="投稿" />
<input type="button" name="cancel" id="comment-cancel" value="取り消し" onclick="window.location='<$MTEntryPermalink$>'" />
</div>
</div>
</div>
</form>
</MTEntryIfCommentsOpen>

■コメント・保留

<!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" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
 <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
 <title><$MTBlogName encode_html="1"$>: Comment Pending</title>
</head>
<body class="layout-two-column-right">
<div id="container">
<div id="container-inner" class="pkg">
 <div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
 <div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
<h3>コメントを受け付けました。</h3>
<p>コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。</p>
<p><a href="<MTEntryLink>">エントリーのページに戻る</a></p>
</div>
</div>
 <div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
<h2 class="module-header">検索</h2>
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
</div>
 <div class="module-archives module">
<h2 class="module-header">最近のエントリー</h2>
<div class="module-content">
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
</div>
 <div class="module-syndicate module">
<div class="module-content">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>
</div>
 <MTBlogIfCCLicense>
<div class="module-creative-commons module">
<div class="module-content">
<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" /></a><br />
このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>">クリエイティブ・コモンズ・ライセンス</a>.
</div>
</div>
</MTBlogIfCCLicense>
 <div class="module-powered module">
<div class="module-content">
Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

■コメント・エラー

<p>次のエラーでコメントを投稿できませんでした: </p>
 <blockquote><strong><$MTErrorMessage$></strong></blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

※テンプレートのデータをテキストでほしい場合はMovable Type3.2基本テンプレートダウンロード：スタイルシートメモを利用してください。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 15:27|パーマリンク

アーカイブのテンプレート

MovableType3.2のテンプレート「アーカイブ」の中のテンプレートです。
最初の初期の状態のテンプレートです。
データを初期に戻したいときに、該当するテンプレートのデータをコピーして使用してください。■エントリー・アーカイブ

<title><$MTBlogName encode_html="1"$>: <$MTEntryTitle remove_html="1"$></title>
 <link rel="start" href="<$MTBlogURL$>" title="Home" />
<MTEntryPrevious><link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryPrevious>
<MTEntryNext><link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryNext>
 <$MTEntryTrackbackData$>
 <MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
 <script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
</head>
<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">
<div id="container">
<div id="container-inner" class="pkg">
 <div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
 <div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
 <p class="content-nav">
<MTEntryPrevious><a href="<$MTEntryPermalink$>">&laquo; <$MTEntryTitle$></a> |</MTEntryPrevious>
<a href="<$MTBlogURL$>">メイン</a>
<MTEntryNext>| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> &raquo;</a></MTEntryNext>
</p>
 <a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
<div class="entry-body">
<$MTEntryBody$>
</div>
<div id="more" class="entry-more">
<$MTEntryMore$>
</div>
</div>
<p class="entry-footer">
<span class="post-footers">投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
</p>
</div>
 <MTIfPingsActive>
<div class="trackbacks">
<h3 id="trackback" class="trackbacks-header">トラックバック</h3>
<div id="trackbacks-info">
<MTIfPingsAccepted><p>このエントリーのトラックバックURL: <br /><$MTEntryTrackbackLink$></p></MTIfPingsAccepted>
</div>
<div class="trackbacks-content">
<MTPings>
<MTPingsHeader>
<p>この一覧は、次のエントリーを参照しています:  <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p>
</MTPingsHeader>
<a id="p<$MTPingID pad="1"$>"></a>
<div class="trackback" id="ping-<$MTPingID$>">
<div class="trackback-content">
<p>
&raquo; <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[詳しくはこちら]</a>
</p>
</div>
<p class="trackback-footer">
トラックバック時刻:  <a href="#ping-<$MTPingID$>"><$MTPingDate$></a>
</p>
</div>
</MTPings>
</div>
</div>
</MTIfPingsActive>
 <MTIfCommentsActive>
<div id="comments" class="comments">
<div class="comments-content">
<MTComments>
<MTCommentsHeader><h3 class="comments-header">コメント</h3></MTCommentsHeader>
<a id="c<$MTCommentID pad="1"$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">
<div class="comment-content">
<$MTCommentBody$>
</div>
<p class="comment-footer">
投稿者: 
<$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a>
</p>
</div>
</MTComments>
</div>
 <MTEntryIfCommentsOpen> 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />

<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">コメントを投稿</h2>

<MTIfCommentsModerated>
<p class="comments-open-moderated">
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</p>
</MTIfCommentsModerated>
 <div id="comments-open-data">
<div id="name-email">
<p>
<label for="comment-author">名前: </label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">メールアドレス: </label>
<input id="comment-email" name="email" size="30" />
</p>
</div>
 <p>
<label for="comment-url">URL: </label>
<input id="comment-url" name="url" size="30" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
</div>
 <p id="comments-open-text">
<label for="comment-text">コメント:  <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="10" cols="30"></textarea>
</p>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" />
<input type="submit" accesskey="s" name="post" id="comment-post" value="投稿" />
</div>
</div>
</div>
</form>
</MTEntryIfCommentsOpen>
</div>
</MTIfCommentsActive>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

■カテゴリー・アーカイブ

<MTEntries>
<$MTEntryTrackbackData$>
 <MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
<div class="entry-body">
<$MTEntryBody$>
<MTEntryIfExtended>
<p class="entry-more-link">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTEntryIfExtended>
<p class="entry-footer">
<span class="post-footers">投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>
</div>
</div>
</div>
</MTEntries>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

■日付アーカイブ

<p class="content-nav">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&laquo; <$MTArchiveTitle$></a> |</MTArchivePrevious>
<a href="<$MTBlogURL$>">メイン</a>
<MTArchiveNext>| <a href="<$MTArchiveLink$>"><$MTArchiveTitle$> &raquo;</a></MTArchiveNext>
</p>

<MTEntries>
<$MTEntryTrackbackData$>
 <MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
<div class="entry-body">
<$MTEntryBody$>
<MTEntryIfExtended>
<$MTEntryMore$>
</MTEntryIfExtended>
<p class="entry-footer">
<span class="post-footers">投稿者:  <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>
</div>
</div>
</div>
</MTEntries>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

※テンプレートのデータをテキストデータ一括でほしい場合は、Movable Type3.2基本テンプレートダウンロード：スタイルシートメモを利用してください。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 15:25|パーマリンク

インデックスのテンプレート

MovableType3.2のテンプレート「インデックス」の中のテンプレートです。
最初の初期の状態のテンプレートです。
データを初期に戻したいときに、該当するテンプレートのデータをコピーして使用してください。
■Atom

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><$MTBlogName remove_html="1" encode_xml="1"$></title>
<link rel="alternate" type="text/html" href="<$MTBlogURL encode_xml="1"$>" />
<link rel="self" type="application/atom+xml" href="<$MTBlogURL$>atom.xml" />
<id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,<$MTDate format="%Y"$>:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>
<link rel="service.post" type="application/atom+xml" href="<$MTCGIPath$><$MTAtomScript$>/weblog/blog_id=<$MTBlogID$>" title="<$MTBlogName encode_html="1"$>" />
<updated><MTEntries lastn="1"><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></MTEntries></updated>
<MTIfNonEmpty tag="MTBlogDescription"><subtitle><$MTBlogDescription remove_html="1" encode_xml="1"$></subtitle></MTIfNonEmpty>
<generator uri="http://www.sixapart.com/movabletype/">Movable Type  <$MTVersion$></generator>

<MTEntries lastn="15">
<entry>
<title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
<link rel="alternate" type="text/html" href="<$MTEntryPermalink encode_xml="1"$>" />
<link rel="service.edit" type="application/atom+xml" href="<$MTCGIPath$><$MTAtomScript$>/weblog/blog_id=<$MTBlogID$>/entry_id=<$MTEntryID$>" title="<$MTEntryTitle encode_html="1"$>" />
<id><$MTEntryAtomID$></id>

■Dynamic Site Bootstrapper

■JavaScript

// Copyright (c) 1996-1997 Athenia Associates.
// http://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Tomer Shiran.
function setCookie (name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) + (expires ? "; expires=" + expires : "") +
(path ? "; path=" + path : "") + (domain ? "; domain=" + domain : "") + (secure ? "secure" : "");
document.cookie = curCookie;
}
function getCookie (name) {
var prefix = name + '=';
var c = document.cookie;
var nullstring = '';
var cookieStartIndex = c.indexOf(prefix);
if (cookieStartIndex == -1)
return nullstring;
var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
if (cookieEndIndex == -1)
cookieEndIndex = c.length;
return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}
function deleteCookie (name, path, domain) {
if (getCookie(name))
document.cookie = name + "=" + ((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
function fixDate (date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0)
date.setTime(date.getTime() - skew);
}
function rememberMe (f) {
var now = new Date();
fixDate(now);
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
now = now.toGMTString();
if (f.author != undefined)
setCookie('mtcmtauth', f.author.value, now, '/', '', '');
if (f.email != undefined)
setCookie('mtcmtmail', f.email.value, now, '/', '', '');
if (f.url != undefined)
setCookie('mtcmthome', f.url.value, now, '/', '', '');
}
function forgetMe (f) {
deleteCookie('mtcmtmail', '/', '');
deleteCookie('mtcmthome', '/', '');
deleteCookie('mtcmtauth', '/', '');
f.email.value = '';
f.author.value = '';
f.url.value = '';
}
function hideDocumentElement(id) {
var el = document.getElementById(id);
if (el) el.style.display = 'none';
}
function showDocumentElement(id) {
var el = document.getElementById(id);
if (el) el.style.display = 'block';
}
var commenter_name;
function individualArchivesOnLoad(commenter_name) {
<MTIfCommentsAccepted><MTElse>
hideDocumentElement('comments-open');
</MTElse></MTIfCommentsAccepted>
<MTIfPingsAccepted><MTElse>
hideDocumentElement('trackbacks-info');
</MTElse></MTIfPingsAccepted>
<MTIfRegistrationAllowed>
<MTIfRegistrationRequired>
if (commenter_name) {
hideDocumentElement('name-email');
showDocumentElement('comments-open-text');
showDocumentElement('comments-open-footer');
} else {
hideDocumentElement('comments-open-data');
hideDocumentElement('comments-open-text');
hideDocumentElement('comments-open-footer');
}
<MTElse> // comments are allowed but not required
if (commenter_name) {
hideDocumentElement('name-email');
} else {
showDocumentElement('name-email');
}
</MTElse>
</MTIfRegistrationRequired>
</MTIfRegistrationAllowed>
 if (document.comments_form) {
if (document.comments_form.email != undefined &&
(mtcmtmail = getCookie("mtcmtmail")))
document.comments_form.email.value = mtcmtmail;
if (document.comments_form.author != undefined &&
(mtcmtauth = getCookie("mtcmtauth")))
document.comments_form.author.value = mtcmtauth;
if (document.comments_form.url != undefined && 
(mtcmthome = getCookie("mtcmthome")))
document.comments_form.url.value = mtcmthome;
if (mtcmtauth || mtcmthome) {
document.comments_form.bakecookie.checked = true;
} else {
document.comments_form.bakecookie.checked = false;
}
}
}
function writeTypeKeyGreeting(commenter_name, entry_id) {
<MTIfRegistrationAllowed>
if (commenter_name) {
document.write('<p>サインインを受け付けました。 ' + commenter_name +
'さん。コメントしてください。'+
'(<a href="<$MTRemoteSignOutLink static="1"$>&entry_id=' + entry_id + '">サイン・アウト</a>)</p>');
} else {
<MTIfRegistrationRequired>
document.write('<p>サインインしていません。このサイトにコメントをする前に登録してください。 '+
'<a href="<$MTRemoteSignInLink static="1"$>%26entry_id=' + entry_id + '">サインイン</a></p>');
<MTElse>
document.write('<p>TypeKey IDを使って '+
'<a href="<$MTRemoteSignInLink static="1"$>%26entry_id=' + entry_id + '">サインイン</a> '+
'してください。</p>');
</MTElse>
</MTIfRegistrationRequired>
}
</MTIfRegistrationAllowed>
}
<MTIfRegistrationAllowed>
if ('<$MTCGIHost exclude_port="1"$>' != '<$MTBlogHost exclude_port="1"$>') {
document.write('<script src="<$MTCGIPath$><$MTCommentScript$>?__mode=cmtr_name_js"></script>');
} else {
commenter_name = getCookie('commenter_name');
}
</MTIfRegistrationAllowed>

■RSD

■RSS 2.0

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rss version="2.0">
<channel>
<title><$MTBlogName remove_html="1" encode_xml="1"$></title>
<link><$MTBlogURL$></link>
<description><$MTBlogDescription remove_html="1" encode_xml="1"$></description>
<language><$MTBlogLanguage ietf="1"$></language>
<copyright>Copyright <$MTDate format="%Y"$></copyright>
<lastBuildDate><MTEntries lastn="1"><$MTEntryDate format_name="rfc822"$></MTEntries></lastBuildDate>
<generator>http://www.sixapart.com/movabletype/?v=<$MTVersion$></generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs> 
<MTEntries lastn="15">
<item>
<title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
<description><$MTEntryBody encode_xml="1" convert_breaks="0"$></description>
<link><$MTEntryPermalink encode_xml="1"$></link>
<guid><$MTEntryPermalink encode_xml="1"$></guid>
<category><$MTEntryCategory remove_html="1" encode_xml="1"$></category>
<pubDate><$MTEntryDate format_name="rfc822"$></pubDate>
</item>
</MTEntries>
</channel>
</rss>

■RSS1.0

■アーカイブページ

<title><$MTBlogName encode_html="1"$>: アーカイブ</title>

<div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>

<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
<div class="archive-date-based archive">
<h2 class="archive-header">アーカイブ</h2>
<div class="archive-content">
<ul class="archive-list">
<MTArchiveList>
<li class="archive-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>
</div>
</div>
</div>
</div>

<div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
<h2 class="module-header">検索</h2>
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="検索" />
</form>
</div>
</div>
 <MTIfArchiveTypeEnabled type="Category">
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
<MTElse>
<li class="module-list-item"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
</MTIfArchiveTypeEnabled>
 <MTIfArchiveTypeEnabled type="Monthly">
<div class="module-archives module">
<h2 class="module-header">アーカイブ</h2>
<div class="module-content">
<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader>
<ul class="module-list">
</MTArchiveListHeader>
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter>
</ul>
</MTArchiveListFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>

<div class="module-archives module">
<h2 class="module-header">最近のエントリー</h2>
<div class="module-content">
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
</div>

<div class="module-syndicate module">
<div class="module-content">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>
</div>

<MTBlogIfCCLicense>
<div class="module-creative-commons module">
<div class="module-content">
<a href="<$MTBlogCCLicenseURL$>"><img alt="クリエイティブ・コモンズ・ライセンス" src="<$MTBlogCCLicenseImage$>" /></a><br />
このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>">クリエイティブ・コモンズ・ライセンス</a>.
</div>
</div>
</MTBlogIfCCLicense>

<div class="module-powered module">
<div class="module-content">
Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

■スタイルシート

/* Base Weblog (base-weblog.css) */

/* basic elements */

html
{
   margin: 0;
   /* setting border: 0 hoses ie6 win window inner well border */
   padding: 0;
}

body
{
   margin: 0;
   /* setting border: 0 hoses ie5 win window inner well border */
   padding: 0;
   font-family: verdana, 'trebuchet ms', sans-serif;
   font-size: 12px;
}

form, input { margin: 0; padding: 0; }
a { text-decoration: underline; }
a img { border: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote
{
   margin-top: 10px;
   margin-bottom: 10px;
}

/* standard helper classes */

.clr
{
   clear: both;
   overflow: hidden;
   width: 1px;
   height: 1px;
   margin: 0 -1px -1px 0;
   border: 0;
   padding: 0;
   font-size: 0;
   line-height: 0;
}

/* .pkg class wraps enclosing block element around inner floated elements */
.pkg:after
{
   content: " ";
   display: block;
   visibility: hidden;
   clear: both;
   height: 0.1px;
   font-size: 0.1em;
   line-height: 0;
}
* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */

/* page layout */

body { text-align: center; } /* center on ie */

#container
{
   position: relative;
   margin: 0 auto; /* center on everything else */
   width: 720px;
   text-align: left;
}
#container-inner { position: static; width: auto; }

#banner { position: relative; }
#banner-inner { position: static; }

#pagebody { position: relative; width: 100%; }
#pagebody-inner { position: static; width: 100%; }

#alpha, #beta, #gamma, #delta
{
   display: inline; /* ie win bugfix */
   position: relative;
   float: left;
   min-height: 1px;
}

#delta { float: right; }

#alpha-inner, #beta-inner, #gamma-inner, #delta-inner
{
   position: static;
}

/* banner user/photo */

.banner-user
{
   float: left;
   overflow: hidden;
   width: 64px;
   margin: 0 15px 0 0;
   border: 0;
   padding: 0;
   text-align: center;
}

.banner-user-photo
{
   display: block;
   margin: 0 0 2px 0;
   border: 0;
   padding: 0;
   background-position: center center;
   background-repeat: no-repeat;
   text-decoration: none !important;
}

.banner-user-photo img
{
   width: 64px;
   height: auto;
   margin: 0;
   border: 0;
   padding: 0;
}

/* content */

.content-nav
{
   margin: 10px;
   text-align: center;
}

.date-header,
.entry-content
{
   position: static;
   clear: both;
}

.entry,
.trackbacks,
.comments,
.archive
{
   position: static;
   overflow: hidden;
   clear: both;
   width: 100%;
   margin-bottom: 20px;
}

.entry-content,
.trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content,
.comments-closed
{
   clear: both;
   margin: 5px 10px;
}

.entry-excerpt,
.entry-body,
.entry-more-link,
.entry-more
{
   clear: both;
}

.entry-footer,
.trackback-footer,
.comment-footer,
.comments-open-footer,
.archive-content
{
   clear: both;
   margin: 5px 10px 20px 10px;
}

.comments-open label { display: block; }

#comment-author, #comment-email, #comment-url, #comment-text
{
   width: 240px;
}

#comment-bake-cookie
{
   margin-left: 0;
   vertical-align: middle;
}

#comment-post
{
   font-weight: bold;
}

img.image-full { width: 100%; }

.image-thumbnail
{
   float: left;
   width: 115px;
   margin: 0 10px 10px 0;
}

.image-thumbnail img
{
   width: 115px;
   height: 115px;
   margin: 0 0 2px 0;
}

/* modules */

.module
{
   position: relative;
   overflow: hidden;
   width: 100%;
}

.module-content
{
   position: relative;
   margin: 5px 10px 20px 10px;
}

.module-list,
.archive-list
{
   margin: 0;
   padding: 0;
   list-style: none;
}

.module-list-item
{
   margin-top: 5px;
   margin-bottom: 5px;
}

.module-presence img { vertical-align: middle; }
.module-powered .module-content { margin-bottom: 10px; }
.module-photo .module-content { text-align: center; }
.module-wishlist .module-content { text-align: center; }

.module-calendar .module-content table
{
   border-collapse: collapse;
}

.module-calendar .module-content th,
.module-calendar .module-content td
{
   width: 14%;
   text-align: center;
}

.typelist-thumbnailed { margin: 0 0 20px 0; }

.typelist-thumbnailed .module-list-item
{
   display: block;
   clear: both;
   margin: 0;
}

/* positioniseverything.net/easyclearing.html */
.typelist-thumbnailed .module-list-item:after
{
   content: " ";
   display: block;
   visibility: hidden;
   clear: both;
   height: 0.1px;
   font-size: 0.1em;
   line-height: 0;
}
* html .typelist-thumbnailed .module-list-item { display: inline-block; }
/* no ie mac \*/
* html .typelist-thumbnailed .module-list-item { height: 1%; }
.typelist-thumbnailed .module-list-item { display: block; }
/* */

.typelist-thumbnail
{
   float: left;
   min-width: 60px;
   width: 60px;
   /* no ie mac \*/width: auto;/* */
   margin: 0 5px 0 0;
   text-align: center;
   vertical-align: middle;
}

.typelist-thumbnail img { margin: 5px; }

.module-galleries .typelist-thumbnail img { width: 50px; }

.typelist-description
{
   margin: 0;
   padding: 5px;
}

.module-featured-photo .module-content,
.module-photo .module-content
{
   margin: 0;
}

.module-featured-photo img { width: 100%; }

.module-recent-photos { margin: 0 0 15px 0; }
.module-recent-photos .module-content { margin: 0; }
.module-recent-photos .module-list
{
   display: block;
   height: 1%;
   margin: 0;
   border: 0;
   padding: 0;
   list-style: none;
}

/* positioniseverything.net/easyclearing.html */
.module-recent-photos .module-list:after
{
   content: " ";
   display: block;
   visibility: hidden;
   clear: both;
   height: 0.1px;
   font-size: 0.1em;
   line-height: 0;
}
* html .module-recent-photos .module-list { display: inline-block; }
/* no ie mac \*/
* html .module-recent-photos .module-list { height: 1%; }
.module-recent-photos .module-list { display: block; }
/* */

.module-recent-photos .module-list-item
{
   display: block;
   float: left;
   /* ie win fix \*/ height: 1%; /**/
   margin: 0;
   border: 0;
   padding: 0;
}

.module-recent-photos .module-list-item a
{
   display: block;
   margin: 0;
   border: 0;
   padding: 0;
}

.module-recent-photos .module-list-item img
{
   width: 60px;
   height: 60px;
   margin: 0;
   padding: 0;
}

/* mmt calendar */

.module-mmt-calendar { margin-bottom: 15px; }
.module-mmt-calendar .module-content { margin: 0; }
.module-mmt-calendar .module-header { margin: 0; }
.module-mmt-calendar .module-header a { text-decoration: none; }
.module-mmt-calendar table { width: 100%; }

.module-mmt-calendar th { text-align: left; }

.module-mmt-calendar td
{
   width: 14%;
   height: 75px;
   text-align: left;
   vertical-align: top;
}

.day-photo
{
   width: 54px;
   height: 54px;
}

.day-photo a
{
   display: block;
}

.day-photo a img
{
   width: 50px;
   height: 50px;
}

/* Vicksburg (theme-vicksburg.css) */

/* basic page elements */

body
{
   font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
   font-size: 12px;
}

a { color: #36414d; text-decoration: underline; }
a:hover { color: #a3b8cc; }

#banner a { color: #fff; text-decoration: none; }
#banner a:hover { color: #fff; }

.module-content a { color: #36414d; }
.module-content a:hover { color: #a3b8cc; }

h1, h2, h3, h4, h5, h6
{
   font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
}

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header
{
   /* ie win (5, 5.5, 6) bugfix */
   p\osition: relative;
   width: 100%;
   w\idth: auto;

margin: 0;
   border-left: 5px solid #36414d;
   padding: 5px;
   color: #fff;
   background: #a3b8cc;
   font-size: 11px;
   font-weight: bold;
   line-height: 1;
   text-transform: uppercase;
}

.module-header a,
.module-header a:hover,
.trackbacks-header a,
.trackbacks-header a:hover,
.comments-header a,
.comments-header a:hover,
.comments-open-header a,
.comments-open-header a:hover
.archive-header a,
.archive-header a:hover
{
   color: #fff;
}

.entry-more-link,
.entry-footer,
.comment-footer,
.trackback-footer,
.typelist-thumbnailed
{
   font-size: 11px;
}

.commenter-profile img { vertical-align: middle; }

/* page layout */

body
{
   min-width: 720px;
   color: #333;
   background: #36414d;
}

#container
{
   width: 720px;
   margin-bottom: 20px;
   background: #fff;
}

#container-inner
{
   border-width: 0 5px 5px 5px;
   border-style: solid;
   border-color: #292e33;
}

#banner
{
   width: 710px; /* necessary for ie win */
   background: #a3b8cc;
}

#banner-inner
{
   padding: 15px 13px;
   border-width: 2px 2px 0 2px;
   border-style: solid;
   border-color: #fff;
}

.banner-user
{
   width: 70px;
   margin-top: 5px;
   font-size: 10px;
}

.banner-user-photo { border: 1px solid #fff; }

#banner-header
{
   margin: 0;
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   line-height: 1;
   text-shadow: #36414d 0 2px 3px;
}

#banner-description
{
   margin-top: 5px;
   margin-bottom: 0;
   color: #fff;
   background: none;
   font-size: 12px;
   font-weight: bold;
   line-height: 1.125;
   text-shadow: #36414d 0 1px 2px;
}

#alpha { margin: 15px 15px 0 15px; width: 480px; }
#beta { width: 200px; background: #e6ecf2; }
#gamma, #delta { width: 180px; background: #e6ecf2; }

#beta-inner,
#gamma-inner,
#delta-inner
{
   padding: 10px 10px 0 10px;
   border-width: 2px 2px 2px 0;
   border-style: solid;
   border-color: #fff;
}

.date-header
{
   margin-top: 0;
   font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
}

.entry-header
{
   margin-top: 0;
   border-left: 5px solid #dae0e6;
   padding: 0 0 0 10px;
   color: #666;
   font-size: 18px;
}

.entry-content,
.comment-content,
.trackback-content
{
   margin: 0;
   line-height: 1.5;
}

.entry-footer,
.comment-footer,
.trackback-footer
{
   margin: 0 0 20px 0;
   border-top: 1px solid #dae0e6;
   padding-top: 3px;
   color: #666;
   font-size: 10px;
   text-align: right;
}

.comment-content,
.trackback-content,
.comment-footer,
.trackback-footer
{
   margin-left: 10px;
}

.content-nav { margin-top: 0; }

#trackbacks-info
{
   margin: 10px 0;
   border: 1px dashed #a3b8cc;
   padding: 0 10px;
   color: #292e33;
   font-size: 11px;
   text-align: center;
   background: #e6ecf2;
}

.comments-open-footer
{
   margin: 10px 0;
}

/* modules */

.module
{
   margin: 0 0 10px 0;
   border-bottom: 1px solid #f3f6f9;
   background: #dae0e6;
}

.module-content
{
   margin: 0 0 10px 0;
   border-top: 1px solid #cfd4d9;
   padding: 10px 10px 0 10px;
   font-size: 10px;
   line-height: 1.2;
}

.module-search input { font-size: 10px; }
.module-search #search { width: 100px; }

.module-mmt-calendar .module-content table,
.module-calendar .module-content table { font-size: 10px; }

.module-powered { border-width: 0; }
.module-powered .module-content
{
   margin-bottom: 0;
   border: 1px dashed #a3b8cc;
   padding-bottom: 10px;
   color: #292e33;
   background: #fff;
}

.module-photo { background: none; }
.module-photo img { border: solid 1px #fff; }

.module-list
{
   margin: 0 15px 10px 15px;
   list-style: disc;
}

.module-list .module-list
{
   margin: 5px 0 0 0;
   padding-left: 15px;
   list-style: circle;
}

.module-list-item
{
   margin-top: 0;
   color: #666;
   line-height: 1.2;
}

.typelist-thumbnailed .module-list
{
   margin: 0 0 10px 0;
   list-style: none;
}

.typelist-thumbnailed .module-list-item
{
   margin: 1px 0;
   padding: 0;
   background: #f3f6f9;
}

.typelist-thumbnail
{
   background: #fff;
}

.module-photo img { border: 1px solid #fff; }

.module-featured-photo { width: 398px; }
.module-featured-photo .module-content
{
   margin: 0;
   border-width: 0;
   padding: 0;
}
.module-featured-photo img { width: 398px; }

.module-recent-photos .module-content { padding: 10px 0 0 19px; }
.module-recent-photos .module-list { margin: 0; }
.module-recent-photos .module-list-item
{
   width: 64px; /* mac ie fix */
   margin: 0 10px 10px 0;
   padding: 0;
   background: none;
}

.module-recent-photos .module-list-item a
{
   border: #cfd4d9 1px solid;
   padding: 1px;
   background: #fff;
}

.module-recent-photos .module-list-item a:hover
{
   border-color: #36414d;
   background: #fff;
}

/* calendar tweaks */

.layout-calendar #alpha { width: 260px; }
   .layout-calendar #beta { width: 420px; }

.layout-calendar #gamma,
   .layout-calendar #delta
   {
      width: 190px;
   }

.layout-calendar #gamma-inner,
   .layout-calendar #delta-inner
   {
      border: 0;
      padding: 0;
   }

.module-mmt-calendar { width: 398px; }
   .module-mmt-calendar .module-content
   {
      margin: 0;
      border-width: 0;
      padding: 10px;
   }

.module-mmt-calendar table
   {
      width: 378px;
      background: #a3b8cc;
   }

.module-mmt-calendar th
   {
      color: #fff;
      border-top: 1px solid #fff;
      border-right: 1px solid #f3f6f9;
      border-bottom: 1px solid #cfd4d9;
      padding: 2px;
      text-align: right;
      font-weight: bold;
   }

.module-mmt-calendar td
   {
      border-top: 1px solid #fff;
      border-right: 1px solid #f3f6f9;
      border-bottom: 1px solid #cfd4d9;
      padding: 2px;
      text-align: right;
      font-weight: normal;
      background: #e6ecf2;
   }

th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42
   {
      border-right: none;
   }

.module-mmt-calendar td { height: 70px; }

.day-photo
   {
      width: 49px;
      height: 49px;
   }
	
   .day-photo a
   {
      border: #cfd4d9 1px solid;
      padding: 1px;
      background: #fff;
   }

.day-photo a:hover
   {
      border-color: #36414d;
      background: #fff;
   }

.day-photo a img
   {
      width: 45px;
      height: 45px;
   }

/* artistic tweaks */

.layout-artistic #alpha { width: 260px; }
   .layout-artistic #beta { width: 420px; }

.layout-artistic #gamma,
   .layout-artistic #delta
   {
      width: 190px;
   }

.layout-artistic #gamma-inner,
   .layout-artistic #delta-inner
   {
      border: 0;
      padding: 0;
   }

/* moblog1 tweaks */

.layout-moblog1 #alpha
   {
      margin: 0;
      width: 180px;
      background: #e6ecf2;
   }

.layout-moblog1 #alpha-inner
   {
      padding: 10px 10px 0 10px;
      border-width: 2px 0 2px 2px;
      border-style: solid;
      border-color: #fff;
   }

.layout-moblog1 #beta
   {
      margin: 15px 15px 0 15px;
      width: 320px;
      background: none;
   }

.layout-moblog1 #beta-inner
   {
      padding: 0;
      border-width: 0;
   }

.layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; }

/* moblog2 tweaks */

.layout-moblog2 #alpha
   {
      margin: 0;
      width: 86px;
      background: #e6ecf2;
   }

.layout-moblog2 #alpha-inner
   {
      padding: 10px 10px 0 10px;
      border-width: 2px 0 2px 2px;
      border-style: solid;
      border-color: #fff;
   }

.layout-moblog2 #beta
   {
      margin: 15px 15px 0 15px;
      width: 260px;
      background: none;
   }

.layout-moblog2 #beta-inner
   {
      padding: 0;
      border-width: 0;
   }

.layout-moblog2 #delta
   {
      width: 154px;
   }

.layout-moblog2 .module-recent-photos
   {
      border: 0;
      background: none;
   }

.layout-moblog2 .module-recent-photos .module-content
   {
      padding: 0;
      border: 0;
   }

.layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; }

/* timeline tweaks */

.layout-timeline #alpha { width: 260px; }
   .layout-timeline #beta { width: 420px; }

.layout-timeline #gamma,
   .layout-timeline #delta
   {
      width: 190px;
   }

.layout-timeline #gamma-inner,
   .layout-timeline #delta-inner
   {
      border: 0;
      padding: 0;
   }

/* one-column tweaks */

.layout-one-column body { min-width: 520px; }
   .layout-one-column #container { width: 520px; }
   .layout-one-column #banner { width: 510px; } /* necessary for ie win */

/* two-column-left tweaks */

.layout-two-column-left #alpha
   {
      margin: 0;
      width: 200px;
      background: #e6ecf2;
   }

.layout-two-column-left #alpha-inner
   {
      padding: 10px 10px 0 10px;
      border-width: 2px 0 2px 2px;
      border-style: solid;
      border-color: #fff;
   }

.layout-two-column-left #beta
   {
      margin: 15px 15px 0 15px;
      width: 480px;
      background: none;
   }

.layout-two-column-left #beta-inner
   {
      padding: 0;
      border-width: 0;
   }

/* three-column tweaks */

.layout-three-column #alpha
   {
      margin: 0;
      width: 180px;
      background: #e6ecf2;
   }

.layout-three-column #alpha-inner
   {
      padding: 10px 10px 0 10px;
      border-width: 2px 0 2px 2px;
      border-style: solid;
      border-color: #fff;
   }

.layout-three-column #beta
   {
      margin: 15px 15px 0 15px;
      width: 320px;
      background: none;
   }

.layout-three-column #beta-inner
   {
      padding: 0;
      border-width: 0;
   }

■メインページ

<MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
<div class="entry-body">
<$MTEntryBody$>
<MTEntryIfExtended>
<p class="entry-more-link">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTEntryIfExtended>
<p class="entry-footer">
<span class="post-footers">投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>
</div>
</div>
</div>
</MTEntries>
</div>
</div>

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
<MTElse>
<li class="module-list-item"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
</MTIfArchiveTypeEnabled>

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
<h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>
<div class="module-content">
<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 15:11|パーマリンク

Movable Type3.2基本テンプレート

MovableTypeの前バージョンのテンプレートは、シックスアパートで手に入る（Movable Type: デフォルト・テンプレート：スタイルシートメモ）のですが、なぜか3.2のデフォルトテンプレートは公開されていません。
なんだかプラグインかなにかで初期が出来るかららしいですが…
個人的にココだけ直したいとか、ココはデフォルトではどうなっていたっけ？なんて思う事が多いので、
デフォルトテンプレートを保存しておきました。
同じようにデフォルトテンプレートがほしい！とか思う方は使ってみてくださいな。

配布物の内容について

■内容

インデックス: 通常の8枚にプラスして、index.rdfを書き出すRSS01のテンプレートも入ってます。
アーカイブ: 3点はいってます
システム: 正直私は使ってませんが(^^ゞ7点入っています。

※テキストデータが入っているので、その中味をまるごと該当のテンプレートに上書きすると、あっという間にそのテンプレートだけ初期化されます。

ダウンロードする
▼Movable Type3.2基本テンプレート全種類をダウンロード

※テンプレートダウンロードが面倒くさい方は各テンプレートをこのブログ上で公開しているのでそちらを利用してください。
すぐコピペしたい方はこっちのほうが便利かも↓

■テンプレート「インデックス」」
インデックスのテンプレート：スタイルシートメモ
■テンプレート「アーカイブ」
アーカイブのテンプレート：スタイルシートメモ
■テンプレート「システム」
システムのテンプレート：スタイルシートメモ

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 15:01|パーマリンク

プルダウンメニューの作成

大きいメニューがあって、そのメニューの上にカーソルを重ねると、小さいメニューが下に表示される…そんなプルダウンメニューを作成します。
メニューがあってさらに細かいメニューがあって…そういうナビゲーションを横に並べたい場合など、特に便利です。
縦のメニューでも、サブメニューを一覧で見せたいときは、結構便利ですよ。
ちなみに、このページではわかりやすいように大きいメニューは「メインメニュー」、その下に表示される小さいメニューは「サブメニュー」と書きます。

横のメニューの作り方です。
基本的にpositionで場所を設定しているので、可変式のページ設定の場合、使えない場合があります。

<a herf="01.html" class="naviheader">メニューの大タイトル</a>

</div>

<a herf="02.html" class="naviheader">メニューの大タイトル</a>

</div>

.navi a{
display:block;
width:120px;
height:30px;
float:left;
}

.navi{
position:relative;
top:0;
left:0;
}

#navi01{
position:absolute;
top:0;
left:0;
}

#navi02{
position:absolute;
left:121px;
top:0;
}

.subnavi a{
background-color:#FF0;
}

.subnavi{
visibility:hidden;
}

■「.navi a」で、簡単に説明しますとaをブロック要素に変更し、大きさを設定しています。
ブロック要素…などの設定の詳細については、リンクでボタンを作成する：スタイルシートメモが同じ内容なので、そちらで確認してください。
■「.navi」「#navi01」のpositionの設定
メニュー部分をそろえて表示するために「position:absolute」で表示位置を指定します。
バーの部分は「position:relative」を設定します。
※relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
■メニューの表示位置の調節
このサンプルの場合、メニューひとつの幅は120pxという設定です。
メニューを横に並べて配置していくので、「#navi02」の左位置は、「#navi01」の長さ+1pxの分になります。
※1px増やしているのはメニューとメニューの間に隙間を付けたいからです。
隙間が要らない場合は、120pxでＯＫです。
■「.subnavi a」でサブメニューの色を変えたい場合は設定します。
■「.subnavi」を消す
通常状態でサブメニューが開いているのは、使い勝手が悪いので、通常状態はサブメニューを消すように「visibility:hidden;」を指定します。

HTMLとスタイルシートの設定は以上です。
好みによってテキストの色を変えたり、テキストの大きさを変えたり、細かい設定を行ってください。

後は、スクリプトを使ってプルダウンメニューの動作を設定します。
このスクリプトを使うことによって、メインメニューにカーソルを重ねることで、サブメニューを表示させることができます。

headerに設定してください。
<script type="text/javascript">

<!--

function MenuOn(X){

obj=document.getElementByld("subnavi"+x).style.visibility="visible";

}

// -->

</script>

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 00:14|パーマリンク

2006年04月03日

画像リンクでボタンを作成

スタイルシートの色やボーダーの設定だけではどうしても淡白だ…そう思ったときは画像のボタンを作る事になると思います。
背景部分は画像、文字部分はテキストのボタンについて説明します。

まずは、通常時のボタン背景とカーソルが重ねられたときの背景を作ります。
※必ず同じ大きさで作ってください。

A B C

</p>

p.navi a{
display:block;
width:100px;
height:30px;
float:left;
background-image:url(○○.gif);
background-repeat:no-repeat;
}

p.navi a:hover{
background-image:url(○○2.gif);
}

■p.navi aの設定について
「background-image:url(○○.gif);」で画像の設定を、「background-repeat」で画像がリピートされないように設定しています。
「height」でボタンの高さを指定しています（line-heightだと高さが変化するので注意）
※他の項目については、リンクでボタンを作成する：スタイルシートメモを参照してください。
■p.navi a:hoverの設定について
変更する背景画像を指定します。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 19:24|パーマリンク

リンクでボタンを作成する

画像を使わずテキストだけでボタンを作成する方法です。
各リンクを四角いボタンとしてデザインし、カーソルを重ねたときに色を変えるようにすると、まるでボタンのように見えます。

Aのリンク Bのリンク

<a href="a.html">Aのリンク</a>

<a href="b.html">Bのリンク</a>

</p>

p.navi{
height:2em
}
p.navi a{
background-color:#FF0;
display:block;
width:10em;
float:left;
line-height:2em;
margin:2px;
text-align:center;
text-decoration:none;
}

■p.naviの設定について
「background-color」でボタンの下地の色を決めます。もし、下地の色で文字が読みにくくなったら「color」で文字色を設定してください。
「height」でバーの高さを指定します。値にはボタンの高さと同じ高さを指定します。
■p.navi aの設定について
ボタンの大きさを調整するためには、インライン要素である「a」が、ブロック要素である必要があります。「display:block;」を設定することで、「width」や「height」というボタンの大きさを設定することができるようになります。
「float:left;」とすることで、ボタンを横並びにできます。縦ならびにボタンを作る場合は必要ありません。
「line-height」でボタンの高さを指定しています。「height」で高さを指定しようとすると、文字が上部に配置されてしまったりします。
「text-decoration:none;」で余計な下線を削除します。

ちなみに、「p.navi a」の他のA要素、「p.navi a:hover」などの「background-color」や「color」を変更すると、カーソルを重ねたときに色が変わり、ボタンの色が変わったようなイメージになります。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 00:39|パーマリンク

リンクの下線のデザイン

リンクの下には、基本的に下線がひかれます。
この下線があることで、「ここはリンクだな…」とわかるのでむやみやたらに下線を消すことはよくないことなのですが…たとえば、テキストのボタンなどを作るときにはどうしても下線が邪魔になります。
そのときは下線を消してしまいましょう。

該当する「a」タグに以下の指定をしてください。

a{
text-decoration:none;
}

ちなみに、「none」の部分を変更する場合

underline
テキストに下線が付きます。

overline
テキストに上線が付きます。

line-through
テキストに打ち消し線が付きます。

blink
テキストが点滅します。

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 00:24|パーマリンク

2006年04月02日

背景に画像を表示する

背景画像を使って、ページをレイアウトすることで、ページ自体がゴージャスになったりします。
この背景画像をスタイルシートで設定することで、すぐに画像を表示・非表示できたり修正することができるので便利です。

背景を設定する上で一番重要なのは、上に乗っている文字が読めること。
背景が暗い場合は明るい文字を、背景が明るい場合は暗い文字を使用するのが基本です。

haikei{

background-color:#FF0;

background-image:url(○○.jpg);

background-repeat:no-repeat;

}

一度に設定することも出来ます。

haikei{

background:#FF0 url(○○.jpg) no-repeat;

}

「no-repeat」は画像を繰り返さない、ということです。
例えば横に連続させたい場合は「x-repeat」縦に連続させたい場合は「y-repeat」にします。

便利なソフトとして、富士通アクセシビリティ・アシスタンス - FUJITSU Japanがあります。
このColorSelectorは無料で配布されているものなのですが、アクセシビリティの高い背景色と文字色の組み合わせをリアルタイムに確認することが可能な、クリエイターの為の強力な支援ツールです。
でもWindowsXPのみ対応です(^。^;)

« 2006年03月 | メイン | 2006年05月 »

投稿者: akasa 日時: 20:52|パーマリンク

スタイルシートメモ

ブロックレベル要素とインライン要素

ページが縦に長いとき

自分がどこにいるかわかる

Movable Type3.2の基本構造

index.rdf（RSS1.0）を3.2で書き出すには

システムのテンプレート

アーカイブのテンプレート

インデックスのテンプレート

Movable Type3.2基本テンプレート

プルダウンメニューの作成

画像リンクでボタンを作成

リンクでボタンを作成する

リンクの下線のデザイン

背景に画像を表示する

人気スタイルシート本