前のエントリー
MAQUEテンプレートカスタマイズ Aboutのページをつくる（1）
前のエントリーで、テンプレートの構造は理解できました。次は実際にソースを書き換えていきます。行数の表示されるテキストエディタで元になるRecent Reactionのテンプレートを開いて、変更する行を挙げていきます。
1～3行目の宣言文はそのままで良いと思います。4行目からのhead内に変更点がいくつか。
まずは12行目のmeta要素、meta name="description"（概要）。ここを、Aboutページの概要に書き換えます。
変更前
<meta name="description" content="<$MTBlogName encode_html="1"$>の最近のコメントとトラックバック" />変更後
<meta name="description" content="<$MTBlogName encode_html="1"$>の概要" />次に14行目のこのページのタイトル。
変更前
<title>Recent Reaction - <$MTBlogName encode_html="1"$></title>変更後
<title>About - <$MTBlogName encode_html="1"$></title>head内の変更箇所は以上。次はBody以下をみていきます。まず16行目。
変更前
<body class="individual" id="recentReaction">変更後
<body class="individual" id="About">あとでこの部分を指定しているスタイルシートにも修正を加える必要があります。
次はヘッダーの中身。指定した項目に直接ジャンプさせるための記述を変えます。20行目と21行目。
変更前
<li>Jump to <a href="#recentComments">Comments</a></li>
<li>Jump to <a href="#recentTrackback">Trackback</a></li>変更後
<li>Jump to <a href="#aboutMe">About Me</a></li>
<li>Jump to <a href="#aboutSite">About Site</a></li>コメント一覧の部分を自己紹介にトラックバック一覧の部分をサイトの説明にしたいのでそれぞれaboutMe、aboutSiteに置き換えました。ジャンプ先の行もここと同じ記述にします。
次は23行目。現在地を表す、いわゆるパンくずナビの部分を書き換えます。
変更前
<p class="topicPath">TopicPath : <a href="<$MTBlogURL$>"><$MTBlogName encode_html="1"$></a> / <span class="current">Recent Reaction</span></p>変更後
<p class="topicPath">TopicPath : <a href="<$MTBlogURL$>"><$MTBlogName encode_html="1"$></a> / <span class="current">About</span></p>ヘッダーの変更箇所は以上。
次はコンテンツの中身。まず27行目の大見出しを変更します。
変更前
<h1>Recent Reaction</h1>変更後
<h1>About</h1>その下のinfoは、AboutページはRecent Reactionと同じカテゴリーに並べるので変更不要。
さらにその下の31行目、ページの説明文をAboutページ用に書き換えます。
変更前
<p>当サイトの記事に寄せられたコメントとトラックバックを新着順に3記事表示しています。</p>変更後
<p>当サイトの説明。</p>次は個別の項目。33行目を変更。先ほどヘッダーで指定したJump to のジャンプ先。
変更前
<div class="section" id="recentComments">変更後
<div class="section" id="aboutMe">
次に34行目。見出し2のタイトルをRecent CommnetsからAbout MEに。
変更前
<h2>Recent Commnets</h2>変更後
<h2>About Me</h2><div class="section" id="aboutMe">～</div>の間は例えばpなどのインライン要素を用いて自己紹介文を書きます。私の場合書くことが一行しかなかったのでpで挟んだのですが、たとえば好きな音楽等並べる場合であれば、
<h3>好きなバンド</h3>
<ul>
<li>スピッツ</li>
<li>100s</li>
</ul>などとさらに小項目を書いていけば良いと思います。
次は45行目。2つめのジャンプ先。Recent Comments同様変更します。
変更前
<div class="section" id="recentTrackback">変更後
<div class="section" id="aboutSite">次に46行目。見出し2のタイトルをRecent TrackbackからAbout Siteに。
変更前
<h2>Recent Trackback</h2>変更後
<h2>About Site</h2><div class="section" id="aboutSite">～</div>の間もAbout Me同様に内容を書きます。
最後に60行目、フッターのパンくずナビも修正しておきます。
変更前
<p class="topicPath">TopicPath : <a href="<$MTBlogURL$>"><$MTBlogName encode_html="1"$></a> / <span class="current">Recent Reaction</span></p>変更後
<p class="topicPath">TopicPath : <a href="<$MTBlogURL$>"><$MTBlogName encode_html="1"$></a> / <span class="current">About</span></p>すべての箇所の変更が終ったら、MTの管理画面を開き、テンプレートから新しいインデックス・テンプレートをつくります。
ここではテンプレート名を「アバウト」、出力ファイル名を「about.html」として、内容に書き換えたソースをコピー&ペーストし保存しました。
これでひとまずアバウトのページが完成です。あとはスタイルシートを変更し、メインページにアバウトページへのリンクを貼らなければなりません。次のエントリーに続く。
コメント