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>

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

- スポンサードリンク -