Paroday

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

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

pazw-haengen

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

pazw-haengen
■pazo-haengen　/　プレビュー 
背景・メニュー色サンプル
01  02  03  04  05  06  07
カスタマイズ
日付背景バリエーション
ユーザータグ、トラックバック、リンク
画像差し替え/全体幅自由指定・カテ3列
可変+固定
カレンダー/個別ページ以外コメント表示

履歴

日付背景の変更

変更場所 ▼ スタイルシートの編集-「日付画像」

『h2.c-title』の部分が「Comment」や「Trackback」の背景画像。
『.dayMon』や『.daySun』の部分が曜日ごとの日付背景画像になります。

url( )内のアドレスを変更すると画像が変わります。

日付画像
こちらで用意しているのは「ehan01～14」までと「ehan01g～14g」までの画像です。数値を変えると色が変わり、数値の後ろに『g』を加えると画像が微妙に変わります。

以下のようにすると日曜日は赤色、それ以外の曜日は緑色になります。

.dayMon,.dayTue,.dayWed,.dayThu,.dayFri,.daySat{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan05g.gif) left top no-repeat;
}
.daySun{ /* 日曜日画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan09g.gif) left top no-repeat;
}

曜日ごとに色を変える場合は上記を以下のように変更します。

.dayMon{ /* 月 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan05.gif) left top no-repeat;
}
.dayTue{ /* 火 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan06.gif) left top no-repeat;
}
.dayWed{ /* 水 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan04.gif) left top no-repeat;
}
.dayThu{ /* 木 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan07.gif) left top no-repeat;
}
.dayFri{ /* 金 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan10.gif) left top no-repeat;
}
.daySat{ /* 土 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan01.gif) left top no-repeat;
}
.daySun{ /* 日 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/ehan09.gif) left top no-repeat;
}

プラグインタイトル左横画像の変更

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

『h2.s-title』の部分がサイドバープラグインの背景画像。
『h2.ptitle』の部分がプラグイン3の背景画像になります。

url( )内のアドレスを変更すると画像が変わります。

プラグインタイトル左横画像
こちらで用意しているのは「sthan01～8」までと「sthan01b～08b」「sthan01c～08c」までの画像です。数値を変えると色が変わり、数値の後ろに『b』を加えると少し縦長に、『c』を加えるとさらに大きくなります。文字サイズに合わせて調整してください。

文字色は color : #000000 の部分で変更。

/* --- side --- */
h2.s-title{
color: #000000; /* 背景 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sthan01.gif);
/* --- plugin3 --- */
.p-third h2.ptitle{
background-color: #f8f8f6; /* 背景 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sthan01b.gif);

記事本文下の投稿時間の左横にリンクがあります。ログイン状態のときのみ編集画面に飛びます。

menue

記事の投稿時間を消す

変更場所 ▼ HTMLの編集-検索ワード「class="time"」

<li class="time"><%topentry_hour>:<%topentry_minute></li>

上記部分を丸ごと削除します。
メニューの新着プラグインの投稿時間を消す場合は下記も削除します。

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

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

文字サイズ[ big ]

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

下記のように数値部分を変更すると文字の大きさを変えられます。
%指定をやめてpx指定にする場合は94%→15.04px / 82%→13.12px　に変更してください。

/* --- big 94% small 82% ---------------------------------文字サイズ--- */

h2.e-title{ font-size: 94%; }   /* 記事タイトル */

コメントの絵文字を追加

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

変更箇所は２つあります「<!--comment_area-->」と「<!--edit_area-->」
Commentラベルの下に赤字部分を追加してください。

<dt><label for="comment">Comment</label></dt>
<dd><script type="text/javascript" src="<%server_url>load.js"></script></dd>

個別ページ上部ナビを２行に変更・削除 : 記事タイトルが長いブログ向け

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

ナビ下余白を調整し、ul.navi li の inline を block に変え、margin を 0 0 3px 10px とします。3pxは「次のエントリ」と「前のエントリ」の上下間隔です。
※ダウンロード時期によってはナビ下余白の10pxが最初から2pxとなっています。

ul.navi{
  list-style-type: none;
  margin: 0 0 2px; /* ナビ下余白10px */
  padding: 1px 1px;
  text-align: right;
  color: #eeeeee;
}
ul.navi li{
  display: block;
  margin: 0 0 3px 10px;
  padding: 0;
  line-height: 1.1;
}

個別ページ上部ナビリンクを削除する場合

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

div class="m-main" の少し下にある以下の部分を削除。

<!--permanent_area-->
<ul class="navi">
（略）
</ul>
<!--/permanent_area-->

上部画像の色変更

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

上下部画像のアドレス末尾に「-01」などを加えます。あわせて画像が表示されないときのためにbackground-colorに背景色を指定します。ない方がいい場合はbackground-colorの1行を削除してください。

横線  01プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #63bace;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-01.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-01.jpg);

青  02プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #69a7ce;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-02.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-02.jpg);

青緑  03プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #71bac3;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-03.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-03.jpg);

緑  04プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #87bc76;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-04.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-04.jpg);

黄緑  05プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #b9d064;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-05.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-05.jpg);

茶  06プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #B59481;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-06.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-06.jpg);

黒  07プレビュー

#header{ /* 上部画像 han○○○.jpg に全体幅 */
background-color: #a4a4a4;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788-07.jpg);
#footer{ /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b-07.jpg);

メニュー色変更

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

メニュー全体背景色～子カテゴリまでを変更します。

青  02プレビュー

02

.hdcolor,address{
  background: #3979a9;    /* メニュー全体背景色 */
}
#menunavi li a{
  background: #3979a9;    /* リンク背景色1 */
  border-left: 1px #4383b3 solid;  /* 左線色1 */
  line-height: 28px;    /* メニュー高さ */
  color: #ffffff;    /* 文字色 */
}
#menunavi li.end a{
  border-right: 1px #4383b3 solid;    /* 左線色1と同色 */
}
#menunavi li a:hover{
  background: #cf6050;    /* -カーソル接触リンク背景色 */
  color: #ffffff;    /* 文字色 */
}
#menunavi li li a:hover {
  border-color: #c03933;    /* -カーソル接触線色 */
}
#menunavi li li a {
  padding: 6px 5px 7px;    /* リンク内高さ6|7px */
  height: auto;
  letter-spacing: 0px;
  line-height: 1.1;
  border-top: 1px #4081b1 solid;    /* リンク上線色2 */
}
#menunavi li li a {
  background: #3979ac;    /* リンク背景色2 */
}
#menunavi li li li a {/* 子カテゴリ */
  border-top: 1px #4989b9 solid;    /* リンク上線色3 */
}
#menunavi li li li a {
  background: #4080b0;    /* リンク背景色3 */
}

青緑  03プレビュー

03

.hdcolor,address{
  background: #3990a0;    /* メニュー全体背景色 */
}
#menunavi li a{
  background: #3990a0;    /* リンク背景色1 */
  border-left: 1px #439aaa solid;    /* 左線色1 */
  line-height: 28px;    /* メニュー高さ */
  color: #ffffff;    /* 文字色 */
}
#menunavi li.end a{
  border-right: 1px #439aaa solid;    /* 左線色1と同色 */
}
#menunavi li a:hover{
  background: #cf6050;    /* -カーソル接触リンク背景色 */
  color: #ffffff;    /* 文字色 */
}
#menunavi li li a:hover {
  border-color: #c03933;    /* -カーソル接触線色 */
}
#menunavi li li a {
  padding: 6px 5px 7px;    /* リンク内高さ6|7px */
  height: auto;
  letter-spacing: 0px;
  line-height: 1.1;
  border-top: 1px #4099a7 solid;    /* リンク上線色2 */
}
#menunavi li li a {
  background: #3993a0;    /* リンク背景色2 */
}
#menunavi li li li a {/* 子カテゴリ */
  border-top: 1px #49a0ad solid;    /* リンク上線色3 */
}
#menunavi li li li a {
  background: #4097a5;    /* リンク背景色3 */
}

緑  04プレビュー

04

.hdcolor,address{
  background: #599060;    /* メニュー全体背景色 */
}
#menunavi li a{
  background: #599060;    /* リンク背景色1 */
  border-left: 1px #649a6c solid;  /* 左線色 */
  line-height: 28px;    /* メニュー高さ */
  color: #ffffff;    /* 文字色 */
}
#menunavi li.end a{
  border-right: 1px #649a6c solid;    /* 左線色1と同色 */
}
#menunavi li a:hover{
  background: #80c020;    /* -カーソル接触リンク背景色 */
  color: #ffffff;    /* 文字色 */
}
#menunavi li li a:hover {
  border-color: #80bb20;    /* -カーソル接触線色 */
}
#menunavi li li a {
  padding: 6px 5px 7px;    /* リンク内高さ6|7px */
  height: auto;
  letter-spacing: 0px;
  line-height: 1.1;
  border-top: 1px #619864 solid;    /* リンク上線色2 */
}
#menunavi li li a {
  background: #599360;    /* リンク背景色2 */
}
#menunavi li li li a {/* 子カテゴリ */
  border-top: 1px #66a06a solid; /* リンク上線色3 */
}
#menunavi li li li a {
  background: #609764;    /* リンク背景色3 */
}

黄緑  05プレビュー

05

.hdcolor,address{
  background: #5f7030;    /* メニュー全体背景色 */
}
#menunavi li a{
  background: #5f7030;    /* リンク背景色1 */
  border-left: 1px #6a7b3b solid;  /* 左線色 */
  line-height: 28px;    /* メニュー高さ */
  color: #ffffff;    /* 文字色 */
}
#menunavi li.end a{
  border-right: 1px #6a7b3b solid;    /* 左線色と同色 */
}
#menunavi li a:hover{
  background: #7fa030;    /* -カーソル接触リンク背景色 */
  color: #ffffff;    /* 文字色 */
}
#menunavi li li a:hover {
  border-color: #7fa330;    /* -カーソル接触線色 */
}
#menunavi li li a {
  padding: 6px 5px 7px;    /* リンク内高さ6|7px */
  height: auto;
  letter-spacing: 0px;
  line-height: 1.1;
  border-top: 1px #677837 solid;    /* リンク上線色2 */
}
#menunavi li li a {
  background: #617130;    /* リンク背景色2 */
}
#menunavi li li li a {/* 子カテゴリ */
  border-top: 1px #6e7f3f solid;    /* リンク上線色3 */
}
#menunavi li li li a {
  background: #667737;    /* リンク背景色3 */
}

茶  06プレビュー

06

.hdcolor,address{
  background: #554030;    /* メニュー全体背景色 */
}
#menunavi li a{
  background: #554030;    /* リンク背景色1 */
  border-left: 1px #5c4c3c solid;    /* 左線色1 */
  line-height: 28px;    /* メニュー高さ */
  color: #ffffff;    /* 文字色 */
}
#menunavi li.end a{
  border-right: 1px #5c4c3c solid;    /* 左線色1と同色 */
}
#menunavi li a:hover{
  background: #463330;    /* -カーソル接触リンク背景色 */
  color: #ffffff;    /* 文字色 */
}
#menunavi li li a:hover {
  border-color: #403030;    /* -カーソル接触線色 */
}
#menunavi li li a {
  padding: 6px 5px 7px;    /* リンク内高さ6|7px */
  height: auto;
  letter-spacing: 0px;
  line-height: 1.1;
  border-top: 1px #5b4937 solid;    /* リンク上線色2 */
}
#menunavi li li a {
  background: #574230;    /* リンク背景色2 */
}
#menunavi li li li a {/* 子カテゴリ */
  border-top: 1px #5f4d3d solid;    /* リンク上線色3 */
}
#menunavi li li li a {
  background: #594838;    /* リンク背景色3 */
}

黒  07プレビュー

07

.hdcolor,address{
  background: #3a3a3a;    /* メニュー全体背景色 */
}
#menunavi li a{
  background: #3a3a3a;    /* リンク背景色 */
  border-left: 1px #464646 solid;    /* 左線色1 */
  line-height: 28px;    /* メニュー高さ */
  color: #ffffff;    /* 文字色 */
}
#menunavi li.end a{
  border-right: 1px #464646 solid;    /* 左線色1と同色 */
}
#menunavi li a:hover{
  background: #000000;    /* -カーソル接触リンク背景色 */
  color: #ffffff;    /* 文字色 */
}
#menunavi li li a:hover {
  border-color: #111111;    /* -カーソル接触線色 */
}
#menunavi li li a {
  padding: 6px 5px 7px;    /* リンク内高さ6|7px */
  height: auto;
  letter-spacing: 0px;
  line-height: 1.1;
  border-top: 1px #444444 solid;    /* リンク下線色2 */
}
#menunavi li li a {
  background: #3b3b3b;    /* リンク背景色2 */
}
#menunavi li li li a {/* 子カテゴリ */
  border-top: 1px #4c4c4c solid;    /* リンク下線色3 */
}
#menunavi li li li a {
  background: #434343;    /* リンク背景色3 */
}

【入替え】色々なプラグインをメニューに入れる

プレビュー

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

メニューリンクの幅や個数に合わせて調整してください。
プルダウンリンクは <!--[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);
}

固定幅[ SS ]

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

赤字部分を変更します。ss（小文字のエスエス）

<body class="size-ss"><!--サイド幅変更-->

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

/* --- 変更後 : SS ---------------------------------------- 幅変更 --- */
/* SS  size-ss (204px)  703px  497px  (5個124|計620) (5個139|計695) */

#pagetop,#header,#footer{
  width: 703px;}  /* 全体幅 (サイド+メイン+2)px */
div.main{ width: 497px;}  /* メイン */
#menunavi li{ width: 124px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 124px;  /* 上記と同じ値 */
}
/* 5個リンク幅124pxの場合:合計値 */ #menunavi ul { width: 620px; }
/* 5個リンク幅139pxの場合:合計値 */ #menunavi ul { width: 695px; }

/* 上部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han703.jpg);
/* 下部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han703b.jpg);

メニューリンクの数は5個（124px または 139px）
リンク幅左側の124pxは、Commentを右端にもってきてもはみ出ないサイズ
右側の139pxは、右端までピッタリのサイズ
どちらか片方を選びます。
合計値には(メニューリンク幅×リンク個数)の値を入れてください。

固定幅[ S ]

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

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

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

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

/* --- 変更後 : S ---------------------------------------- 幅変更 --- */
/* S  size-s (217px)  748px  529px  (5個136|計680) (5個148|計740) */

#pagetop,#header,#footer{
  width: 748px;}  /* 全体幅 (サイド+メイン+2)px */
div.main{ width: 529px;}  /* メイン */
#menunavi li{ width: 136px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 136px;  /* 上記と同じ値 */
}
/* 5個リンク幅136pxの場合:合計値 */ #menunavi ul { width: 680px; }
/* 5個リンク幅148pxの場合:合計値 */ #menunavi ul { width: 740px; }

/* 上部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han748.jpg);
/* 下部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han748b.jpg);

メニューリンクの数は5個（136px または 148px）
リンク幅左側の136pxは、Commentを右端にもってきてもはみ出ないサイズ
右側の148pxは、右端までピッタリのサイズ
どちらか片方を選びます。
合計値には(メニューリンク幅×リンク個数)の値を入れてください。

固定幅[ M ]

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

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

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

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

/* --- 変更後 : M ---------------------------------------- 幅変更 --- */
/* M  size-m (230px)  788px  556px  (5個142|計710) (5個156|計780) */

#pagetop,#header,#footer{
  width: 788px;}  /* 全体幅 (サイド+メイン+2)px */
div.main{ width: 556px;}  /* メイン */
#menunavi li{ width: 142px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 142px;  /* 上記と同じ値 */
}
/* 5個リンク幅142pxの場合:合計値 */ #menunavi ul { width: 710px; }
/* 5個リンク幅156pxの場合:合計値 */ #menunavi ul { width: 780px; }

/* 上部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788.jpg);
/* 下部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han788b.jpg);

メニューリンクの数は5個（142px または 156px）
リンク幅左側の142pxは、Commentを右端にもってきてもはみ出ないサイズ
右側の156pxは、右端までピッタリのサイズ
どちらか片方を選びます。
合計値には(メニューリンク幅×リンク個数)の値を入れてください。

固定幅[ L ]

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

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

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

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

/* --- 変更後 : L ---------------------------------------- 幅変更 --- */
/* L  size-l (243px)  836px  597px  (5個155|計775) (6個138|計828) */

#pagetop,#header,#footer{
  width: 836px;}  /* 全体幅 (サイド+メイン+2)px */
div.main{ width: 597px;}  /* メイン */
#menunavi li{ width: 155px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 155px;  /* 上記と同じ値 */
}
/* 5個リンク幅155pxの場合:合計値 */ #menunavi ul { width: 775px; }
/* 6個リンク幅138pxの場合:合計値 */ #menunavi ul { width: 828px; }

/* 上部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han836.jpg);
/* 下部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han836b.jpg);

メニューリンクの数は5個（155px）または6個（138px）
リンク幅左側の155pxは、Commentを右端にもってきてもはみ出ないサイズ
右側の138pxは、リンクを6個にすると右端までピッタリのサイズ
どちらか片方を選びます。
合計値には(メニューリンク幅×リンク個数)の値を入れてください。

固定幅[ LL ]

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

赤字部分を変更します。ll（小文字のエルエル）

<body class="size-ll"><!--サイド幅変更-->

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

/* --- 変更後 : LL ---------------------------------------- 幅変更 --- */
/* LL  size-ll (256px)  946px  688px  (6個147|計882) (7個134|計938) */

#pagetop,#header,#footer{
  width: 946px;}  /* 全体幅 (サイド+メイン+2)px */
div.main{ width: 688px;}  /* メイン */
#menunavi li{ width: 147px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 147px;  /* 上記と同じ値 */
}
/* 6個リンク幅147pxの場合:合計値 */ #menunavi ul { width: 882px; }
/* 7個リンク幅134pxの場合:合計値 */ #menunavi ul { width: 938px; }

/* 上部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han946.jpg);
/* 下部画像 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han946b.jpg);

メニューリンクの数は6個（147px）または7個（134px）
リンク幅左側の147pxは、Commentを右端にもってきてもはみ出ないサイズ
右側の134pxは、リンクを7個にすると右端までピッタリのサイズ
どちらか片方を選びます。
合計値には(メニューリンク幅×リンク個数)の値を入れてください。

可変＋固定幅

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

ここではサイド幅を「size-m」とします。

pagetop と container を 上にあるheader の直前に移動させます。

<div id="pagetop" class="side-r"><!--左右入替え-->
<div class="container">
<div id="header">

（上記に移動）
<div class="hdcolor" id="menunavi"><!--リンク変更-->

最下部の footer の上にある </div> 2つを下に移動。

（下に移動）
<div id="footer">
<a href="http://paro2day.blog122.fc2.com/" title="Paroday" target="_blank">Designed by Paroday</a>&nbsp;/&nbsp;<%ad> <%ad2></div>
</div>
</div>

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

#pagetop,#header,#footer{
  width: 788px;}  /* 全体幅(サイド+メイン+2)px */
div.main{ width: 556px;}  /* メイン */

上記を丸ごと以下に入れ替え。「,#header,#footer」の消し忘れ注意。

#pagetop{
  width: 94%; /* 全体幅(サイド+メイン+2)px */
  max-width: 1000px;  /* 最大幅 */
  min-width: 710px;  /* 最小幅（メニュー全体幅） */
}
/* メニューリンクの合計値: リンク幅(142) * リンク数(5) = 710px */
#menunavi ul { width: 710px; }
}
div.main{
  width: 100%;  /* メイン */
  margin-right: -230px ;  /* 左右入替え right ←→ left */
}
div.m-main{ margin-right: 230px; }  /* 左右入替え right ←→ left */

赤字部分は画像に合わせて調整してください。最大幅には「画像の幅」を、最小幅には「メニュー全体幅（リンク幅×リンク数）」を入れるとよいかもしれません。ひとつめの margin-right にはサイド幅のマイナス値（ここでは「m」なので-230px）。ふたつめにはサイド幅をそのまま入れます。
[例]「size-l」なら、-243px と 243px が入る

画像の色は han1000,han1000-01,han1000-02...han1000-07 の8種類。
下部画像も同様に han1000b,han1000b-01,han1000b-02...han1000b-07となります。

#headerと#footerの画像アドレスと margin: 0 auto; をそれぞれ変更。#footerの画像の高さとテキスト位置には同じ数値を入れる。

#header{  /* 上部画像 han○○○.jpg に全体幅 */
background-color: #63bace;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han1000.jpg);
height: 141px;  /* 画像の高さ */
background-position: left top;
background-repeat: no-repeat;
text-align: center;
margin: 3px 3px 0;

#footer{  /* 下部画像 han○○○b.jpg に全体幅 */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/han1000b.jpg);
background-position: left bottom;
background-repeat: no-repeat;
text-align: center;
margin: 0 3px 3px;
height: 34px;  /* 画像の高さ */
line-height: 34px;  /* テキスト位置 */

containerのborderを以下に変更。

#menunavi,address{
  margin: 0 3px;  /* メニュー左右余白 */
}
.container{  /* 左右枠線 */
  border: 1px #e0e0e0 solid;
  min-height: 1px;
}

3pxが入っている箇所はすべて同じ値を入れると綺麗に揃います。例えば、すべての3pxを0pxに変更すると枠内にピッタリはまります。

プレビュー

画像を差し替える場合は、画像のアドレスと画像の高さを変更してください。

Topの戻り位置が気になる場合は以下のリンクを変更してください。

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

<li class="etop"><a href="#pagetop">Top</a></li>

変更場所 ▼ 最下部「"footer"」

<ul id="b-top">
<li><a href="#pagetop">

全体幅の自由変更＋上部画像の差し替え

■画像を枠で囲まずそのまま入れる/画像に直接、線を書く

プレビュー

角を丸めた初期画像がこのパターンに該当します。

メニューリンクを端までピッタリ並べる場合は最初に全体幅を算出。並べなくてもいい場合は画像の幅をそのまま全体幅としてください。

  1. メニューリンクの幅と個数を決める→140pxで6個
  2. 全体幅を計算する→140*6=840px
    ※メニューの左右にコンテンツ部分と同じ余白(4px*2)を設ける場合は、これに余白分の8px（固定）を加えたものが全体幅になります→848px
  3. 840pxの画像を作成（下部画像も同様）
    ※余白(4px*2)を設けた場合は、848pxの画像を作成。画像の外線と画像の内容の「上」と「左右」にそれぞれ3pxの間隔をとってください。下部画像は「上」ではなく「下」に3pxの間隔を取ります
  4. サイドバーの幅を決める
    ここでは『size-l(243px)』を選択
  5. メイン幅の算出
    全体幅 - サイド幅 - 2px = メイン幅
    840 - 243 - 2 = 595px
  6. HTML/スタイルシートの幅変更に各値を入れる

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

#pagetop,#header,#footer{
  width: 840px;}  /* 全体幅(サイド+メイン+2)px */
div.main{ width: 595px;}  /* メイン */
#menunavi li{ width: 140px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 140px;  /* 上記と同じ値 */
}
/* メニューリンクの合計値:リンク幅(140) * リンク数(6) = 840px */
#menunavi ul { width: 840px; }

#headerと#footerの画像アドレスと高さをそれぞれ変更。

#header{
background-color: #63bace;
background-image: url(上部画像のアドレス);
height: ○○○px;  /* 画像の高さ */

#footer{
background-image: url(下部画像のアドレス);
height: ○○px;  /* 画像の高さ */
line-height: ○○px;  /* テキスト位置 */

#footer の画像の高さとテキスト位置を同じ数値にします。
※余白(4px*2)を設けた場合のテキスト位置は（ 画像の高さ -4px ）

#menunavi,address{
  margin: 0 0px; /* メニュー左右余白 */
}
h1.title{
  height: ○○px;  /* ブログタイトル高さ */

メニュー左右余白を 0px にしてメニューを全体幅まで伸ばす。
※余白(4px*2)を設けた場合は、margin: 0 3px のまま
ブログタイトルとブログ説明文との距離はブログタイトル高さを増減させて調整。

変更場所 ▼ HTMLの編集-「左右入替え」

container を 下にあるmain の直前に移動させます。

<div id="pagetop" class="side-r"><!--左右入替え-->
（下記に移動）

<div class="container">
<div class="main">

最下部の address の下にある </div> を上に移動。

</ul>
</div>
<address><a href="<%url>" title="<%blog_name>">Copyright &copy; <%author_name></a></address>
（上に移動）

画像の関係で、どうしてもブログ説明文が見難くなってしまうときは div p.intro を以下に変更してください。背景色をつけることで改善されます。

div p.intro{
 text-align: right;
 margin: 0 1px 0px 1px;
 padding: 2px 2px;  /* 余白 */
 color: #000000;  /* ブログ説明文 - 文字色 */
 background: #fffef9;  /* 背景色 */
 filter: alpha(opacity=70);-moz-opacity: 0.70;opacity: 0.70;
}

■画像を全体の枠の中に入れる/余白調整可能

プレビュー

枠を気にすることなく、画像をそのまま放り込むかたち。

メニューリンクを端までピッタリ並べる場合は最初に全体幅を算出。並べなくてもいい場合は画像の幅をそのまま全体幅としてください。

  1. メニューリンクの幅と個数を決める→140pxで6個
  2. 全体幅を計算する→140*6=840px
  3. 840pxの画像を作成（下部画像も同様）
    ※実際に表示されるのは、余白（左右3px）と線（左右1px）の分を差し引いた（全体幅-8）pxになります。余白を0pxにすると（全体幅-2）pxまで表示されます。余白（左右3px）を変更しないのであれば、（全体幅-8）pxの画像を作成するとよいかもしれません。
    [例]840pxなら832px
  4. サイドバーの幅を決める
    ここでは『size-l(243px)』を選択
  5. メイン幅の算出
    全体幅 - サイド幅 - 2px = メイン幅
    840 - 243 - 2 = 595px
  6. HTML/スタイルシートの幅変更に各値を入れる

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

最初の1行から「,#header,#footer」を削除

#pagetop{
  width: 840px;}  /* 全体幅(サイド+メイン+2)px */
div.main{ width: 595px;}  /* メイン */
#menunavi li{ width: 140px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 140px;  /* 上記と同じ値 */
}
/* メニューリンクの合計値:リンク幅(140) * リンク数(6) = 840px */
#menunavi ul { width: 840px; }

headerとfooterの画像アドレス・高さと margin: 0 auto; をそれぞれ変更。
#footer の画像の高さとテキスト位置は同じ数値に。

#header{
background-color: #63bace;
background-image: url(上部画像のアドレス);
height: ○○○px;  /* 画像の高さ */
margin: 3px 3px 0;

#footer{
background-image: url(下部画像のアドレス);
margin: 0 3px 3px;
height: ○○px;  /* 画像の高さ */
line-height: ○○rpx;  /* テキスト位置 */

containerのborderを以下に変更。

#menunavi,address{
  margin: 0 3px; /* メニュー左右余白 */
}
.container{  /* 左右枠線 */
  border: 1px #e0e0e0 solid;
  min-height: 1px;
  text-align: left;
}
h1.title{
  height: ○○px;  /* ブログタイトル高さ */

余白（3px）が入っている箇所にすべて同じ値を入れると綺麗に揃います。例えば、すべての3pxを0pxに変更すると枠内にピッタリはまります。
ブログタイトルとブログ説明文との距離はブログタイトル高さを増減させて調整。

変更場所 ▼ HTMLの編集-「左右入替え」

pagetop と container を 上にあるheader の直前に移動させます。

<div id="pagetop" class="side-r"><!--左右入替え-->
<div class="container">
<div id="header">

（上記に移動）
<div class="hdcolor" id="menunavi"><!--リンク変更-->

最下部の footer の上にある </div> 2つを下に移動。

（下に移動）
<div id="footer">
<a href="http://paro2day.blog122.fc2.com/" title="Paroday" target="_blank">Designed by Paroday</a>&nbsp;/&nbsp;<%ad> <%ad2></div>
</div>
</div>

Topの戻り位置が気になる場合は以下のリンクを変更してください。

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

<li class="etop"><a href="#pagetop">Top</a></li>

変更場所 ▼ 最下部「"footer"」

<ul id="b-top">
<li><a href="#pagetop">

画像の関係で、どうしてもブログ説明文が見難くなってしまうときは div p.intro を以下に変更してください。背景色をつけることで改善されます。

div p.intro{
 text-align: right;
 margin: 0 1px 0px 1px;
 padding: 2px 2px;  /* 余白 */
 color: #000000;  /* ブログ説明文 - 文字色 */
 background: #fffef9;  /* 背景色 */
 filter: alpha(opacity=70);-moz-opacity: 0.70;opacity: 0.70;
}

プルダウンの幅を変える

リンク名の下にある 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: 80%; /* 文字サイズ */
  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-->

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

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

メニューの下にカレンダーを追加

プレビュー

変更場所 ▼ HTMLの編集

<div class="main">の前に以下を入れます。
検索ワード「class="main"」

<ul id="menuCalendar">
<li class="prvm"><a href="<%prev_month_link>" title="<%prev_year>.<%prev_month>">&lt;</a></li>
<li class="nowyear"><%now_year>.<%now_month></li>
<li class="nxtm"><!--index_area-->&gt;<!--/index_area--><!--not_index_area--><a href="<%next_month_link>" title="<%next_year>.<%next_month>">&gt;</a><!--/not_index_area--></li>
<!--calendar2--><li><%days></li><!--/calendar2--></ul>

全体幅の自由変更＋上部画像の差し替えなどでcontainerをmain直前に移動させている場合はcontainerの前に入れます。

（ここに入れる）
<div class="container">
<div class="main">

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

以下を追加します。調整しやすい場所に入れてください。

#menuCalendar{
  background: #75bccc;  /* 全体背景色 */
  border-bottom: 1px #75bccc solid;  /* 下線 */
  clear: both;
  margin: 0 3px;  /* 外余白 */
  padding: 0 0px 0 16px;  /* 内左端余白 16px */
  list-style-type: none;
  text-align: left;
  white-space: nowrap;
  height: 21px;  /* カレンダー高さ */
  line-height: 21px;  /* カレンダー高さ */
  font-size: 10px;
}
#menuCalendar li{
  display: inline;
  margin: 0 9px 0 0px;  /* 日付余白 9px */
  padding: 0;
  font-family: verdana;
  color: #bcdcec;  /* 文字色 */
}
#menuCalendar li a,#menuCalendar li.nowyear,#menuCalendar li.nxtm{
  color: #ffffff;
}
#menuCalendar li a:hover{
  color: #000000;
}
#menuCalendar li.prvm{
  margin: 0;
}
#menuCalendar li.nowyear{
  margin: 0 9px;  /* 年月余白 9px */
}
#menuCalendar li.nxtm{
  margin-right: 10px;  /* 間隔 10px */
}

主な色・余白変更箇所は赤字部分です。
幅のサイズによって文字サイズや余白・間隔部分を調整。
外余白は全体幅とのあいだの余白。内左端余白はカレンダーの開始位置（「<」の左余白）です。
下線が必要ない場合はborderの1行を削除。
高さを変える場合は2つのカレンダー高さを同じ値に変更。

サイドバーの横幅変更

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

赤字部分を変更します。

■204px（エスエス）

<body class="size-ss"><!--サイド幅変更-->

■217px（エス）

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

■230px（エム）

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

■243px（エル）

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

■256px（エルエル）

<body class="size-ll"><!--サイド幅変更-->

サイドバー左右入替え

変更場所 ▼ HTMLの編集-検索ワード「左右入替え」

■サイドバー右：初期値

<div id="pagetop" class="side-r"><!--左右入替え-->

■サイドバー左

「l」（小文字のエル）

<div id="pagetop" class="side-l"><!--左右入替え-->

コメントを個別ページ以外でも表示

表示できるのは、コメント投稿者・コメントタイトル・コメント本文の3項目です。URLや日付などは変数がないため、基本的に表示できません。

コメント（特に絵文字などの装飾が多いもの）がたくさんついたりするとページの読み込みが少し遅くなります。普通のブログと普通のPC環境であれば、たぶん問題はありません。記事の追記展開と同様に、displayで非表示にしていてもアクセスした瞬間に内容物が読み込まれてしまいます。

■A:通常形式
コメントリスト1

（1）e-bottom の後に赤字部分を入れます。

変更場所 ▼ HTMLの編集-検索ワード「class="e-bottom"」

<ul class="e-bottom">
（略）
</ul>
<!--not_permanent_area-->
<dl class="cl-entry">
<dt class="cl-top">Comment List</dt>
<dd class="cl-top"><%topentry_comment_num></dd>
<!--comment_list-->
<dt><%topentry_comment_list_name>&nbsp;:&nbsp;<%topentry_comment_list_title></dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
<!--/not_permanent_area-->

（2）以下をスタイルシートに追加。

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

dl.cl-entry{
  margin: 5px 3px 0px 8px;
  padding: 0.6em 0.3em 0.2em 30px;  /* 全体左余白30px */
  border-top: 1px #f0f0f0 solid;
  background: #ffffff;  /* 背景色 */
  color: #008080;  /* 名前文字色 */
}
dl.cl-entry .cl-top{ display: none; }
dl.cl-entry dt{  /* コメントタイトル */
  margin : 0;
  padding: 0.5em 0 0;
  line-height: 1.1;
  font-size: 69%;  /* 文字サイズ */
}
dl.cl-entry dd{  /* コメント本文 */
  margin: 0;
  padding: 0.5em 5px 0.7em 1.3em;
  line-height: 1.3;
  font-size: 69%;  /* 文字サイズ */
  color: #444444;
}

■B:コメントに番号を振る形式
コメントリスト2

（1）e-bottom の後に赤字部分を入れます。

変更場所 ▼ HTMLの編集-検索ワード「class="e-bottom"」

<ul class="e-bottom">
（略）
</ul>
<!--not_permanent_area-->
<ul class="cl-entry">
<li class="cl-top">Comment List</li>
<!--comment_list--><li>
<%topentry_comment_list_name>&nbsp;:&nbsp;<%topentry_comment_list_title>
<p><%topentry_comment_list_brbody></p>
</li><!--/comment_list-->
</ul><!--/not_permanent_area-->

（2）以下をスタイルシートに追加。

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

ul.cl-entry{
  margin: 5px 3px 0px 8px;
  padding: 0.6em 0.3em 0.2em 40px;  /* 全体左余白40px */
  list-style-type: decimal;
  border-top: 1px #f0f0f0 solid;
  background: #ffffff;  /* 背景色 */
  color: #008080;  /* 名前文字色 */
}
ul.cl-entry .cl-top{ display: none; }
ul.cl-entry li{  /* コメントタイトル */
  margin : 0;
  padding: 0.5em 0 0;
  line-height: 1.1;
  font-size: 69%;  /* 文字サイズ */
}
ul.cl-entry p{  /* コメント本文 */
  margin: 0;
  padding: 0.5em 5px 0.7em 0px;
  line-height: 1.3;
  font-size: 100%;
  color: #444444;
}

■AB:コメント画像クリックで展開
コメントリスト3

（1）e-bottom の中にある以下の箇所を入替えます。

変更場所 ▼ HTMLの編集-検索ワード「class="ecom"」

変更箇所

<li class="ecom">

変更後
「..."this.onclick" />」の後ろにスペースや改行は入れない方がよいです。続けて「<a href...」が来るようにしてください。

<li><img src="https://blog-imgs-41.fc2.com/p/a/r/paro2day/ehancom2.gif" width="10" height="9" alt="Comment List" title="Comment List" onclick="javascript:i=document.getElementById('cl<%topentry_no>');if(i.style.display == 'none'){i.style.display='block'}else{i.style.display='none'}return false" onkeypress="this.onclick" />

（2）AまたはBで追加した部分の2行目に赤字部分を追加。

変更場所 ▼ HTMLの編集-「class="cl-entry"」

 class="cl-entry" id="cl<%topentry_no>" style="display: none;">

（3）以下をスタイルシートに追加。AB共通。

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

ul.e-bottom img { cursor: pointer; margin-right: 5px; }
ul.e-bottom img:hover { background: #ccffff; }

プルダウンの振り分け削除、Javascript優先方式（hover非対応ブラウザ）

変更場所 ▼ 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でもメニューを透過

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);
}

関連記事