Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

コメント返信

 検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。

続きを読む

padb-linie → padw-linie

padw-linie(白)

コピー場所 ▼ スタイルシートの編集

以下をすべて選択し、コピー。『padb-linie』のスタイルシート欄に貼り付けてください。

sommer

検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください

dt2_pasommer
■dt2_pasommer : プレビュー
【dt2】サンプル
カスタマイズ
sosky-b
左右入替え(仮)
上部ナビにコメント・トラバ件数表示
曜日ごとに日付画像変更

履歴

【変更1011】タイトル部分のHTML変更

変更場所 ▼ HTMLの編集-「container」

赤字部分(container)を削除。

<div class="container">/* 削除 */
<div class="blogTitle">

変更場所 ▼ HTMLの編集-「/body」最後の方

赤字部分(/div)を1つ削除。

</div>/* 削除 */
</div>
</body>

変更場所 ▼ スタイルシートの編集-「.blogTitle」

「Body ---- */」 の少し下。赤字部分を修正・追加。

.blogTitle{
 position: relative;
 height: 87px;
 margin-top: 304px;
}
h1.title{
 position: absolute;
 z-index: 777;
 top: 28px;
 left: 17px;
 height: 59px;
 line-height: 45px;
 text-indent: 82px; /* ブログタイトル横位置 */
 margin: 0;
 padding: 0;
 font-size: 94%; /* ブログタイトル文字サイズ */
 text-align: left;
 font-weight: bold;
 letter-spacing: 1px;
 color: #ffffff;
}

#symbol{
 position: absolute;
 z-index: 888;
 top: 1px;
 width: 85px;
 height: 86px;
 text-align: center;
 left: 0;
 margin: 0;
 padding: 0;
 font-size: 69%; /* Entries 文字サイズ */
 font-family: verdana;
 color: #ffffff;
 font-weight: bold;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosym01.gif) 0 0 no-repeat; /* 画像 */
}
#symbol span{
 display: block;
 position: relative;
 top: 0px; /* Entries 開始位置 */
 left: 0;
 width: 85px; /* 85px以下 */
 line-height: 85px; /* 行間 */
}

div.r-main{
 margin-top: 14px;/* 削除 */
 margin-right: 8px;
 margin-left: 13px;
 text-align: left;
}

変更場所 ▼ スタイルシートの編集-「.pagelist」

「Navi List --- */」 の下。赤字部分を変更。

.pagelist{
 padding: 0 0 7px;
 margin: 0 0 45px 9px;
 color: #ffffff;
 font-size: 82%;
}

変更場所 ▼ スタイルシートの編集-「size-m --- */」最後の方

「size-m --- */」 の少し下。赤字部分を削除・変更。

/* container 部分丸ごと削除 */
.size-m .container{
 margin-top: 304px;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sots538.gif) 0 0 no-repeat;
}/* ここまで削除 */

.size-m h1.title{
 width: 529px;
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots529.jpg) 0 0 no-repeat;
}

変更場所 ▼ スタイルシートの編集-「size-l --- */」最後の方

「size-l --- */」 の少し下。赤字部分を削除・変更。

/* container 部分丸ごと削除 */
.size-l .container{
 margin-top: 304px;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sots590.gif) 0 0 no-repeat;
}/* ここまで削除 */

.size-l h1.title{
 width: 581px;
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots581.jpg) 0 0 no-repeat;
}

変更場所 ▼ スタイルシートの編集-「size-s --- */」最後の方

「size-s --- */」 の少し下。赤字部分を削除・変更。

/* container 部分丸ごと削除 */
.size-s .container{
 margin-top: 304px;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sots496.gif) 0 0 no-repeat;
}/* ここまで削除 */

.size-s h1.title{
 width: 487px;
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots487.jpg) 0 0 no-repeat;
}

トップ追加画像

プレビュー : sosky804b,856b,748b,953b (初期版 + sots538b,590b,496b)

変更場所 ▼ スタイルシートの編集-「size-m --- */」

最下部付近、以下のアドレスを変更。使わないサイズの変更は必要ありません。
画像のサーバー番号を「41」から「34」に、「.jpg」の前に「b」をつけます。
「size-w」は画像のサーバー番号を「38」に、「953b.jpg」とします。

/* --------------------------------------------------- size-m --- */
.size-m #pagetop{ width: 804px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosky804b.jpg) 8px 20px no-repeat;
}

/* --------------------------------------------------- size-l --- */
.size-l #pagetop{ width: 856px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosky856b.jpg) 8px 20px no-repeat;
}

/* --------------------------------------------------- size-s --- */
.size-s #pagetop{ width: 748px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosky748b.jpg) 8px 20px no-repeat;
}

2009.10.11より前にダウンロード(/* 20090821)

古いバージョンの場合は、もう一つアドレスを変更。使わないサイズの変更は必要ありません。
画像のサーバー番号を「41」から「34」に、「.jpg」「.gif」の前に「b」をつけます。

/* --------------------------------------------------- size-m --- */
.size-m .container{
margin-top: 304px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots538b.gif) 0 0 no-repeat;
}

/* --------------------------------------------------- size-l --- */
.size-l .container{
margin-top: 304px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots590b.gif) 0 0 no-repeat;
}

/* --------------------------------------------------- size-s --- */
.size-s .container{
margin-top: 304px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots496b.gif) 0 0 no-repeat;
}

元に戻す際は逆の変更をしてください。サーバー番号を「41」にして「b」を外します。
.size-○ .container の方の画像は戻さなくても使えそうです。

日付部分の画像変更

一色ごとに4つのパターン(計64種類)があります。数字は、「02」から「17」まで。別のパターンは、数字の後に「b」「c」「d」をつけます(例:soday08d.gif など)。
「a、b」は枠線が太いもの。「b、d」は斜線入り。

091011a

[カスタマイズ]

※画像サーバーが「41」から「34」に変わっています。初期版のテンプレートは数字を変更してください。

変更場所 ▼ スタイルシートの編集-「ul.daySun」

「Entry --- */」部分の以下の箇所を変更します。
上が平日の画像アドレス。下が日曜日の画像アドレスです。あわせて背景色(#○○○○○○)も変更します。

background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday02.gif) 0 0 no-repeat;
}
div ul.daySun{
background: #dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11.gif) 0 0 no-repeat;
}

(例)平日を「02d.gif」 日曜日を「08d.gif」に指定

091011b

background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday02d.gif) 0 0 no-repeat;
}
div ul.daySun{
background: #dc5598 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday08d.gif) 0 0 no-repeat;
}

画像アドレス一覧(数字ごとの背景色)

数字にあわせて背景色も変更してください。「b~d」は基本画像と同じ背景色になります。
(例)「08.gif」「08b.gif」「08c.gif」「08d.gif」→#dc5598

02

#3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday02.gif)

03

#37a0cc url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday03.gif)

04

#4376c1 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday04.gif)

05

#3fb5ae url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday05.gif)

06

#52ba77 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday06.gif)

07

#76b733 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday07.gif)

08

#dc5598 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday08.gif)

09

#f3b027 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday09.gif)

10

#f19727 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday10.gif)

11

#dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11.gif)

12

#c94130 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday12.gif)

13

#477574 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday13.gif)

14

#ada159 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday14.gif)

15

#9a9e00 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday15.gif)

16

#554d3d url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday16.gif)

17

#000000 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday17.gif)

曜日ごとに画像を変更

変更場所 ▼ スタイルシートの編集-「ul.daySun」

「Entry --- */」部分の以下の箇所を変更します。
上の平日の background: 画像アドレス ; は削除しても構いません。

div ul.daySun{
background: #dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11.gif) 0 0 no-repeat;
}

上記を以下に入替え。画像と背景色はお好みにあわせて変更してください。

div ul.daySun{ /* 日 */
background: #dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11d.gif) 0 0 no-repeat;
}
div ul.dayMon{ /* 月 */
background: #3fb5ae url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday05d.gif) 0 0 no-repeat;
}
div ul.dayTue{ /* 火 */
background: #f19727 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday10d.gif) 0 0 no-repeat;
}
div ul.dayWed{ /* 水 */
background: #37a0cc url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday03d.gif) 0 0 no-repeat;
}
div ul.dayThu{ /* 木 */
background: #477574 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday13d.gif) 0 0 no-repeat;
}
div ul.dayFri{ /* 金 */
background: #9a9e00 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday15d.gif) 0 0 no-repeat;
}
div ul.daySat{ /* 土 */
background: #4376c1 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday04d.gif) 0 0 no-repeat;
}

サイドバープラグインタイトル部分の画像変更

一色ごとに5つのパターン(計65種類)があります。size-m,lの数字は「224」。size-sの数字は「210」。数字後ろの値は、「a」から「m」まで。そのさらに後に「a」「b」「c」「d」をつけることで、別のパターンに変わります(例:sost224fa.gif など)。
「xa、xb、xe」は右上が白みがかっているもの。「xb、xd」は斜線が薄い色。

091017a

[カスタマイズ]

※画像サーバーが「41」から「34」に変わっています。数字を変更してください。

変更場所 ▼ スタイルシートの編集-「size-m --- *」

「size-○ --- */」部分の以下の箇所を変更します。size-m、size-lは「sost224」。size-sは「sost210」の後ろに「aa」~「me」までの値を入れます。使わないサイズの変更は必要ありません。

/* --------------------------------------------------- size-m --- */
.size-m h2.s-title{
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ac.gif) 0 0 no-repeat;
}
/* --------------------------------------------------- size-l --- */
.size-l h2.s-title{
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ac.gif) 0 0 no-repeat;
}
/* --------------------------------------------------- size-s --- */
.size-s h2.s-title{
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost210ac.gif) 0 0 no-repeat;
}

画像アドレス一覧(色ごとの背景色)

値にあわせて背景色も変更してください。「b~e」は基本画像と同じ背景色になります。
(例)「224aa.gif」「224ab.gif」「224ac.gif」「224ad.gif」「224ae.gif」→#3190b8

aa~ae

#3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224aa.gif)

ba~be

#37a0cc url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ba.gif)

ca~ca

#4682bd url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ca.gif)

da~de

#3fb5ae url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224da.gif)

ea~ee

#83ca38 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ea.gif)

fa~fe

#de5397 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224fa.gif)

ga~ge

#f19727 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ga.gif)

ha~he

#dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ha.gif)

ia~ie

#497a7a url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ia.gif)

ja~je

#9e9552 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ja.gif)

ka~ke

#b8ae17 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ka.gif)

la~le

#675a47 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224la.gif)

ma~me

#393939 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ma.gif)

記事右上の曜日にリンクがあります。ログイン状態のときのみ編集画面に飛びます。

記事編集

コメントの曜日にリンクがあります。ログイン状態のときのみ返信画面に飛びます。

管理者がコメント返信画面から太字や色を指定して返信すると、名前の左横にスターがつきます。

コメント投稿したときの時間(秒)が「00秒」のとき、人型アイコンがオレンジになりました。

コメント返信

[カスタマイズ]

分と秒が「00」のとき、オレンジが増えてオレンジ畑になりました。

遊び要素が感じられるため、初期状態では耕せません。以下のHTMLを変更し、スタイルシートの最下部などに必要項目を追加してください。チャンスは1時間に1回しかないため、滅多に表示されることはないと思います。
※画像サーバーが「41」から「34」に変わっています。ご注意ください。

変更場所 ▼ HTMLの編集-「c-top」

真ん中あたり、<!--comment-->内、赤字部分を追記。

<!--comment-->
<div class="c-entry" id="comment<%comment_no>">
<h3 class="c-top imo<%comment_minute>">

変更場所 ▼ スタイルシートの編集-以下を追加

h3.imo00 span.ico00{
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/icon02a.gif) 0 0 no-repeat;
padding-left: 63px;
}

上部ナビのリンクをページ内から個別ページに変更

直接個別ページにジャンプします。

変更場所 ▼ HTMLの編集-「pagelist」最初の方

赤字部分「#title<%topentry_no>」を変更。

<ul class="nlist"><!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_month>.<%topentry_day>&nbsp;<%topentry_youbi>&nbsp;[<%topentry_category>]&nbsp;<%topentry_title></a></li>

上部ナビのリストに時刻を表示

変更場所 ▼ HTMLの編集-「pagelist」最初の方

カテゴリ、記事タイトルの短いブログ向け。
[<%topentry_category>] の前に <%topentry_hour>:<%topentry_minute>&nbsp; を追加。

<ul class="nlist"><!--topentry-->
<li><a href="#title<%topentry_no>" title="<%topentry_title>"><%topentry_month>.<%topentry_day>&nbsp;<%topentry_youbi>&nbsp;<%topentry_hour>:<%topentry_minute>&nbsp;[<%topentry_category>]&nbsp;<%topentry_title></a></li>

上部ナビのリストにコメントとトラックバック件数を表示

カテゴリ・記事のタイトルが短めで右側に大きな空白ができるブログ向け。

変更場所 ▼ HTMLの編集-「pagelist」最初の方

最初の<ul class="nlist"><!--topentry-->から<!--/topentry-->までのあいだに赤字部分を追加。

<ul class="nlist"><!--topentry-->
<li><a href="#title<%topentry_no>" title="<%topentry_title>"><%topentry_month>.<%topentry_day>&nbsp;<%topentry_youbi>&nbsp;[<%topentry_category>]&nbsp;<%topentry_title></a>
<!--allow_comment--><span><a href="<%topentry_link>#comment-area" title="Comment - <%topentry_title>">(&nbsp;<%topentry_comment_num>&nbsp;)</a><!--deny_tb--></span><!--/deny_tb--><!--/allow_comment-->
<!--allow_tb--><!--allow_comment-->&nbsp;&nbsp;<!--/allow_comment--><!--deny_comment--><span><!--/deny_comment--><a href="<%topentry_link>#trackback" title="Trackback - <%topentry_title>">(&nbsp;<%topentry_tb_num>&nbsp;)</a></span><!--/allow_tb-->
</li>
<!--/topentry-->

変更場所 ▼ スタイルシートの編集

以下を追加。

トップページ、上部ナビに「プラグイン3」を表示

「トップページでは、ナビリストとプラグインの最新記事が重複するから、ナビリストはなくてもいい」という場合のカスタマイズです。プラグイン3をナビリスト部分に表示させます。

091021a

[カスタマイズ]

変更場所 ▼ HTMLの編集-「p-body」

「p-body」のすぐ後に赤字部分を入れます。続く「not_permanent_area」と「/not_titlelist_area」の前後にも赤字部分(not_index_area、/not_index_area)を入れて、挟みます。

<div class="p-body">
<!--index_area--><!--plugin--><!--plugin_third-->
<div class="entry-p">
<h2 class="ptitle"><%plugin_third_title></h2>
<!--plugin_third_description-->
<p class="s-desc"><%plugin_third_description></p>
<!--/plugin_third_description-->
<%plugin_third_content>
<!--plugin_third_description2-->
<p class="s-desc"><%plugin_third_description2></p>
<!--/plugin_third_description2-->
</div>
<!--/plugin_third--><!--/plugin--><!--/index_area-->

<!--not_index_area--><!--not_permanent_area--><!--not_titlelist_area-->
<ul class="nlist"><!--topentry-->
<li><a href="#title<%topentry_no>" title="<%topentry_title>"><%topentry_month>.<%topentry_day>&nbsp;<%topentry_youbi>&nbsp;[<%topentry_category>]&nbsp;<%topentry_title></a></li>
<!--/topentry-->
<!--edit_area--><li><a href="./blog-entry-<%edit_entry_no>.html" title="<%edit_entry_title>"><%edit_category_title>&nbsp;:&nbsp;<%edit_entry_title></a></li><!--/edit_area-->
</ul>
<!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_index_area-->

変更場所 ▼ HTMLの編集-「↓」

既存の「プラグイン3」の部分をすべて削除します。

<!--↓プラグイン3をトップページ以外でも表示する場合は削除-->
<!--index_area-->
(省略)
<!--/index_area-->
<!--↑-->

変更場所 ▼ スタイルシートの編集-「行間」

行間プラグイン3の赤字部分を変更。「1.5」はお好み。

/* ----------------------------------------------------- 行間 --- */
.entry-p{ line-height: 1.5; } /* プラグイン3 */

変更場所 ▼ スタイルシートの編集-「nlist li」

「Navi List --- */」の以下の箇所に赤字部分を追記します。

.nlist li,.entry-p ul li{
 padding: 5px 7px 5px 22px;
 margin: 0;
 line-height: 1.2;
 border-bottom: 1px #3a99c1 solid;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/icoa02.gif) 6px 9px no-repeat;
}

変更場所 ▼ スタイルシートの編集-「Plugin3 --- */」

「Plugin3 --- */」の部分を丸ごと以下に入替えます。

初期状態ではプラグイン3のタイトルは非表示になっています。
表示する場合は、/* タイトル非表示 */ の行を以下に変更してください。

display: block;/* タイトル非表示 */

すると次のようになります。

091021b

ブログタイトル左横の Entries の変更

文字の変更

変更場所 ▼ HTMLの編集-検索ワード「文字変更箇所」

赤字部分を変更します。

<p id="symbol">Entries</p>

[例]Entry、Summer、BLOG、LOVE、夏、肉、民主党

シンボル

文字装飾の変更

変更場所 ▼ スタイルシートの編集-「Entries」

ダウンロード時期によって変更箇所は異なります

■2009.10.11以降にダウンロード(/* 20091011)

#symbol{
 position: absolute;
 z-index: 888;
 top: 1px;
 width: 85px;
 height: 86px;
 text-align: center;
 left: 0;
 margin: 0;
 padding: 0;
 font-size: 69%; /* Entries 文字サイズ */
 font-family: verdana;  /* 書体 */
 color: #ffffff;
 font-weight: bold;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosym01.gif) 0 0 no-repeat; /* 画像 */
}
#symbol span{
 display: block;
 position: relative;
 top: 0px; /* Entries 開始位置 */
 left: 0;
 width: 85px; /* 85px以下 横幅(横位置)調整 */
 line-height: 85px; /* 行間 */
}

テキストを複数行入れる場合は、行間を「1.2」などに変更します。
また、「top: ○px;」で縦の開始位置も調整します。
文字サイズは「%指定」にしていますが、「px指定」の方がよいかもしれません。
font-weight: normal; にすると細字になります。
横幅(横位置)調整は必ず85px以下の数値を指定してください
[例]弾け<改行>輪ゴム

<!--HTMLの文字を変更-->
<p id="symbol"><span>弾け<br />輪ゴム</span></p>

/* スタイルシートの変更 */
 font-size: 14px;  /* Entries 文字サイズ */
 top: 26px;  /* Entries 開始位置 */
 line-height: 1.2;  /* 行間 */

一行に戻す際は、heightとline-heightの値を同じ値に戻してください。フォントはPC環境によるため、一行の方がPCによる差異は小さいです。画像に直接文字等を追加・アップロードしても構いませんが、Gif形式なので色落ちする可能性があります。

■2009.10.11より前にダウンロード(/* 20090821)

#symbol{
 position: absolute;
 top: 14px;  /* Entries 開始位置 */
 width: 84px;  /* 横幅(横位置)調整 */
 height: 59px;
 line-height: 59px;  /* 行間 */
 text-align: center;
 left: 0;
 margin: 0;
 padding: 0;
 font-size: 69%;  /* Entries 文字サイズ */
 font-family: verdana;  /* 書体 */
 color: #ffffff;  /* 文字色 */
 font-weight: bold;  /* 太さ */
}

テキストを複数行入れる場合は、行間を「1.2」などに変更します。
また、「top: ○px;」で縦の開始位置も調整します。
文字サイズは「%指定」にしていますが、「px指定」の方がよいかもしれません。
font-weight: normal; にすると細字になります。
[例]弾け<改行>輪ゴム

<!--HTMLの文字を変更-->
<p id="symbol">弾け<br />輪ゴム</p>

/* スタイルシートの変更 */
 font-size: 14px;  /* Entries 文字サイズ */
 top: 26px;  /* Entries 開始位置 */
 line-height: 1.2;  /* 行間 */

固定幅[ S ]

変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」

赤字部分を変更します。s(小文字のエス)

<body class="size-s"><!--サイズ変更-->

他のサイズを使わない場合はスタイルシート最下部の
「--- size-m --- */」と「--- size-l --- */」部分を削除しても構いません。

固定幅[ M ]

変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」

赤字部分を変更します。m(小文字のエム)

<body class="size-m"><!--サイズ変更-->

他のサイズを使わない場合はスタイルシート最下部の
「--- size-s --- */」と「--- size-l --- */」部分を削除しても構いません。

固定幅[ L ]

変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」

赤字部分を変更します。l(小文字のエル)

<body class="size-l"><!--サイズ変更-->

他のサイズを使わない場合はスタイルシート最下部の
「--- size-s --- */」と「--- size-m --- */」部分を削除しても構いません。

固定幅[ W ]

変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」

赤字部分を変更します。w(小文字のダブリュ)

<body class="size-w"><!--サイズ変更-->

変更場所 ▼ スタイルシートの編集

最下部に下記を丸ごと追加します。

他のサイズを使わない場合はスタイルシート最下部の
「--- size-s --- */」「--- size-m --- */」「--- size-l --- */」部分を削除しても構いません。

2009.10.11より前にダウンロードされたテンプレートは【変更1011】タイトル部分のHTML変更をする必要があります。

左右入替え(仮)

左右入替えを考慮してシンボル部分の画像を作成していますので一応可能です。

変更場所 ▼ HTMLの編集 -「サイズ変更」

最初の方、サイズ変更のすぐ下にあるpagetopにclass部分を追加。

<div class="lchan" id="pagetop">

変更場所 ▼ スタイルシートの編集

スタイルシートの最下部に以下を追加してください。

2009.10.11より前にダウンロード(/* 20090821)

古いバージョンの場合は、以下のスタイルシートを追加。

元に戻す場合はHTMLに追加した「class="lchan"」を削除してください。使わない「/* --- size-○ --- */」は削除しても構いません。

menue-p

検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください

pado-menue-ip
■1カラム
paeo-menue-p / paeo-menue-ip
■2カラム
pazo-menue-p / pazo-menue-ip
■3カラム
pado-menue-p / pado-menue-ip

履歴

変更は3箇所です。変更が済めば、【入替え】色々なプラグインをメニューに入れるから必要なものを選んでHTMLに組み込んでください。

(1)変更場所 ▼ スタイルシートの編集-「幅変更 ---」

#menunavi li{ width: ○○○px; }  /* メニューリンク */
/* 可変のときは { } 内に width: ○○○px; を入れる
サイズは (メニューリンク幅 * リンクの数) = □□□px
固定幅に戻すときは空っぽに */
#menunavi ul{  }

上記(#menunavi li から #menunavi ul{  } まで)を下記に変更。

#menunavi li{ width: ○○○px; }  /* メニューリンク */
#menunavi ul ul.c-menu {
  top: 0px;left: ○○○px;  /* 上記と同じ値 */
}
/* メニューリンクの合計値:  リンク幅 * リンク数 = □□□px */
#menunavi ul{ width: □□□px; }

menue,menue-i,カラム数などで数値は異なりますが、変更の範囲は同じです。
○○○には現在使っている幅を入れ、□□□には、リンク幅(○○○)px×リンク数の値を入れます。
#menunavi ul{  } のwidthは必須になります。
[例] 145pxで5個なら、145*5=725px

#menunavi li{ width: 145px; }  /* メニューリンク */
#menunavi ul ul.c-menu {
  top: 0px;left: 145px;  /* 上記と同じ値 */
}
/* メニューリンクの合計値:  リンク幅 * リンク数 = □□□px */
#menunavi ul{ width: 725px; }

(2)変更場所 ▼ スタイルシートの編集-「メニューリンク色 ---」

「メニューリンク色 --- */」の項目をすべて以下に入替えます。幅変更の少し下にあります。
(ダウンロード時期によっては「メニュー --- */」と表記)

/* ------------------------------------------- メニューリンク色 --- */

/* ----------------------------------------- サイドバーリンク色 --- */

最下部の[A][B]は該当する方を残して、もう一つは削除。HTMLの最下部付近に id="copyright" があれば[B]、address があれば[A]を残します。よくわからない場合は両方残しても構いません。

(3)変更場所 ▼ スタイルシートの編集-「menu ---」

英字「menu --- */」の項目をすべて以下に入替えます。下の方にあります。
通常版の『menue』は[ア]を。『menue-i』は[イ]に入替えます。

【ア】menueを使用 ※1,2,3カラム共通
ただし、3カラムは2行目を margin: 0 6px; に変更。

/* ----------------------------------------------------- menu --- */

/* ------------------------------------------------------------- */

【イ】menue-iを使用 ※1,2,3カラム共通

/* ----------------------------------------------------- menu --- */

/* ------------------------------------------------------------- */

最下部の[A][B]は該当する方を残して、もう一つは削除。HTMLの最下部付近に id="copyright" があれば[B]、address があれば[A]を残します。よくわからない場合は両方残しても構いません。

変更場所 ▼ HTMLの編集-検索ワード「リンク変更」

<ul>
<li class="home"><a href="./">Home</a></li>
←入替え
</ul>

メニューリンクの幅や個数に合わせて調整してください。
プルダウンリンクは <!--[if !IE]>--> から </ul></li> までが一つの塊です。長いのでコピーミスに注意してください。
必要なものを以下より選び、入替えてください

プルダウン幅は menu- の箇所を変更。s(通常リンク幅)、m(ワイド)、l(ワイド2)
カテゴリ以外の幅変更はプルダウンの幅を変えるを参考にしてください

■1記事リンク

プロフィールページなど1つの記事にリンク。Aboutにあたります。

<li><a href="記事URL">タイトル</a></li>

■複数記事プルダウンリンク

人気のあるページなど複数の記事にリンク。赤字部分(li~/li)を増やして追加します。

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Bookmarks</a>
<ul class="menu-m">
<li><a href="URL1">タイトル1</a></li>
<li><a href="URL2">タイトル2</a></li>
<li><a href="URL3">タイトル3</a></li>

</ul>
</li>

■親子カテゴリ

カテゴリの幅変更は親子カテゴリの幅を変更
複数列化はカテゴリを複数列並べるを参考にしてください。

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Categories</a>
<ul class="menu-s" id="pdcat">
<!--category-->
<!--category_sub_begin--><ul class="c-menu"><!--/category_sub_begin-->
<!--category_nosub--><li><!--/category_nosub-->
<!--category_parent-->
<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<!--/category_parent-->
<!--category_sub_hasnext--><li><!--/category_sub_hasnext-->
<!--category_sub_end--><li><!--/category_sub_end-->
<a href="<%category_link>"><%category_name></a>
<!--category_nosub--></li><!--/category_nosub-->
<!--category_sub_hasnext--></li><!--/category_sub_hasnext-->
<!--category_sub_end--></li></ul></li><!--/category_sub_end-->
<!--/category-->
</ul>
</li>

■新着記事

投稿日時削除/日付を最初から表示

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Recent Entries</a>
<ul class="menu-m">
<!--recent--><li class="rnew"><a href="<%recent_link>"><%recent_title>
<span><%recent_month>.<%recent_day>&nbsp;<%recent_youbi>&nbsp;<%recent_hour>:<%recent_minute></span></a></li><!--/recent-->
</ul>
</li>

■コメント

タイトルを最初から表示

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Comments</a>
<ul class="menu-m">
<!--rcomment--><li class="rcom"><a href="<%rcomment_link>#comment<%rcomment_no>"><span class="stxt"><%rcomment_month>.<%rcomment_day>&nbsp;<%rcomment_youbi></span>&nbsp;&nbsp;<%rcomment_name>
<span class="etitle"><%rcomment_etitle></span></a></li><!--/rcomment-->
</ul>
</li>

■トラックバック

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Trackbacks</a>
<ul class="menu-m">
<!--rtrackback--><li class="rcom"><a href="<%rtrackback_link>#trackback<%rtrackback_no>"><span class="stxt"><%rtrackback_month>.<%rtrackback_day></span>&nbsp;&nbsp;<%rtrackback_blog_name>
<span class="etitle"><%rtrackback_title></span></a></li><!--/rtrackback-->
</ul>
</li>

直接トラックバック先にリンクする場合(認証設定推奨)

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Trackbacks</a>
<ul class="menu-m">
<!--rtrackback--><li class="rcom"><a href="<%rtrackback_url>" target="_blank"><span class="stxt"><%rtrackback_month>.<%rtrackback_day></span>&nbsp;&nbsp;<%rtrackback_blog_name>
<span class="etitle"><%rtrackback_title></span></a></li><!--/rtrackback-->
</ul>
</li>

■リンク

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Links</a>
<ul class="menu-s">
<!--link--><li><a href="<%link_url>" target="_blank"><%link_name></a></li><!--/link-->
</ul>
</li>

■ユーザータグ

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Tag</a>
<ul class="menu-m" id="urtag">
<!--ctag--><li><a href="<%ctag_url>" title="<%ctag_count>"><%ctag_name></a></li><!--/ctag-->
</ul>
</li>

記事に付けられた順に並べる場合

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Tag</a>
<ul class="menu-m" id="urtag">
<!--rtag--><li><a href="<%rtag_url>" title="<%rtag_count>"><%rtag_name></a></li><!--/rtag-->
</ul>
</li>

変更場所 ▼ スタイルシートの編集

ユーザータグ用のスタイルを追加します。
全体幅が大きすぎる場合は位置を left: -50px; などとして調整します。
リンク上線色2・リンク背景色2には「メニュー --- */」と同じ値を入れます。

#menunavi #urtag{
  width: 250px;  /* 全体幅 */
  padding: 3px 5px 4px;
  margin: 0;
  border-top: 1px #4091b1 solid;  /* リンク上線色2 */
  left: 0px;  /* 位置 */
}
#menunavi #urtag {
  background: #3989a9;  /* リンク背景色2 */
}
#menunavi #urtag li {
  display: inline;
  float: none;
  width: auto;
  margin: 0 5px 0 0;  /* 右余白5px */
  line-height: 1.7;  /* 高さ */
}
#menunavi #urtag li a {
  display: inline;
  position: static;
  padding: 0;
  letter-spacing: 0;
  border: 0;
  vertical-align: middle;
  line-height: 1.7;  /* 高さ */
}
#menunavi #urtag li > a {
  filter: alpha(opacity=100);
}

変更場所 ▼ HTMLの編集-検索ワード「recent_hour」

下記を削除します。

&nbsp;<%recent_hour>:<%recent_minute>

リンク名の下にある class="menu-○" でプルダウンの幅を指定します。
menu-s(リンク幅と同じ)、menu-m(ワイド)、menu-l(ワイド2)
カテゴリのプルダウン幅は親子カテゴリの幅を変更を参考にしてください。

新着記事・コメントなどのプルダウン幅をメニューリンクと同じ幅に

変更場所 ▼ HTMLの編集-「リンク変更」

リンク幅と同じにするには「m」を小文字のエス「s」に書き換えます。

<a href="#">Recent Entries</a>
<ul class="menu-s">

新着記事・コメントなどのプルダウン幅を任意に変更

変更場所 ▼ HTMLの編集-「リンク変更」

ワイド幅は小文字のエム「m」

変更場所 ▼ スタイルシートの編集-「ワイド」

ワイドの数値を増減させることでプルダウンの幅が変わります。
もう少し幅が必要な場合は 210px に変更するなどして調整してください。あまり長いと全体をはみ出してしまうので、リンクの位置(幅の広いリンクは左側に置く)や個数に注意してください。

#menunavi ul.menu-m {
  width: 210px;  /* ワイド */
}

特定のプルダウン幅を任意に変更

※ここでは新着記事の幅を変更します

変更場所 ▼ HTMLの編集-「リンク変更」-Recent Entries

「m」を小文字のエル「l」に書き換えます。

<a href="#">Recent Entries</a>
<ul class="menu-l">

変更場所 ▼ スタイルシートの編集-「ワイド2」

幅の調整は以下の箇所を変更。

#menunavi ul.menu-l {
  width: 270px;  /* ワイド2 */
}

新着記事だけでなく、他のリンクでも class="menu-l" にすれば、そのプルダウンもワイド2の幅になります。

幅の広いプルダウンの開始位置を調整します。

変更場所 ▼ スタイルシートの編集-「メニュー --- */」「位置 */」

「位置 */」の下にプルダウンの位置を変更したい class="menu-○" の設定を追加します。

} /* 位置 */
#menunavi ul.menu-m {
  left: -30px;
}

『left』に負の値を入れると左にずれます。
「m」を小文字のエル「l」に変えると class="menu-l" のプルダウンの位置が変わります。

動作がスムーズに

変更場所 ▼ スタイルシートの編集

以下のスタイルシートを追記します。

#menunavi li.rcom a span.etitle,
#menunavi li.rnew a span {
  display: block;
}

親子カテゴリを使用している場合は、子カテゴリが最も多いものを最初(1番上)にもってきた方が視覚的によいです。並びの位置は、[環境設定]-[カテゴリの編集]-[カテゴリ一覧]の項目で変更できます。

ブラウザによってどうしても文字サイズの大きさの違いは生じます。カテゴリの名前がメニューリンク幅ぎりぎりの場合は、親子カテゴリの幅を変更カテゴリを複数列並べるで、広めの幅を確保してください。特に複数並べる場合は、2行になるとずれが生じるので注意が必要です。

カテゴリの領域を拡大して、2列3列並びにします。

カテゴリの名前が必ず1行で表示されるように幅を調整してください。
HTMLは使用状況にあわせて、[A][B]どちらかを選択してください。

変更場所 ▼ HTMLの編集-「リンク変更」-Categories

[A]親子カテゴリを使用していない場合

<ul class="menu-s" id="pdcat">
<!--category-->
(略)
<!--/category-->

上記部分を以下に変更します(かなり短くなります)

<ul class="menu-c" id="pdcat">
<!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category-->

[B]親子カテゴリを作成している場合

「子カテゴリのないカテゴリ」と「子カテゴリ」のみ表示するようにします。「子カテゴリをもつ(親)カテゴリ」の記事がある場合は、該当記事を「子カテゴリ」に設定するか、親から外す(「子カテゴリのないカテゴリ」に変更する)設定を行ってください。

変更場所 ▼ HTMLの編集-「リンク変更」-Categories

<ul class="menu-s" id="pdcat">
<!--category-->
(略)
<!--/category-->

上記部分を以下に変更します

<ul class="menu-c" id="pdcat">
<!--category-->
<!--category_nosub-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category_sub_end-->

<!--/category-->

共通 ▼ スタイルシートの編集

以下をスタイルシートに追加します

#menunavi ul.menu-c {
  width: 284px;  /* メニューリンクの倍の幅 */
}
#menunavi ul ul.menu-c li {
  width: 142px;  /* メニューリンクと同じ幅 */
  float: left;
}

倍の幅の箇所を3倍(426px)にすれば、3列になります。
メニューリンクの幅によって数値は異なります(ここでは初期値の142pxとする)
カテゴリの名前が2行になってしまうときは以下のようにして幅を広げてください。

メニューリンクとは違う大きさにする
[例]160pxを2列

#menunavi ul.menu-c {
  width: 320px;  /* カテゴリ幅の倍 */
}
#menunavi ul ul.menu-c li {
  width: 160px;  /* カテゴリ幅 */
  float: left;
}

変更場所 ▼ スタイルシートの編集-「メニュー --- */」「カテゴリテキスト」

left → center に変更

#menunavi #pdcat li{ text-align: center; } /* カテゴリテキスト */

変更場所 ▼ スタイルシートの編集

以下をスタイルシートに追加します。160pxの部分で幅が増減します。
※複数列はカテゴリを複数列並べるで変更

#menunavi #pdcat {
  width: 160px;/* カテゴリ幅 */
}

「幅変更 ---」の下記部分をカテゴリ幅と同じ値にします。
コメントの /* 上記と同じ値 */ は無視してください。

#menunavi li{ width: 142px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 160px;  /* 上記と同じ値 */
}

変更場所 ▼ HTMLの編集-「リンク変更」「Categories」「<%category_name>」

すべての <%category_name> の後ろに赤字部分を追加します。
※初期状態では1箇所のみ。複数列[B]は3箇所。

<li><a href="<%category_link>"><%category_name><span class="ccount">(<%category_count>)</span></a></li>

変更場所 ▼ スタイルシートの編集

以下をスタイルシートに追加します。
100%にするとカテゴリの名前と同じサイズになります。

span.ccount{
  font-size: 84.1%; /* 文字サイズ */
  padding-left: 3px; /* 余白 */
}

累計数を2行目に表示

カテゴリ複数列2行

変更場所 ▼ スタイルシートの編集

上記で追加したスタイルシートを変更します。
テキスト左寄せの場合は、上下余白の行を 3px 5px 3px としてください。

span.ccount{
  font-size: 80%; /* 文字サイズ */
  padding-left: 0px; /* 余白 */
  display: block;
}
#menunavi ul ul.menu-c li a {
  padding: 3px 0px 3px; /* 上下余白3px */
}

スタイルシートとプラグインのHTMLに以下の変更を加えます。

変更場所 ▼ スタイルシートの編集

以下をスタイルシートに追加します

.cateカテゴリ番号{
 display: none;
}

カテゴリ番号は「blog-category-0.html」の「0」の部分です。プラグインで表示したくないカテゴリの番号を入れます。複数選択する場合は後ろに「,.cateカテゴリ番号」を追記します。

.cate0,.cate1,.cate5{
 display: none;
}

とすると、番号「0」「1」「5」のカテゴリが非表示になります。

変更場所 ▼ HTMLの編集-「リンク変更」-Categories

赤字部分を追記します。

■追記するのは「nosub」「sub_hasnext」「sub_end」の行です。

<!--category_nosub--><li class="cate<%category_no>"><!--/category_nosub-->
<!--category_sub_hasnext--><li class="cate<%category_no>"><!--/category_sub_hasnext-->
<!--category_sub_end--><li class="cate<%category_no>"><!--/category_sub_end-->

カテゴリを複数列並べる変更をしている場合は以下の箇所に赤字部分を加えます。
親子カテゴリを使用していない:1箇所
親子カテゴリを作成している:3箇所

<li class="cate<%category_no>"><a href="<%category_link>"><%category_name></a></li>

変更場所 ▼ HTMLの編集-「リンク変更」

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->

上記箇所をすべて下記に書き換えるとJavascriptが優先されます。プルダウンできない場合はこちらに切り替えてください。初期状態では、Categoriesに2箇所、Recent EntriesとCommentsに1箇所ずつの計4箇所あります。その他プラグインを追加した場合も該当箇所を書き換えます。

<li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';">

私のPC環境(CPU1.2GHz、メモリ512MB-VRAM共有)において、『Opera9』『IE7』のJavascriptマウスオーバー時のカーソル動作が遅くなったので、振り分けにしました。恐らく低スペックなPC環境によるものではないかと思います。

IE6がちょうどいいPC環境(CPU1.2GHz、メモリ512MB-VRAM共有)では、透過するとカーソル動作が少し遅くなるので、IE6以下は除外しています。IE6でも透過する場合は以下の変更をしてください。
(全然動かせないくらい遅くなるわけではありません)

変更場所 ▼ スタイルシートの編集-検索ワード「alpha」

「li」と「a」のあいだにある「>」を削除します。

#menunavi li li a,li #urtag {
  min-height: 1px;
  filter: alpha(opacity=90);
}

ユーザータグを使っている場合は以下も削除。

#menunavi #urtag li a {
  filter:alpha(opacity=100);
}

hellblau-i

検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。

paza-hellblau-i
■hellblau-i
サンプル

右-back8 左-back8
右ハーフ-back8 左ハーフ-back8

hellblau-s : 背景2種
右-back8 左-back4

3カラム
back4 back8

履歴

上部画像の差し替え

用意する画像の横幅は メイン幅 - 50px のものが最適です。

【hellblau】back画像使用

01 02

変更場所 ▼ スタイルシートの編集

(1)幅変更 --- */ の 以下の箇所を丸ごと変更します

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}

変更後

#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwb-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0; }

「bw」の直後に「b」を入れます。他のサイズの場合も同様です。
bwb-446、bwb-486、bwb-536、bwb-576、bwb-640、bwb-720

(2)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12.jpg) 0px 20px no-repeat;

(3)全体背景--- のbackgroundを以下に変更します 「left」「top」「repeat」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
}

数値を4~9に変更することで背景色が変化します。
back4、back5、back6、back7、back8、back9
back4、back5であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※#3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back5.gif) left top repeat;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back6.gif) left top repeat;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back7.gif) left top repeat;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back9.gif) left top repeat;

(4)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。記事上部画像が、sky11,12であれば、#66a360でも違和感ないと思います。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(5)サイドバーリンク色--- 背景画像に合わせて文字色を変更します
※全体背景がback4,6などのときは#000000でもよいかもしれません。

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します

※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau】bh-画像使用

03 04

変更場所 ▼ スタイルシートの編集

(1)初期状態ではバランスが悪いので、左右を入替えるか、記事タイトルデザインを反転させた方がよいかもしれません。
※ここでは左右を入替えることとします(左サイドバー)。

/* left → right right → left ------------------- 左右入替え --- */
div.main{ float: right; }
div.right{ float:left; }
#b-top{ text-align: right; }
ul.t-login{ text-align: left; }

最後のul.t-loginの1行は、ダウンロード時期によっては必要ありません。

(2)幅変更 --- */ の 以下の箇所を丸ごと変更します

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}

■変更後:左サイドバーのとき

#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwa-536.gif);
background-position: 225px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0; }

「bw」の直後に「a」を入れます。他のサイズの場合も同様です。
bwa-486、bwa-536、bwa-576、bwa-640、bwa-720
positionにはサイドバーと同じ数値を入れます→「255px」

■変更後:右サイドバーのとき

#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwar-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0; }

「bw」の直後に「ar」を入れます。他のサイズの場合も同様です。
bwar-486、bwar-536、bwar-576、bwar-640、bwar-720
positionには「0px」を入れます

(3)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12.jpg) 0px 20px no-repeat;

(4)全体背景--- のbackgroundを以下に変更します

■変更後:左サイドバーのとき 「bhr-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bh-04、bh-05、bh-06、bh-07、bh-08、bh-09
bh-04、bh-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき 「bhr-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bhr-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bhr-04、bhr-05、bhr-06、bhr-07、bhr-08、bhr-09
bhr-04、bhr-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※#3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-04.gif) center top repeat-y;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-05.gif) center top repeat-y;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-06.gif) center top repeat-y;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-07.gif) center top repeat-y;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-09.gif) center top repeat-y;

(5)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。記事上部画像が、sky11,12であれば、#66a360でも違和感ないと思います。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(6)サイドバーリンク色--- 背景画像に合わせて文字色を変更します

※全体背景がback4,6などのときは#000000でもよいかもしれません。

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します
※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau-s】bh-画像

03 04

【hellbalau】bh-画像使用と同じ見た目になります。画像が表示されないときは真っ白になってしまうので、可変化しないのであれば、【hellbalau】をbh-画像使用にカスタマイズした方がよいかもしれません。

変更場所 ▼ スタイルシートの編集

(1)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11l.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12l.jpg) 0px 20px no-repeat;

(2)サイドバー画像 --- */ の 以下の箇所を変更します

■変更後:左サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08b-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08b」を入れます。他のサイズの場合も同様です。
08b-205、08b-215、08b-225、08b-235、08b-237、08b-245、08b-255、08b-265、08b-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04b-237、05b-237、06b-237、07b-237、08b-237、09b-237
04b-、05b-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08br-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08br」を入れます。他のサイズの場合も同様です。
08br-205、08br-215、08br-225、08br-235、08br-237、08br-245、08br-255、08br-265、08br-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04br-237、05br-237、06br-237、07br-237、08br-237、09br-237
04br-、05br-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:左右共通

div.right{ background: #9fbfcf ; }/* 必要に応じて削除 */

上記を丸ごと削除します。

(4)全体背景--- のbackgroundを以下に変更します

■変更後:左サイドバーのとき 「bh-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bh-04、bh-05、bh-06、bh-07、bh-08、bh-09
bh-04、bh-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき 「bhr-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bhr-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bhr-04、bhr-05、bhr-06、bhr-07、bhr-08、bhr-09
bhr-04、bhr-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-04.gif) center top repeat-y;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-05.gif) center top repeat-y;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-06.gif) center top repeat-y;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-07.gif) center top repeat-y;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-09.gif) center top repeat-y;

(5)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。記事上部画像が、sky11,12であれば、#66a360でも違和感ないと思います。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(6)サイドバーリンク色--- 背景画像に合わせて文字色を変更します

※全体背景がback4,6などのときは#000000でもよいかもしれません。

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します
※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau-s】異なる背景画像

06 07

変更場所 ▼ スタイルシートの編集

(1)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11l.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12l.jpg) 0px 20px no-repeat;

(2)サイドバー画像 --- */ の 以下の箇所を変更します

■変更後:左サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08b-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08b」を入れます。他のサイズの場合も同様です。
08b-205、08b-215、08b-225、08b-235、08b-237、08b-245、08b-255、08b-265、08b-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04b-237、05b-237、06b-237、07b-237、08b-237、09b-237
04b-、05b-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08br-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08br」を入れます。他のサイズの場合も同様です。
08br-205、08br-215、08br-225、08br-235、08br-237、08br-245、08br-255、08br-265、08br-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04br-237、05br-237、06br-237、07br-237、08br-237、09br-237
04br-、05br-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:左右共通

div.right{ background: #9fbfcf ; }/* 必要に応じて削除 */

上記を丸ごと削除します。

(4)全体背景--- のbackgroundを以下に変更します 「back4」「left」「top」「repeat」

body {
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
}

数値を4~9に変更することで背景色が変化します。
back4、back5、back6、back7、back8、back9

※#69a9c9は画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back5.gif) left top repeat;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back6.gif) left top repeat;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back7.gif) left top repeat;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back9.gif) left top repeat;

(5)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは#3389bbで統一。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(6)サイドバーリンク色--- 背景画像に合わせて文字色を変更します

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します
※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau3カラム】back画像使用

01 02

変更場所 ▼ スタイルシートの編集

(1)幅変更 --- */ の 以下の箇所を丸ごと変更します

#pagetop{ width: 886px ;}  /* 全体幅 メイン+左+右*/
div.leftside{ width: 681px ;}  /* メイン幅+左サイド幅 */
div.main{ width: 476px ;}  /* メイン幅 */
div.left{ width: 205px ;}  /* 左サイド幅 */
div.right{ width: 205px ;}  /* 右サイド幅 */
#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-476.gif);
background-position: 205px 0px;
background-repeat: repeat-y;
}

変更後

#pagetop{ width: 896px ;}  /* 全体幅 メイン+左+右*/
div.leftside{ width: 691px ;}  /* メイン幅+左サイド幅 */
div.main{ width: 486px ;}  /* メイン幅 */
div.left{ width: 205px ;}  /* 左サイド幅 */
div.right{ width: 205px ;}  /* 右サイド幅 */
#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwb-486.gif);
background-position: 205px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0px; }

全体幅とメイン幅(3行目まで)を10px増やします。これは他の[S][M][L][LL]サイズも同様です。
(例)L 956px 746px 536px
「bw」の直後に「b」を入れ、ここも10増やします。他のサイズの場合も同様です。
bwb-446、bwb-486、bwb-536、bwb-576、bwb-640、bwb-720

(2)記事上部画像--- の画像を 9→11 に、marginを 20→25 に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11s.jpg) 0px 20px no-repeat;
padding-top: 325px;
margin: 0 25px;

同様に固定ページの画像も 10→12 に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12s.jpg) 0px 20px no-repeat;

(3)全体背景--- のbackgroundを以下に変更します 「left」「top」「repeat」

body {
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
}

数値を4~9に変更することで背景色が変化します。
back4、back5、back6、back7、back8、back9
back4、back5であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※#3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back5.gif) left top repeat;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back6.gif) left top repeat;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back7.gif) left top repeat;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back9.gif) left top repeat;

(4)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。back8,9であれば、#3490c0など。

background: #63a9c6;   /* 日付背景色 */
border-bottom: 1px #63a9c6 solid;   /* タイトル下線色 */
color: #63a9c6;   /* タイトルリンク色 */
color: #63a9c6;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #63a9c6;   /* ブログタイトル */

(5)サイドバーリンク色--- 背景画像に合わせて文字色を変更します
※他候補としては#ffff00、#ffee00など。

color: #000000 ; /* 本文リンク */

(6)plugin-calender--- カレンダーの土曜日が見難いので変更します

※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

paeo-menu

検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください

■paeo-menue : プレビュー 
paeo-menue

■paeo-menue-i : プレビュー
paeo-menu-i

履歴

paeo-menue / paeo-menu-i

pazo-menue または pazo-menue-i のHTMLとスタイルシートを変更します。
※menue-i の1カラムを使用する場合は、先に menue-i への変更を済ませてください。

変更場所 ▼ HTMLの編集

【1】検索ワード「左右変更」

<body class="side-r"><!--左右変更-->
<div class="size-m"><!--サイド幅変更-->

上記を以下に変更(side-/size-の削除)

<body>

【2】検索ワード「"main"」

<div class="main">
 <div class="m-main">

上記を以下に変更(mainの削除)

<div class="m-main">

【3】検索ワード「"right"」 すぐ上の /div ふたつ~

</div>
</div>
<div class="right">
 <div class="r-main">
<!--plugin-->
(省略)
<!--/plugin-->
 </div>
</div>
<ul id="b-top"><li><a href="#header">Top</a></li></ul>

上記を以下に変更(赤字すべて削除。/div ひとつだけ残す)

</div>

【4】検索ワード「/body」最下部

</div>
</body>

上記を以下に変更(/body の上にある /div を1つ削除)

</body>

変更場所 ▼ スタイルシートの編集

【5】検索ワード「幅変更 ---」

div.main{ width: 568px ; /* メイン */
   margin-right: 0px ; /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; } /* 可変 左右入替え right ←→ left */

上記を丸ごと以下に変更。

div.m-main{ width: 100% ;} /* メイン */

【6】検索ワード「body ---- */」部分
※menueとmenue-iで若干数値は異なりますが、変更部分は同じです
(.side-l #pagetop ~ .side-l div.rightまで)

.side-l #pagetop{
background: #f8f8f0 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/10-right.jpg) right top repeat-y;
}
div.main{
  clear: both;
  float: left;
  overflow: hidden;
}
div.right{
  width: 230px;
  float: right;
  overflow: hidden;
  margin-bottom:15px;
}
.side-l div.main{ float: right ; }
.side-l div.right{ float: left ; }

上記を丸ごと以下に変更(使用テンプレートによってどちらかを選択)。

【pazo-menu】を使用

div.container{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-left.jpg) right top repeat-y;
}
div.outhead{
margin: 0 auto;
background: #dbd3bc url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/02-right.jpg) left top repeat-y;
}
div.inhead{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/02-left.jpg) right top repeat-y;
}
div.m-main{
  clear: both;
  overflow: hidden;
  padding-top: 20px; /* メイン上余白 */
  padding-bottom: 12px; /* メイン下余白 */
  text-align: left;
}

【pazo-menu-i】を使用

div.container{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/10-right.jpg) right top repeat-y;
}
div.m-main{
  clear: both;
  overflow: hidden;
  padding-top: 20px; /* メイン上余白 */
  padding-bottom: 12px; /* メイン下余白 */
  text-align: left;
}

【7】検索ワード「body ---- */」【6】の少し下
※menueとmenue-iで若干数値は異なりますが、変更部分は同じです
(div.m-main ~ div.r-main tableまで)

div.m-main{
  padding-top: 20px; /* メイン上余白 */
  text-align: left;
  overflow: hidden;
}
div.main ul.navi,div.p-third,div.entry-m,div.entry-p{
  margin-right: 11px; /* メイン左右余白 - 右サイド */
  margin-left: 20px;
}
.side-l div.main ul.navi,.side-l div.p-third,.side-l div.entry-m,.side-l div.entry-p{
  margin-right: 20px; /* メイン左右余白 - 左サイド */
  margin-left: 11px;
}
div.m-main table{ font-size: 13.12px; }
div.r-main{
  margin: 0 16px 0 14px;
  padding-top: 18px; /* サイド上余白 */
  text-align: left;
}
.side-l div.r-main{
  margin: 0 14px 0 16px;
  text-align: left;
}
div.r-main table{ font-size: 13.12px; }

上記を丸ごと以下に変更。

div.m-main ul.navi,div.p-third,div.entry-m,div.entry-p{
  margin-right: 21px; /* メイン左右余白 */
  margin-left: 21px;
}
div.m-main table{ font-size: 13.12px; }

【8】【pazo-menu】のみ 検索ワード「header footer --- */」

下記部分を丸ごと削除。

.outhead{
margin: 0 auto;
background-color: #dbd3bc;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/04-right.jpg);
background-position: left top;
background-repeat: repeat-y;
}
.side-l .outhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/02-left.jpg);
background-position: right top;
}

【9】検索ワード「bottom --- */」「size-m --- */」

「bottom --- */」部分と最下部の「size-m --- */」~「size-w --- */」は不要なので削除してください。

備考

幅変更の手順を参考にして、全体幅やリンク幅を調整。必要であれば、文字サイズも調整。幅が狭い場合は、フッターの文字サイズを少し小さくした方がいいかもしれません。

#footer{ font-size: 69%; }

文字サイズを大きくする場合は、メイン左右の余白を増やした方がいいかもしれません。

div.m-main ul.navi,div.p-third,div.entry-m,div.entry-p{
  margin-right: 25px; /* メイン左右余白 */
  margin-left: 25px;
}

■メニューからHomeリンクを右上に移動する場合

※右上メニューに赤字を追加

<ul><li><a href="./">Home</a></li><li><a href="./archives.html">Archives</a></li>...

リンク変更部分からHomeリンクを削除
※最初のリンクには class="home" をつける

<!--リンク変更-->
<ul>
<li class="home"><a href="./">About</a></li>

  1. メニューリンクの幅と個数を決める→154pxで4個
  2. 【pazo-menue】
    メニューの幅を計算する→154*4=616px
    これに余白分の14px(固定)を加えたものが全体幅になります。
    616+14=630px
    【pazo-menue-i】
    メニューの幅を計算する→154*4=616px
    これに余白分の12px(固定)を加えたものが全体幅になります。
    616+12=628px
  3. スタイルシートの幅変更に各値を入れる

【pazo-menue】

#pagetop{ width: 630px ; } /* 全体幅 (メイン + サイド) */
div.m-main{ width: 100% ;} /* メイン */
#menunavi li{ width: 154px; } /* メニューリンク */

【pazo-menue-i】

#pagetop{ width: 628px ; } /* 全体幅 (メイン + サイド) */
div.m-main{ width: 100% ;} /* メイン */
#menunavi li{ width: 154px; } /* メニューリンク */