・カテゴリー名の表示
・カテゴリーに属するエントリーのタイトル一覧
・カテゴリーに属するエントリーのタイトル一覧
【変更前】
【変更後】
【テンプレートの修正】
「カテゴリー・アーカイブ」テンプレートのスタイルシートで装飾したい部分を<div class="クラス名">～</div>で囲みます。クラス名は好きな名前（わかりやすいほうがいいですね）を付けます。実際のソースは下のようになります。「カテゴリー名 + の目次」という部分はclass名「catemokuji」に、エントリータイトルの一覧の部分のclass名は「catelist」にしました。
<div class="catemokuji">
<$MTArchiveCategory pmhc=""$>の目次
</div>
<div class="catelist">
<MTEntries>
<ul>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</ul>
</MTEntries>
</div>
<$MTArchiveCategory pmhc=""$>の目次
</div>
<div class="catelist">
<MTEntries>
<ul>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</ul>
</MTEntries>
</div>
【スタイルシートの修正】
修正というよりは、新しくclass名を指定したので、追記になります。追記したソースは下記の通りです。イトル見出し部分のスタイルが「.catemokuji」になります。
- テキストの色：グレー
- 見出しの枠・上下、右側（ボーダー）：うす緑、1px、直線
- 見出し枠の左側（ボーダー）：うす緑、10px、直線
- 「CATEGORY index」という画像を背景画像に指定、位置を左端から3%、上から40%に指定
- 「CATEGORY index」（画像の幅160px）を背景に指定したので、テキストが始まる位置をpaddingで左余白175pxに指定
- no-repeatで背景画像は繰り返さない指定
- テキスト：グレー（リストマークの色がグレーになります）
- 余白の指定< /li>
- 行間を150%に指定
- テキストを左寄せに指定
/*カテゴリーアーカイブの目次*/
.catemokuji{
color:#666666;
margin-top:10px;
border-top:1px solid #adc7ad;
border-right:1px solid #adc7ad;
border-bottom:1px solid #adc7ad;
border-left:10px solid #adc7ad;
background-image:url('画像のURL');
background-repeat: no-repeat;
background-position: 3% 40%;
padding:5px 0px 0px 175px;
}
.catelist{
margin:10px 0px 10px 20px;
color:#666666;
}
.catelist ul{
margin:0px;
padding:0px;
}
.catelist li{
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
line-height: 150%;
text-align: left;
}
.catemokuji{
color:#666666;
margin-top:10px;
border-top:1px solid #adc7ad;
border-right:1px solid #adc7ad;
border-bottom:1px solid #adc7ad;
border-left:10px solid #adc7ad;
background-image:url('画像のURL');
background-repeat: no-repeat;
background-position: 3% 40%;
padding:5px 0px 0px 175px;
}
.catelist{
margin:10px 0px 10px 20px;
color:#666666;
}
.catelist ul{
margin:0px;
padding:0px;
}
.catelist li{
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
line-height: 150%;
text-align: left;
}
