FC2ブログのテンプレート工房

スタイルシートの末尾に次の記述を加えてください。

/* ▼親子カテゴリ▼ */

li.main_list {
margin-bottom:8px; /* 親カテゴリの間隔 */
font-weight:bold; /* 親カテゴリの文字の太さ */
}

ul.sub_menu {
margin:0px;
padding:0px;
margin-top:5px; /* 親カテゴリから子カテゴリまでの間隔 */
padding-left:0px; /* 子カテゴリの左余白 */
}

.sub_menu li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0px;
padding-left:20px;
padding-top:2px;
padding-bottom:5px; /* 子カテゴリの間隔 */
font-weight:normal; /* 子カテゴリの文字の太さ */
}

.sub_list {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif"); /*ツリー画像 */
}

.sub_list_end {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif"); /*ツリー画像(最後尾) */
}
/* ▲親子カテゴリ▲ */

各数値はお好みに合わせて変更してください。

次の記述をHTMLに追加します。
赤い箇所は各自希望のURL、リンク名に変えてください。
ここでは例として７件のメニュー項目がありますが、希望にあわせて増減してください。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>
<!--▲ メニューバー ▲-->

当サイトが提供する共有テンプレートの場合、上記記述を挿入する箇所は次のようになります。

【standardシリーズの場合】

～
<!--▼▼▼▼ メインボディ（コンテンツ部分）▼▼▼▼-->
<tr><td id="main_body">

<!-- ここに挿入してください -->

<table style="margin: 1em; clear:left" border="0" cellspacing="0">
～

standardシリーズの場合、「; clear:left」も追加してください。


【lightframeシリーズの場合】

～
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->

<!-- ここに挿入してください -->

<div id="center-left">
<div id="center">
<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～

次にスタイルシートの末尾に次の記述を追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

色や大きさ等の各パラメータはお好みにあわせて設定してください。

lightframeシリーズの場合は、/* 上の間隔 */が0pxでも余計な間隔が出来てしまいます。
次の箇所も設定して調整してください。

#header_outline {
margin-bottom:20px; /* ヘッダ下間隔 */
}

【2009/08/13 追記】
メニューを幅一杯まで使おうとして崩れている方を時々見かけます。
IEだけでなく、Firefoxでも確認することを強く推奨します。

スタイルシートの次の箇所に赤い行を加えてください。

【記事の角を丸くする】

/* ▼ 記事 ▼ */

.ently_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.ently_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.ently_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 記事 ▲ */

【各プラグインの角を丸くする】

/* ▼ 左側メニュー(プラグイン１) ▼ */

.plugin1_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.plugin1_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.plugin1_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 左側メニュー(プラグイン１) ▲ */

/* ▼ 右側メニュー(プラグイン２) ▼ */

.plugin2_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.plugin2_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.plugin2_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 右側メニュー(プラグイン２) ▲ */

/* ▼ 上部メニュー(プラグイン３) ▼ */

.plugin3_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.plugin3_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.plugin3_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 上部メニュー(プラグイン３) ▲ */

【コメント、トラバの角を丸くする】

/* ▼ コメント ▼ */

.comment_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.comment_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.comment_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ コメント ▲ */

/* ▼ トラックバック ▼ */

.trackback_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.trackback_block_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.trackback_block_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ トラックバック ▲ */

【タイトル枠の角を丸くする】
※whiteにはタイトル枠がありません

/* ▼ ヘッダー ▼ */

#header_outline {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}

#header_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ ヘッダー ▲ */

【フッターの角を丸くする】

/* ▼ フッター ▼ */

#footer_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#footer_body {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

/* ▲ フッター ▲ */

当サイトのテンプレートのHTMLには次のような箇所があります。

<!--▼ エントリー（記事）▼-->
<!--topentry-->

この下に次の記述を加えてください。

<!--same_day-->
<div class="date_label">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
</div>
<!--/same_day-->

さらにスタイルシートの末尾に次の記述を加えてください。

.date_label {
background-color:#000000; /* 背景色 */
font-size:10pt; /* 文字のサイズ */
color:#cccccc; /* 文字の色 */
text-align:left; /* 文字左寄せ */

/* 枠の内側の間隔 */
padding-top:5px; /* 上 */
padding-bottom:5px; /* 下 */
padding-left:20px; /* 左 */

/* 枠の外側の間隔 */
margin-top:20px; /* 上 */
margin-bottom:15px; /* 下 */
}

サイズや色、間隔等の各数値はお好みに合わせて変更してください。

最後に管理画面から
環境設定の変更→ブログの設定→拡張表示設定、と進み
表示単位を「日付単位」に変更してください。

これで記事タイトルの上部に日付が表示されます。