« カテゴリ別アーカイブの表示を変更 | メイン | 水曜どうでしょう 2004年最新作放送開始 »

サイドバーのタイトルにカテゴリ別に色分けした下線を追加

本文のタイトルだけではなく、サイドバーに表示しているタイトルもカテゴリ別に分かるようにしたいと思いました。
ふつうにやると本文用とサイドバー用でスタイルシートを分けないといけないので、 <MTSetVar> とかを使います。

他に必要なプラグインは <MTSetVarBlock> です。
この例では、カテゴリIDの「6番」「15番」「それ以外」を指定しています。
それから、あくまで私が使っているコードそのままなのである程度の修正は必要です。(そのままでも使えますが…)
1.テンプレートモジュールを作ります。(テンプレートモジュールの名前は適当に。(例では「Category colors」としています)
<$MTSetVar name="border_default" value="#666666"$>
<$MTSetVar name="border_cat6"    value="#6633cc"$>
<$MTSetVar name="border_cat15"   value="#cc3333"$>
<$MTSetVar name="background_default" value="#999999"$>
<$MTSetVar name="background_cat6"    value="#9966ff"$>
<$MTSetVar name="background_cat15"   value="#ff6666"$>

<MTSetVarBlock name="title">
  border-width: 1px 1px 1px 5px;
  border-style: solid;
</MTSetVarBlock>

<MTSetVarBlock name="title_default">
<$MTGetVar name="title"$>
  border-color:     <$MTGetVar name="border_default"$>;
  background-color: <$MTGetVar name="background_default"$>;
</MTSetVarBlock>

<MTSetVarBlock name="title_cat6">
  <$MTGetVar name="title"$>
  border-color:     <$MTGetVar name="border_cat6"$>;
  background-color: <$MTGetVar name="background_cat6"$>;
</MTSetVarBlock>

<MTSetVarBlock name="title_cat15">
  <$MTGetVar name="title"$>
  border-color:     <$MTGetVar name="border_cat15"$>;
  background-color: <$MTGetVar name="background_cat15"$>;
</MTSetVarBlock>


<$MTSetVar name="entry" value="border-bottom: solid 1px"$>

<MTSetVarBlock name="entry_default">
  <$MTGetVar name="entry"$> <$MTGetVar name="border_default"$>;
</MTSetVarBlock>

<MTSetVarBlock name="entry_cat6">
  <$MTGetVar name="entry"$> <$MTGetVar name="border_cat6"$>;
</MTSetVarBlock>

<MTSetVarBlock name="entry_cat15">
  <$MTGetVar name="entry"$> <$MTGetVar name="border_cat15"$>;
</MTSetVarBlock>


2.「Main Index」と「Stylesheet」テンプレートの初めの方で上のモジュールを読み出します。
<$MTInclude module="Category colors"$>

3.サイドバーの「最近のエントリー」他を修正します。(赤文字部分が追加したところ)
・最近のエントリー
<ul>
<MTEntries lastn="10">
<MTEntryCategories>
<li><span class="entry"><a href="<$MTEntryPermalink$>" class="cat<$MTCategoryID$>" title="<MTEntryCategories glue=", ">[ <MTParentCategories glue = " → "><$MTCategoryLabel$></MTParentCategories> ]</MTEntryCategories> <$MTEntryDate$>"><$MTEntryTitle$></a></span></li>
</MTEntryCategories>
</MTEntries>
</ul>

・最近のコメント
<ul>
<MTEntries recently_commented_on="10" sort_order="ascend">
<li><MTEntryCategories glue=", "><span class="entry"><a href="<$MTEntryPermalink$>" class="cat<$MTCategoryID$>" title="[ <MTParentCategories glue = " → "><$MTCategoryLabel$></MTParentCategories> ] <$MTEntryDate$>"><$MTEntryTitle$></a></span> [<$MTEntryCommentCount$>]</MTEntryCategories><br />
<MTComments lastn="5">
  └ <a href="<$MTEntryPermalink$>#c<$MTCommentID$>" title="<$MTCommentDate$>"><$MTCommentAuthor$></a> さん</span><br />
</MTComments></li>
</MTEntries>
</ul>

・最近のトラックバック(※<MTCollateCollect>使用版)
<MTCollateCollect>
 <MTPings lastn="10">
  <MTCollateRecord>
   <MTCollateSetField name="ping_id"><$MTPingID$></MTCollateSetField>
   <MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField>
   <MTCollateSetField name="ping_title"><$MTPingTitle$></MTCollateSetField>
   <MTCollateSetField name="ping_blog_name"><$MTPingBlogName$></MTCollateSetField>
   <MTCollateSetField name="ping_date"><$MTPingDate$></MTCollateSetField>
   <MTPingEntry>
    <MTCollateSetField name="entry_key"><MTPings lastn="1"><$MTPingDate format="%y%m%d%H%M%S"$></MTPings></MTCollateSetField>
    <MTCollateSetField name="entry_link"><$MTEntryLink$></MTCollateSetField>
    <MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
    <MTCollateSetField name="entry_date"><$MTEntryDate$></MTCollateSetField>
    <MTCollateSetField name="entry_trackbackcount"><$MTEntryTrackbackCount$></MTCollateSetField>
    <MTEntryCategories glue=", ">
     <MTCollateSetField name="entry_CategoryID"><$MTCategoryID$></MTCollateSetField>
     <MTCollateSetField name="entry_CategoryLabel"><MTParentCategories glue = " → "><$MTCategoryLabel$></MTParentCategories></MTCollateSetField>
    </MTEntryCategories>
   </MTPingEntry>
  </MTCollateRecord>
 </MTPings>
</MTCollateCollect>
 
<ul>
 <MTCollateList sort="entry_key:#:- ping_id:#:+">
  <MTCollateIfHeader name="entry_key">
  <li><span class="entry"><a href="<$MTCollateField name="entry_link"$>" class="cat<$MTCollateField name="entry_CategoryID"$>" title="[ <$MTCollateField name="entry_CategoryLabel"$> ] <$MTCollateField name="entry_date"$>"><$MTCollateField name="entry_title"$></a></span> [<$MTCollateField name="entry_trackbackcount"$>]<br />
  </MTCollateIfHeader>
  <MTCollateIfFooter>└<MTElse>├</MTElse></MTCollateIfFooter>
  <a href="<$MTCollateField name="ping_url"$>" title="<$MTCollateField name="ping_date"$> (「<$MTCollateField name="ping_blog_name"$>」より)"><$MTCollateField name="ping_title" encode_html="1"$></a><br />
  <MTCollateIfFooter></li></MTCollateIfFooter>
 </MTCollateList>
</ul>


・カテゴリ別アーカイブ
<ul>
<MTSubCategories>
 <MTHasNoParentCategory><li></MTHasNoParentCategory>
 <MTHasParentCategory><MTSubCatIsLast>└<MTElse>├</MTElse></MTSubCatIsLast></MTHasParentCategory>
 <span class="entry">
  <MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>" class="cat<$MTCategoryID$>"><MTCategoryLabel></a>
  <MTElse><span title="<$MTCategoryDescription$>" class="cat<$MTCategoryID$>"><MTCategoryLabel></span></MTElse></MTIfNonZero>
 </span>
 [<$MTCategoryCount$>]<br />
 <MTSubCatsRecurse>
 <MTSubCatIsLast></li></MTSubCatIsLast>
</MTSubCategories>
</ul>

4.スタイルシートに追加します。
/* 記事のタイトル */
.content h3 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 100%;
  text-align: left;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 5px;
  color: white;
<$MTGetVar name="title_default"$>
}

.content h3.cat6  {
<$MTGetVar name="title_cat6"$>
}

.content h3.cat15 {
<$MTGetVar name="title_cat15"$>
}

.content h3 a,
.content h3 a:link,
.content h3 a:hover,
.content h3 a:active,
.content h3 a:visited {
 text-decoration: none;
 color: #ffffff;
}

/* 最近のエントリーの下線 */
.sidebar span.entry a,
.sidebar span.entry span {
<$MTGetVar name="entry_default"$>
}

.sidebar span.entry .cat6 {
<$MTGetVar name="entry_cat6"$>
}

.sidebar span.entry .cat15 {
<$MTGetVar name="entry_cat15"$>
}

トラックバック

このエントリーのトラックバックURL:
http://blog.yasuhisa.net/mt/mt-tb.cgi/52

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2004年12月25日 20:33に投稿されたエントリーのページです。

ひとつ前の投稿は「カテゴリ別アーカイブの表示を変更」です。

次の投稿は「水曜どうでしょう 2004年最新作放送開始」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type 3.35
Since Oct. 28,2004 / Today / Yesterday