MAQUEテンプレートカスタマイズ Aboutのページをつくる – 3/3

前のエントリー:MAQUEテンプレートカスタマイズ Aboutのページをつくる(2)

AboutページのテンプレートのXHTMLを書き換えるところまでは終了しました。次はCSSの修正と、メインページへのリンクの追加を行います。

3つのスタイルシートのファイルのうち、「テンプレートごとに異なるスタイル」を指定しているtemplates.cssを開きます。デザインはRecent Reactionとそろえる予定なので、ソースもそのまま使うことにすます。

dl要素やspan要素はAboutのページでは使う予定がないので、除いてコピー。

/*--------------------------------------
Recent Reaction
---------------------------------------*/
body#recentReaction div.section div.section {
padding: 1px 0;
}
body#recentReaction div#recentComments h3,
body#recentReaction div#recentTrackback h3 {
line-height: 1.2;
font-size: 120%;
background-color: transparent;
margin-bottom: 0.5em;
}
body#recentReaction h3 a:vidited {
color: 005585;
}

スタイルに変えるところはないので、#マークのあとのID属性の名前だけを書き換えます。テンプレートで変更した通りに、対応している箇所ををそのまま書き換えるだけでよいです。

/*--------------------------------------
About
---------------------------------------*/
body#About div.section div.section {
padding: 1px 0;
}
body#About div#aboutMe h3,
body#About div#aboutSite h3 {
line-height: 1.2;
font-size: 120%;
background-color: transparent;
margin-bottom: 0.5em;
}
body#About h3 a:vidited {
color: 005585;
}

これをtemplates.cssに加えれば完了。ついでに一番上の@Treeというところに「+About」と加えて日付を入れておけばあとで見たときにわかりやすいかも。これを保存してアップロードすればスタイルが適用されます。

最後に、index.htmlにabout.htmlへのリンクを貼ります。MTの管理画面からメインページのテンプレートを開きます。

34行目の

<li><a href="<$MTBlogURL>recent-reaction.html" title="最近のコメントとトラックバック" rel="nofollow">Recent Reaction</a></li>

の真上に以下の行を加えます

<li><a href="<$MTBlogURL>about.html" title="このサイトについて" rel="nofollow">About</a></li>

保存、再構築すればすべて完了。トップページにリンクが加わっているはず。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次