「Movable Type WEBデザインの新しいルール」

このサイトは「Movable Type WEBデザインの新しいルール」のサポートサイトです。

Movable Type WEBデザインの新しいルール 荒木 勇次郎 松永 英明 翔泳社 2007-10-17 Amazonで詳しく見る by G-Tools

サイドバーの表示をメインページと同じ内容にする方法を紹介します。

なお、アーカイブページの仕様により、ここで示すカスタマイズではメインページと全く同じ表示にはなりません。理由は下記の記事を参考にしてください。

アーカイブページのリストの表示内容が異なる理由

１．右サイドバー

右サイドバーの「Tag Clouds」「Categories」「Monthly Archives」を各アーカイブページに表示する方法です。

「サイドバー」テンプレートモジュールの編集画面を開き、下記に示す赤色部分を削除してください。

<div id="links-right-box">
<dl id="links-right">
 
<dt class="sidetitle">
Search this site
</dt>
 
<dd class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<fieldset>
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<input id="search" tabindex="8"  accesskey="t" name="search" size="20" value="" />
<input type="submit" tabindex="9" accesskey="s" value="Search" />
</fieldset>
</form>
</dd>
 
<MTIf name="main_index">
<dt class="sidetitle">
Tag Clouds
</dt>
 
<dd class="side">
<ul id="tags">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</dd>
</MTIf>
 
<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<dt class="sidetitle">
Links
</dt>
 
<dd class="side">
<ul>
<li>ここにリンクを記述</li>
</ul>
</dd>
 
<dt class="sidetitle">
Counter
</dt>
<dd class="counter">
ここにカウンタを設置
</dd>
 
<dd class="syndicate">
<a href="<$MTLink template="rss"$>">Syndicate this site (XML)</a>
</dd>
 
<MTBlogIfCCLicense>
<dd class="syndicate">
<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" style="border:none" src="<$MTBlogCCLicenseImage$>" /></a><br />
This weblog is licensed under a <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</dd>
</MTBlogIfCCLicense>
 
<dd class="powered">
<ul>
<li class="module-powered"><a href="http://www.movabletype.org/"><img src="<$MTStaticWebPath$>images/mt4-bug-pbmt-white.png" alt="Powered by Movable Type <$MTVersion$>" width="120" height="75" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="<$MTStaticWebPath$>plugins/KoikikukanTemplateSet/images/koikikukan.gif" alt="小粋空間" width="128" height="22" /></a></li>
</ul>
</dd>
 
</dl>
</div>

ここで、削除する MTIf タグの説明を簡単にしておきます。

MTIf というタグは、nameモディファイアに記述された変数の値が1の場合に、MTIf タグのブロック内を実行するためのテンプレートタグです。例えば、

<MTIf name="main_index">
...中略
</MTIf>

は、変数 main_index の値が1のときにブロック内を実行します。本テンプレートで変数 main_index に 1 を設定している場所は、メインページインデックステンプレートの 1 行目にある次の部分だけです。

<MTSetVar name="main_index" value="1">

MTSetVar タグは変数に値を設定するテンプレートタグです。name モディファイアに変数名、value モディファイアに値を設定します。

これにより、

<MTIf name="main_index">
...中略
</MTIf>

で括った部分はメインページでしか表示されないようになっています。

本書はバージョン 4.0 時点での執筆ですので、この変数の仕組みはバージョン 4.1 や 4.2 ではMovable Typeに予め登録されている変数があります。

予約変数一覧 for Movable Type 4.2

２．左サイドバー

左サイドバーの「Recent Entries」を各アーカイブページに表示する方法です。

「サイドバー2」テンプレートモジュールの編集画面を開き、下記に示す赤色部分を削除してください。

<div id="links-left-box">
<dl id="links-left">
 
<MTIfArchiveTypeEnabled archive_type="Daily">
<dd class="side" id="calendar">
<table summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<thead>
<tr>
<th abbr="Sunday"><span class="sunday">Sun</span></th>
<th abbr="Monday"><span class="weekday">Mon</span></th>
<th abbr="Tuesday"><span class="weekday">Tue</span></th>
<th abbr="Wednesday"><span class="weekday">Wed</span></th>
<th abbr="Thursday"><span class="weekday">Thu</span></th>
<th abbr="Friday"><span class="weekday">Fri</span></th>
<th abbr="Saturday"><span class="saturday">Sat</span></th>
</tr>
</thead>
<tbody>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfToday> class="today"</MTCalendarIfToday>><MTCalendarIfBlank><MTElse><span class="day"></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</tbody>
</table>
</dd>
</MTIfArchiveTypeEnabled>
 
<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
 
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>
 
<dt class="sidetitle">
Recent Comments
</dt>
 
<MTIfNonZero tag="BlogCommentCount">
<dd class="side">
<ul>
<MTEntries lastn="20" recently_commented_on="3">
  <li><a href="<$MTEntryLink$>"><MTEntryTitle></a>
    <ul>
    <MTComments lastn="2">
      <li>
        └ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
          <MTCommentAuthor default="Anonymous">
        </a> <$MTCommentDate format="%m/%d"$>
      </li>
    </MTComments>
    </ul>
  </li>
</MTEntries>
</ul>
</dd>
</MTIfNonZero>
 
<dt class="sidetitle">
Recent Trackbacks
</dt>
 
<MTIfNonZero tag="BlogPingCount">
<dd class="side">
<ul>
<MTPings lastn="10">
  <li><MTPingEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTPingEntry>
    <ul>
      <li>
        └ <a href="<$MTPingURL$>" title="p<$MTPingID$>">
          <$MTPingBlogName$>
        </a> <$MTPingDate format="%m/%d"$>
      </li>
    </ul>
  </li>
</MTPings>
</ul>
</dd>
</MTIfNonZero>
 
</dl>
</div>

5-2「パンくずリストを表示する」で、検索結果ページにパンくずリストを表示する方法を紹介します。

「検索結果」システムテンプレートの編集画面を開き、下記の青色部分の内容を追加してください。

...前略...
<div id="content">
<div class="blog">
 
<p class="breadcrumbs">
<a href="<$MTBlogURL$>">ホーム</a> &#65310; <$MTSearchString$>の検索結果
</p>
 
<MTIfStraightSearch>
<h2 class="date">このブログを検索</h2>
...後略...

Movable Type 4.1x/4.2x 用のテンプレートセット（書籍対応版）の配布を開始します。注：Movable Type 4.0/4.01 ではご利用になれません。ご利用になる際は 4.1x/4.2x の新規インストールか、4.1x/4.2x へのバージョンアップを行ってください。

Movable Type 4.1x/4.2x 用のテンプレートセットは、下記のリンクからダウンロードできます。

KoikikukanTemplateSet_20081224_2.zip

修正履歴

2008.12.24 一部のテンプレート名が英語表記だった不具合を修正しました。
2008.12.24 一部のテンプレートで再構築エラーになる不具合を修正しました。

設定方法については、下記の記事を参照してください。

テンプレートセットの配布を開始しました

コメントプレビューや検索結果ページのカラムレイアウトを1カラムから2カラム、または1カラムから3カラムに変更するには、次の作業を行ってください。

１．コメントプレビュー・検索結果画面を1カラムから2カラムに変更する

コメントプレビュー画面を1カラムから2カラムにする方法です。検索結果画面も同じ手順で修正してください。

ブログ管理画面より「デザイン」→「テンプレート」→「システムテンプレート」→「コメントプレビュー」をクリック。

「コメントプレビュー」テンプレート編集画面の1行目を次のように変更してください。これはCSSでカラムレイアウトを2カラム（右サイドバー）に変更するための、該当するclass属性値の変更です。

変更前

<MTSetVar name="page_layout" value="layout-one-column">
...後略...

変更後

<MTSetVar name="page_layout" value="layout-two-column-right">
...後略...

変更後のテンプレート編集画面画面です。

また、同じテンプレート編集画面の、「フッター」テンプレートモジュールをインクルードする直前に、サイドバーをインクルードするためのテンプレートタグを追加してください。

変更前

...前略...
</div>
</div>
 
<$MTInclude module="フッター"$>

変更後

...前略...
</div>
</div>
 
<$MTInclude module="サイドバー"$>
<$MTInclude module="フッター"$>

変更後のテンプレート編集画面画面です。

２．コメントプレビュー・検索結果画面を1カラムから3カラムに変更する

コメントプレビュー画面を1カラムから3カラムにする方法です。検索結果画面も同じ手順で修正してください。

ブログ管理画面より「デザイン」→「テンプレート」→「システムテンプレート」→「コメントプレビュー」をクリックし、「コメントプレビュー」テンプレート編集画面の1行目を次のように変更してください。これはCSSでカラムレイアウトを3カラムにするための、該当するclass属性値の変更です。

変更前

<MTSetVar name="page_layout" value="layout-one-column">
...後略...

変更後

<MTSetVar name="page_layout" value="layout-three-column">
...後略...

変更後のテンプレート編集画面画面です。

また、同じテンプレート編集画面の、「ヘッダー」テンプレートモジュールをインクルードする直後と、「フッター」テンプレートモジュールをインクルードする直前に、「サイドバー2」テンプレートモジュールおよび「サイドバー」テンプレートモジュールをインクルードするためのテンプレートタグを追加してください。

変更前

...前略...
<$MTInclude module="ヘッダー"$>
 
<div id="content">
<div class="blog">
...中略...
</div>
</div>
 
<$MTInclude module="フッター"$>

変更後

...前略...
<$MTInclude module="ヘッダー"$>
<$MTInclude module="サイドバー2"$>
<div id="content">
<div class="blog">
...中略...
</div>
</div>
 
<$MTInclude module="サイドバー"$>
<$MTInclude module="フッター"$>

変更後のテンプレート編集画面画面です。

Movable Type 4.1 用のテンプレートセット（書籍対応版）の配布を開始します。注：Movable Type 4.0/4.01 ではご利用になれません。ご利用になる際は 4.1、または 4.1 へのバージョンアップを行ってください。

Movable Type 4.1 で書籍のカスタマイズを行う場合、MT4.1 で追加されたテンプレートセット機能を用いれば、「3-4：テンプレートを入れ替えてデザインを変更する」の手順1～14が不要（テンプレートセットを入れ替えた後の再構築のみ必要）になります。

テンプレートセットをご利用になる場合、以下の手順にしたがって作業を進めてください。

１．テンプレートセットのダウンロード

テンプレートセットアーカイブを、下記のページからダウンロードしてください。

KoikikukanTemplateSet_20080221.zip

以下、テンプレートセットの利用方法です。

２．テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

３．テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット（書籍用）」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

Movable Type 4.1 で「3-11・カラムレイアウトを変更する」を行う場合、手順1の内容を下記のように変更してください。
なお、手順1の上段のリストは「template_4_0_utf8_1_8」をもとにしています。お使いのテンプレートのテンプレートモジュール「ヘッダー」のbody要素の部分が上段の内容になっていない場合は、サポートサイトで配布している「小粋空間テンプレート」より、[Modules] header.mtml の内容をご利用ください。

手順1の上段のリスト（赤色が変更前の内容）

<MTUnless name="system_template"><MTSetVar name="page_layout" value="layout-three-column"></MTUnless>
<body class="<$MTGetVar name="page_layout"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

手順1の下段のリスト（青色が変更後の内容）

<MTUnless name="system_template"><MTSetVar name="page_layout" value="layout-two-column-right"></MTUnless>
<body class="<$MTGetVar name="page_layout"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

Movable Type 4.01 をお使いになっている場合、この変更は必要ありませんが、Movable Type 4.1 にアップグレードした後は、「テンプレート」→「テンプレートモジュール」→「ヘッダー」の下記の部分を変更してください。

変更前（赤色が削除部分）

<body class="<$MTGetVar name="page_layout" default="layout-three-column"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

変更後（青色が追加部分）

<MTUnless name="system_template"><MTSetVar name="page_layout" value="layout-three-column"></MTUnless>
<body class="<$MTGetVar name="page_layout"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

これはMT4.1でMTGetVarタグで使っている変数page_layoutの動作が変わったため、4.0用のテンプレートではカラムレイアウトが崩れてしまう不具合に対応するためのものです。

具体的な変更内容は、head要素の直前にMTUnlessタグを追加して、body要素にあるdefault属性を削除しています。MTUnlessタグに記述した変数page_layoutが、default属性に設定したときと同じように動作します。

3-4「テンプレートを入れ替えてデザインを変更する」の手順13あたりで、下記のようなエラーが発生する場合の対処方法です。

原因

原因は、テンプレートモジュールに「サイドバー（またはサイドバー2）」というテンプレートモジュールを作っていない状態で「保存と再構築」を実行、または再構築画面から再構築を実行したためです。

注：このエラーが発生することを予想して、手順13の説明でその解説を行っています。

具体的に解説すると、メインページテンプレートや他のアーカイブページのテンプレートには、

<$MTInclude module="サイドバー"$>

または

<$MTInclude module="サイドバー2"$>

という、テンプレートモジュールを呼び出すためのタグが書かれています。再構築実行時、Movable Type のプログラムはこのタグを読み込み、「サイドバー（サイドバー2）というテンプレートモジュールを呼び出す」という動作を行うのですが、テンプレートモジュールの一覧には「サイドバー（またはサイドバー2）」というテンプレートモジュールがありません（下）。

そのため、Movable Type では再構築を続行することができず、エラーを出力するのです。

対処方法

テンプレートモジュール「サイドバー」「サイドバー2」を作成すれば、再構築のエラーは発生しなくなります。
以下、「サイドバー」「サイドバー2」の作成方法です。

注意：この方法では、P107・手順14に記載している手順とは異なる、より分かりやすい手順を示しており、「サイドバー(2カラム)」「サイドバー(3カラム)」はデフォルトのまま、何も手を加える必要はありません。

テンプレートモジュール「サイドバー」の作成

メインページのテンプレート編集画面右の「インクルードモジュール」の一覧にある「サイドバー(新規作成)」の 新規作成 のリンク（赤枠部分）をクリックします。

クリックすると、「サイドバー」の新規作成画面に遷移します（下）。

表示された作成画面の「テンプレート名」のフィールド（「テンプレートを作成」という表示の下のフィールド）には「サイドバー」というテンプレート名が自動的に入ってますので、あとはテキストエリアにテンプレートの内容（sidebar.mtml）をペーストして（下）、「保存」をクリックしてください。

これでテンプレートモジュール「サイドバー」が作成されました。

テンプレートモジュール「サイドバー2」の作成

上記と同じ要領で、メインページのテンプレート編集画面右の「インクルードモジュール」の一覧にある「サイドバー2(新規作成)」の 新規作成 のリンク（赤枠部分）をクリックします。

クリックすると、「サイドバー2」の新規作成画面に遷移します（下）。

表示された作成画面の「テンプレート名」のフィールド（「テンプレートを作成」という表示の下のフィールド）には「サイドバー2」というテンプレート名が自動的に入ってますので、あとはテキストエリアにテンプレートの内容（sidebar2.mtml）をペーストして（下）、「保存」をクリックしてください。

これでテンプレートモジュール「サイドバー2」が作成されました。

以上です。これでメインページを再構築をしてもエラーが発生しなくなります。

なお、テンプレートモジュールへの一覧には以下のように「サイドバー」「サイドバー2」が追加されます。

現在配布中の小粋空間テンプレートに一部不具合がありましたのでお知らせ致します。

１．問題点

投稿者情報を保存しても、クッキーに保存されず、次回投稿時に投稿者情報が反映されない。

２．原因

コメント投稿フォームの form 要素の name 属性もれ。

３．対処方法

2007年12月5日以前にテンプレートをダウンロードされた方は、下記のいずれかの方法で修正を行ってください。

３．１ テンプレートを直接修正する

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、下記の青色部分（name 属性）を追加してください。

修正前

　　　　：
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
　　　　：

修正後

　　　　：
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
　　　　：

修正後、「ブログ記事」を再構築してください。

３．２ テンプレートを入れ替える

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、本サポートブログの「小粋空間テンプレート」の [Modules]comment_form.mtml の内容と入れ替えてください。

または、「Movable Type テンプレート」より template_4_0_utf8_1_7.zip（または template_4_0_utf8_1_7.lzh）またはそれ以降のバージョンのアーカイブをダウンロードし、解凍した中にある、comment_form.mtml のみ入れ替えてください。

テンプレートをカスタマイズしている場合は、３．１の方法で修正されることをお勧めします。

以上です。
ご利用の皆様にはご迷惑おかけして申し訳ございませんが、よろしくお願い致します。

P114～P115 の「3-6：テンプレート・タグのカスタマイズ」を行うと、カテゴリーアーカイブでブログ記事が1件しか表示されなくなるという不具合がみつかりました。

理由は、ブログ記事表示件数（ブログ管理画面の「設定」→「ブログの設定」→「ブログ記事」→「ブログ記事表示数」）の設定が、カテゴリーアーカイブにも適用される設定になっているためです。

カテゴリーアーカイブで全てのブログ記事を表示するには、「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を開き、中ほどにある、

<MTEntries limit="auto">

にある limit 属性を削除し、

<MTEntries>

とするか、lastn 属性を付与し、

<MTEntries lastn="5">

としてください。テンプレート変更後、再構築を行えば完了です。

解説ですが、limit 属性の "auto" という値は、ブログ設定画面の「ブログ記事表示数」を適用することを意味します。
lastn 属性は「最新のn件を表示する」という意味です（上記の例では最新5件を表示）。
属性がない場合は、該当するブログ記事をすべて表示します。

3-10「背景画像を利用する」の手順2で、ヘッダにロゴつきの背景画像を与えています。この画像にトップページへのリンクを設定する方法を紹介します。

書籍に掲載している方法では画像にリンクを設定できないため、img 要素をテンプレートモジュール「ヘッダー」に設定します。またそれにあわせて、スタイルシートも設定します。
手順2を行わず、その代わりに以下の2つのタイプのうち、いずれかの設定を行ってください。

１．シンプルタイプ

ヘッダー（抜粋）

<div id="header"> <a href="<$MTBlogURL$>" accesskey="1"><img src="<$MTBlogURL$>images/logo.png" alt="ロゴ" title="xxxのトップページへ" /></a> </div>

スタイルシート（メイン）

/* ヘッダ */ #header { border-bottom: 1px solid #bed5b4; height: 120px; width: 800px; overflow: hidden; /* 表示領域を超えた画像を非表示にする */ }

この方法は簡単ですが、h1 要素が存在しないので、SEO的には不利かもしれません。

２．SEOを考慮したタイプ

こちらは h1 属性も含んでいます。ただし、画像サイズがヘッダ表示領域と一致している必要があります。
サンプルサイトのヘッダー表示領域（800px × 120px）に合わせた画像ファイル（logo_800x120.png）を用意しましたので、ダウンロードしてお使いください（ファイル名は ダウンロード後、logo.png に修正してください）。

logo_800x120.png

ヘッダー（抜粋）

<div id="header"> <div><p><a href="<$MTBlogURL$>" accesskey="1"><img src="<$MTBlogURL$>images/logo.png" alt="ロゴ" title="xxxのトップページへ" /></a></p></div> <h1 id="blog-name">First Weblog</h1> </div>

スタイルシート（メイン）

/* ヘッダ */ #header div { position: relative; } #header div p { position: absolute; top: 0; left: 0; }

３．注意事項

• img 要素の alt 属性（画像が表示されない場合の代替テキスト）は必須です。
• img 要素の title 属性を記述しておけばヘッダにマウスをポイントした時にツールチップが表示されます。

それではよろしくお願い致します。