Paroday

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

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

pazo-menue

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

■pazo-menue : プレビュー
pazw-hellblau
シャープ  隣接  カレンダー  [ 下 ]

■pazo-menue-i : プレビュー
pado-menu カスタマイズ
カレンダー 1カラム 2カラム 3カラム

履歴

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

■シャープ（ラインを鮮明に）/ 03-04-画像

プレビュー

すべての「01-right」と「01-left」を「03」に変更します。
すべての「02-right」と「02-left」を「04」に変更します。

テキストエディタなどで置換すると楽です。
 「01-right」→置換後「03-right」
 「01-left」→置換後「03-left」
 「02-right」→置換後「04-right」
 「02-left」→置換後「04-left」

大まかな変更箇所は3箇所です。

(1)body ---- */

#pagetop{
 margin: 0px auto 0;
 clear: left;
 /* 内背景色 */
background: #f8f8f0 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/03-right.jpg) left top repeat-y;
}
.side-l #pagetop{
background: #f8f8f0 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/03-left.jpg) right top repeat-y;
}

(2)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/04-left.jpg);
background-position: right top;
}

(3)size-m --- */
他のsizeも同様に変更します（使用するサイズ幅だけでも構いません）

.container{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/03-right-225.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.side-l .container{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/03-left-225.jpg);
background-position: left top;
}
.inhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/04-right-225.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.side-l .inhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/04-left-225.jpg);
background-position: left top;
}

プレビュー

メイン部分が少し広がるので、余白を調整します。

(1)body ---- */

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

すべての「01-right-xxx」と「01-left-xxx」を「07」に変更します。
すべての「02-right-xxx」と「02-left-xxx」を「08」に変更します。
※01-right.jpgや02-right.jpgはそのまま。サイズ付きの画像のみを変更します。

テキストエディタなどで置換すると楽です。
 「01-right-」→置換後「07-right-」
 「01-left-」→置換後「07-left-」
 「02-right-」→置換後「08-right-」
 「02-left-」→置換後「08-left-」

(2)size-m --- */
他のsizeも同様に変更します（使用するサイズ幅だけでも構いません）

.container{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/07-right-225.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.side-l .container{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/07-left-225.jpg);
background-position: left top;
}
.inhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08-right-225.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.side-l .inhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08-left-225.jpg);
background-position: left top;
}

プレビュー

変更場所 ▼ HTMLの編集

（1）Archivesの前に赤字部分（Homeリンク）を入れます。
検索ワード「header」

<ul><li><a href="<%url>">Home</a></li><li><a href="./archives.html">Archives</a></li><li><a href="<%server_url>control.php">Log in</a></li><li><a href="<%url>?xml">RSS</a></li></ul>

（2）メニューの書き換え
検索ワード「リンク変更」

<div class="hdsize" id="menunavi">
<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./blog-category-0.html">Gallery</a></li>
<li><a href="./">Thanks</a></li>
<li><a href="./">For</a></li>
</ul>
</div>

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

<ul class="hdsize" 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>

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

以下を追加します。
メニューリンク色 ---*/ や menu --- */ など調整しやすい場所に入れてください。

#menuCalendar{
  clear: both;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  text-align: left;
  white-space: nowrap;
  height: 26px;  /* カレンダー高さ */
  line-height: 26px;  /* カレンダー高さ */
  font-size: 11px;
}
#menuCalendar li{
  display: inline;
  margin: 0 10px 0 0px;  /* 日付余白 10px */
  padding: 0;
  font-family: verdana;
  color: #aaaaaa;  /* 文字色 */
}
#menuCalendar li a,#menuCalendar li.nowyear,#menuCalendar li.nxtm{
  color: #ffffff;
}
#menuCalendar li a:hover{
  color: #dd4444;
}
#menuCalendar li.prvm{
  margin: 0 0 0 19px;  /* 内左端余白 19px */
}
#menuCalendar li.nowyear{
  margin: 0 6px;  /* 年月余白 6px */
}
#menuCalendar li.nxtm{
  margin-right: 6px;  /* 間隔 6px */
}

主な色・余白変更箇所は赤字部分です。
幅のサイズによって文字サイズや余白・間隔部分を調整。

プレビュー

変更場所 ▼ HTMLの編集

（1）Archivesの前に赤字部分（Homeリンク）を入れます。
検索ワード「header」

<ul><li><a href="<%url>">Home</a></li><li><a href="./archives.html">Archives</a></li><li><a href="<%server_url>control.php">Log in</a></li><li><a href="<%url>?xml">RSS</a></li></ul>

（2）<div id="pagetop">の前に以下を丸ごと入れます。
検索ワード「pagetop」

<div class="hdCalendar">
<ul class="hdsize" 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></div>

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

以下を追加します。
メニューリンク色 ---*/ や menu --- */ など調整しやすい場所に入れてください。

.hdCalendar{
  background: #342d24;  /* 全体背景色 */
  border-top: 1px #544d44 solid;  /* 上線 */
  border-bottom: 1px #544d44 solid;  /* 下線 */
}
#menuCalendar{
  clear: both;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  text-align: left;
  white-space: nowrap;
  height: 21px;  /* カレンダー高さ */
  line-height: 21px;  /* カレンダー高さ */
  font-size: 10px;
}
#menuCalendar li{
  display: inline;
  margin: 0 10px 0 0px;  /* 日付余白 10px */
  padding: 0;
  font-family: verdana;
  color: #aaaaaa;  /* 文字色 */
}
#menuCalendar li a,#menuCalendar li.nowyear,#menuCalendar li.nxtm{
  color: #ffffff;
}
#menuCalendar li a:hover{
  color: #dd4444;
}
#menuCalendar li.prvm{
  margin: 0 0 0 19px;  /* 内左端余白 19px */
}
#menuCalendar li.nowyear{
  margin: 0 6px;  /* 年月余白 6px */
}
#menuCalendar li.nxtm{
  margin-right: 6px;  /* 間隔 6px */
}

主な色・余白変更箇所は赤字部分です。
幅のサイズによって文字サイズや余白・間隔部分を調整。
全体幅が900px近くあるのであれば、日付余白 10→12px、内左端余白 19→23px、
年月余白 6→12px、間隔 6→11px　などとしてください。
線を消す場合はborderの1行を削除。
高さを変える場合はすべてのカレンダー高さを同じ値に変更。

menue-i 1カラム - 2カラム - 3カラム

変更場所 ▼ HTMLの編集

（1）Archivesの前に赤字部分（Homeリンク）を入れます。
検索ワード「header」

<ul><li><a href="<%url>">Home</a></li><li><a href="./archives.html">Archives</a></li><li><a href="<%server_url>control.php">Log in</a></li><li><a href="<%url>?xml">RSS</a></li></ul>

（2）リンク変更の最下部にある</ul></div>のすぐ後に以下を丸ごと入れます。
（1カラムは class="m-main" の前、2カラムは class="main" の前、3カラムは class="leftside" の前になります）

<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>

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

以下を追加します。
メニューリンク色 ---*/ や menu --- */ など調整しやすい場所に入れてください。

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

主な色・余白変更箇所は赤字部分です。
幅のサイズによって文字サイズや余白・間隔部分を調整。
全体幅が900px近くあるのであれば、内左端余白 9→17px、日付余白 10→12px
年月余白 6→11px、間隔 6→11px　などとしてください。
1カラムは全体幅660px以上推奨。660pxであれば、
font-size: 9px、内左端余白 9→6px、日付余白 10→6px
年月余白 6→5px、間隔 6→3px　などとしてください。
線を消す場合はborderの1行を削除。
高さを変える場合はすべてのカレンダー高さを同じ値に変更。

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

menue

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

<li class="time"><%topentry_hour>:<%topentry_minute></li><!--allow_tb--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback-<%topentry_title>">Trackback&nbsp;:&nbsp;<%topentry_tb_num></a></li><!--/allow_tb-->
<!--allow_comment--><li>

上記部分を丸ごと以下に変更します。

<!--allow_tb--><li class="time"><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback-<%topentry_title>">Trackback&nbsp;:&nbsp;<%topentry_tb_num></a></li><!--/allow_tb-->
<!--allow_comment--><li<!--deny_tb--> class="time"<!--/deny_tb-->>

CommentとTrackbackの位置を入替える場合は
Edit</a></li> と <li><a href="#pagetop">Top</a></li> の間を以下に変更

<!--allow_comment--><li class="time"><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment-<%topentry_title>">Comment&nbsp;:&nbsp;<%topentry_comment_num></a></li><!--/allow_comment-->
<!--allow_tb--><li<!--deny_comment--> class="time"<!--/deny_comment-->><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback-<%topentry_title>">Trackback&nbsp;:&nbsp;<%topentry_tb_num></a></li><!--/allow_tb-->

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

下記のように数値部分を変更すると文字の大きさを変えられます。
%指定をやめて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>

スタイルシート幅変更のS,M,Lといったサイズは一例であり、本テンプレートで固定されているのはサイド幅のみです。それ以外の幅は自由に変更してください。

  1. メニューリンクの幅と個数を決める→140pxで6個
  2. メニューの幅を計算する→140*6=840px
    これに余白分の14px（固定）を加えたものが全体幅になります。
    840+14=854px
    【pazo-menue-i】の場合
    メニューの幅を計算する→140*6=840px
    これに余白分の12px（固定）を加えたものが全体幅になります。
    840+12=852px
  3. サイド幅を決める→HTMLのサイド幅変更部分
    サイズは以下の6種類です。ここでは「m(225px)」を選択。
    side-ss(200px),s(210px),m(225px),l(230px),ll(240px),w(250px)
    【pazo-menue-i】の場合
    side-ss(210px),s(220px),m(230px),l(240px),ll(250px),w(260px)
  4. メイン幅を計算する→全体幅からサイド幅を引く
    854-225=629px
  5. スタイルシートの幅変更に各値を入れる

#pagetop,.outhead,.hdsize{ width: 854px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 629px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 140px; }   /* メニューリンク */

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

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

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

メニューリンクを1個減らして5個にします。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Thanks</a></li>
<li><a href="./">For</a></li>
</ul>

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

/* --- 変更後 : S ---------------------------------------- 幅変更 --- */
/* S   size-s (210px)   749px   539px   0px   0px   147px */

#pagetop,.outhead,.hdsize{ width: 749px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 539px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 147px; }   /* メニューリンク */

サイド幅(210px)＋メイン幅＝全体幅 となるようにします。
メイン幅を増やしたいときは、メイン幅を増やしたpx分だけ全体幅も増やします。
メニューリンクの数が5個であれば、5px間隔で増減させます（6個なら6px）。
5px（6個なら6px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 5px増やす
全体幅:754px / メイン幅 544px / 148px
[例2] 5px減らす
全体幅:744px / メイン幅 534px / 146px

■メニューリンクを6個にする場合は以下に幅変更

#pagetop,.outhead,.hdsize{ width: 746px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 536px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 122px; }   /* メニューリンク */

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

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

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

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

/* --- 変更後 : M ---------------------------------------- 幅変更 --- */
/* M   size-s (225px)   800px   575px   0px   0px   131px */

#pagetop,.outhead,.hdsize{ width: 800px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 575px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 131px; }   /* メニューリンク */

サイド幅(225px)＋メイン幅＝全体幅 となるようにします。
メイン幅を増やしたいときは、メイン幅を増やしたpx分だけ全体幅も増やします。
メニューリンクの数が6個であれば、6px間隔で増減させます（5個なら5px）。
6px（5個なら5px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 6px増やす
全体幅:806px / メイン幅 581px / 132px
[例2] 6px減らす
全体幅:794px / メイン幅 569px / 130px

■メニューリンクの幅を広くしてリンクの数を5個にする

リンク名が長い場合はリンクの数を減らすなどして調整します。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Thanks</a></li>
<li><a href="./">For</a></li>
</ul>

#pagetop,.outhead,.hdsize{ width: 804px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 579px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 158px; }   /* メニューリンク */

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

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

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

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

/* --- 変更後 : L ---------------------------------------- 幅変更 --- */
/* L   size-s (230px)   848px   618px   0px   0px   139px */

#pagetop,.outhead,.hdsize{ width: 848px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 618px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 139px; }   /* メニューリンク */

サイド幅(230px)＋メイン幅＝全体幅 となるようにします。
メイン幅を増やしたいときは、メイン幅を増やしたpx分だけ全体幅も増やします。
メニューリンクの数が6個であれば、6px間隔で増減させます（5個なら5px）。
6px（5個なら5px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 6px増やす
全体幅:854px / メイン幅 624px / 140px
[例2] 6px減らす
全体幅:842px / メイン幅 612px / 139px

■メニューリンクの幅を広くしてリンクの数を5個にする

リンク名が長い場合はリンクの数を減らすなどして調整します。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Thanks</a></li>
<li><a href="./">For</a></li>
</ul>

#pagetop,.outhead,.hdsize{ width: 849px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 619px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 167px; }   /* メニューリンク */

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

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

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

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

/* --- 変更後 : LL ---------------------------------------- 幅変更 --- */
/* LL   size-s (240px)   944px   704px   0px   0px   134px */

#pagetop,.outhead,.hdsize{ width: 944px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 704px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 155px; }   /* メニューリンク */

サイド幅(240px)＋メイン幅＝全体幅 となるようにします。
メイン幅を増やしたいときは、メイン幅を増やしたpx分だけ全体幅も増やします。
メニューリンクの数が6個であれば、6px間隔で増減させます（7個なら7px）。
6px（7個なら7px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 6px増やす
全体幅:950px / メイン幅 710px / 156px
[例2] 6px減らす
全体幅:938px / メイン幅 696px / 154px

■メニューリンクの幅を狭くしてリンクの数を7個にする

リンクを追加して7個にします。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Thanks</a></li>
<li><a href="./">For</a></li>
<li><a href="./">Add</a></li>
</ul>

#pagetop,.outhead,.hdsize{ width: 945px ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 705px ;   /* メイン */
  margin-right : 0px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 133px; }   /* メニューリンク */

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

赤字部分を変更します。ss,s,m,l,ll,w（お好みのサイズ）
ここではmを例に取ります

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

メニューリンクの右端に線を入れるときは最後のliにclass="end"をつけます。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Thanks</a></li>
<li class="end"><a href="./">For</a></li>
</ul>

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

/* --- 変更後 : 可変＋固定幅 ------------------------------ 幅変更 --- */
/* M   size-s (225px)   94%   100%   -225pxpx   225px   131px */

#pagetop,.outhead,.hdsize{ width: 94% ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 100% ;   /* メイン */
  margin-right : -225px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 225px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 131px; }   /* メニューリンク */
#menunavi ul{ width: 786px; }

最初のmargin-rightにサイド幅のマイナス値、次のものにサイド幅と同じ値を入れます。

一番下の#menunavi ulにはメニューリンク幅×リンクの数のpxを入れます。
メニューリンクが133pxでリンクの数が6個なら133*6=798px
メニューリンクが122pxでリンクの数が6個なら122*6=732px

■左にサイドバー

その他説明は右と同様です。

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

<body class="side-l"><!--左右変更-->

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

/* --- 変更後 : 可変＋固定幅 ------------------------------ 幅変更 --- */
/* M   size-s (225px)   94%   100%   -225pxpx   225px   131px */

#pagetop,.outhead,.hdsize{ width: 94% ; }   /* 全体幅 (メイン + サイド) */
div.main{ width: 100% ;   /* メイン */
  margin-left: -225px ;   /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-left: 225px; }/* 可変 左右入替え right ←→ left */
#menunavi li{ width: 131px; }   /* メニューリンク */
#menunavi ul{ width: 786px; }

■■■可変幅の最大幅・最小幅を指定する■■■

最小幅は、メニューリンク幅×リンク数＋14pxを入れるといいかもしれません。
メニューリンクが131pxでリンクが6個なら、131*6+14=800pxになります。

【最小幅】min-width

/* 全体幅 */に赤字部分を追記します。※IE6以下は対応していません。

ウインドウを広げたときに、ある一定の幅以上小さくならないようにする設定です。

#pagetop,.outhead,.hdsize{ width: 94% ; min-width: 800px; }

数値を変更して、最小の横幅を指定します。上記の場合は800px以上小さくならなくなります。

【最大幅】max-width

/* 全体幅 */に赤字部分を追記します。※IE6以下は対応していません。

ウインドウを広げたときに、ある一定の幅以上広がらないようにする設定です。

#pagetop,.outhead,.hdsize{ width: 94% ; max-width: 960px; }

数値を変更して、最大の横幅を指定します。上記の場合は960px以上広がらなくなります。

【最大幅+最小幅】

両方を指定することも可能です。※IE6以下は対応していません。

#pagetop,.outhead,.hdsize{ width: 94% ; min-width: 800px; max-width: 960px; }

数値を変更して、最大・最小の横幅を指定します。上記の場合は8 00px～960pxの範囲で可変します。

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

赤字部分を変更します。カラム落ちしないようにメイン幅と全体幅を調整してください。

■200px（エスエス）

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

■210px（エス）

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

■225px（エム）

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

■230px（エル）

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

■240px（エルエル）

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

■250px（ダブリュ）

<div class="size-w"><!--サイド幅変更-->

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

■サイドバー右：初期値

<body class="side-r"><!--左右変更-->

■サイドバー左

「l」（小文字のエル）

<body class="side-l"><!--左右変更-->

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

「"./"」と「About」「News」などを変更します。
最初の「Home」の1行はそのままでよいかもしれません。

最初の <li> には class="home" をつけます。

"./"には固定ページやカテゴリー、ユーザータグなどのアドレスを入れます。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./blog-entry-1.html">はじめに</a></li> <!--固定ページ-->
<li><a href="./blog-entry-2.html">更新履歴</a></li> <!--固定ページ-->
<li><a href="./blog-category-0.html">レビュー</a></li> <!--カテゴリ0番-->
<li><a href="./blog-category-1.html">写真</a></li> <!--カテゴリ1番-->
<li><a href="./?tag=%B6%E2%B0%E6%C3%B9%B7%AF">お気に入り</a></li> <!--タグ-->
</ul>

カテゴリやユーザータグのアドレスは、実際にプラグインを表示させて、クリックするとわかります。それらをコピーして「""」内に挿入します。

pazo-menu URL

必要に応じてリンクを削除してください。横幅いっぱいに並べないときは右端のリンク右側に線を引くとよいかもしれません。一番最後の<li>にclass="end"をつけると右端に線が表示されます。

<ul>
<li class="home"><a href="./">Home</a></li>
<li><a href="./">About</a></li>
<li><a href="./">News</a></li>
<li><a href="./">Gallery</a></li>
<li class="end"><a href="./">Thanks</a></li>
</ul>

カテゴリプラグインの特定カテゴリを表示しない

メニューリンクに入れた特定のカテゴリを、サイドバーのカテゴリプラグインで非表示にする場合はスタイルシートとプラグインのHTMLに以下の変更を加えます。

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

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

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

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

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

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

変更場所 ▼ 環境設定-プラグインの設定-詳細-HTMLの編集

使用しているカテゴリプラグインに赤字部分を追記します。

■公式プラグイン：カテゴリ(カスタマイズ向け)/親子カテゴリ使用

<ul class="main_menu">
<!--category-->
  <!--category_sub_begin-->
    <ul class="sub_menu">
  <!--/category_sub_begin-->
  <!--category_nosub-->
    <li class="main_list cate<%category_no>" &align>
  <!--/category_nosub-->
  <!--category_parent-->
    <li class="main_list" &align>
  <!--/category_parent-->
  <!--category_sub_hasnext-->
    <li class="sub_list cate<%category_no>" &align>
  <!--/category_sub_hasnext-->
  <!--category_sub_end-->
    <li class="sub_list_end cate<%category_no>" &align>
  <!--/category_sub_end-->
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  <!--category_nosub-->
    </li>
  <!--/category_nosub-->
  <!--category_sub_hasnext-->
    </li>
  <!--/category_sub_hasnext-->
  <!--category_sub_end-->
    </li>
    </ul>
    </li>
  <!--/category_sub_end-->
<!--/category-->
</ul>

■公式プラグイン：カテゴリ(旧バージョン)/親子カテゴリ未使用

<ul>
<!--category-->
<li class="cate<%category_no>" &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>

プレビュー

pazo-menue のHTMLを一部変更して、スタイルシートをすべて入れ替えます。

変更場所 ▼ HTMLの編集

変更は4箇所です。

【1】検索ワード「header」

<div id="header">
<div class="outhead"><div class="inhead">

上記を以下に変更

<div id="pagetop">
<div class="container">
<div id="header" class="inhead">

【2】検索ワード「リンク変更」

</div></div>
</div>
<div class="hdcolor">
<div class="hdsize" id="menunavi"><!--リンク変更-->

上記を以下に変更（</div> を2つ減らして、続く <div> をひとつにまとめる）

</div>
<div class="hdcolor" id="menunavi"><!--リンク変更-->

【3】検索ワード「リンク変更」の少し下

</div>
</div>
<div id="pagetop">
<div class="container">
<div class="main">

上記を以下に変更（</div>を1つ減らして、pagetopとcontainerを削除）

</div>
<div class="main">

【4】検索ワード「b-top」最下部

<ul id="b-top"><li><a href="#header">Top</a></li></ul>
</div>
</div>
<div class="hdcolor">
<address class="hdsize"><a href="<%url>" title="<%blog_name>">Copyright &copy; <%author_name></a></address>
</div>
<div id="footer">
<div class="outhead">
<div class="inhead"><a href="http://paro2day.blog122.fc2.com/" title="Paroday" target="_blank">Designed by Paroday</a>&nbsp;/&nbsp;<%ad>
<%ad2></div>
</div>
</div>
</div>

上記を以下に変更

<ul id="b-top"><li><a href="#header">Top</a></li></ul>
<address class="hdcolor"><a href="<%url>" title="<%blog_name>">Copyright &copy; <%author_name></a></address>
<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>
</div>

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

以下より2カラムのスタイルシートをすべてコピー、丸ごと入れ替えます。

■http://paro2day.blog122.fc2.com/blog-entry-402.html

備考

幅変更のサンプルはpazo-menueとは異なります。したがって、このページに書かれているサイズ変更サンプルは使えません。幅変更の手順をもとに調整してください。

画像の差し替えはスタイルシートの「上下部画像 --- */」を編集
既に入れてある画像の横幅は1000pxです。可変の場合は、全体幅にmax-widthを指定するとよいかもしれません。

#pagetop{ width: 94% ; max-width: 1000px; }  /* 全体幅 */

background-color: #b0a098;

上記は画像が表示されないときの背景色です。必要ないときは削除してください。

background-image: url(画像のアドレス);
background-position: left top;
background-repeat: no-repeat;
height: 88px;  /* 画像の高さ */

url( )内に画像のアドレスを入れます。
用意する画像の横幅は(全体幅 - 12px)です。
（例）916px なら 904px の画像
margin: 0 5px; に変更した場合は (全体幅-10px)
（例）916px なら 906px の画像

文字サイズ等のブラウザ間の差をなくすため、画像の高さはheightで指定しています。
（例）高さ100pxの画像ならheight: 100px;

画像を中央寄せするときは以下のように変更してください。

background-repeat: center top;

画像を繰り返して表示するときは以下のように変更してください。

background-repeat: repeat-x;  /* 横に繰り返す */
background-repeat: repeat-y;  /* 縦に繰り返す */

下部画像も同様です。こちらの高さはpadding（8px）で指定しています。

ブログタイトルから右端のブログ説明文までの縦の間隔は、h1.titleのheightで指定しています。間隔を広げる場合は増やし、狭める場合は減らします。画像の高さに合わせて調整してください。

height: 39px;  /* ブログタイトル高さ */

画像の関係で、どうしてもブログ説明文が見難くなってしまうときは 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;
}

表示できるのは、コメント投稿者・コメントタイトル・コメント本文の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）以下をスタイルシートに追加。
背景色をつけるときは transparent→#f3f3eb などに変更

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

dl.cl-entry{
  margin: 5px 3px 0px 8px;
  padding: 0.6em 0.3em 0.2em 30px;  /* 全体左余白30px */
  background: transparent;  /* 背景色 */
  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）以下をスタイルシートに追加。
背景色をつけるときは transparent→#f3f3eb などに変更

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

div ul.cl-entry{
  margin: 5px 3px 0px 8px;
  padding: 0.6em 0.3em 0.2em 40px;  /* 全体左余白40px */
  list-style-type: decimal;
  background: transparent;  /* 背景色 */
  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の編集-検索ワード「allow_comment」

変更箇所「allow_comment～/allow_comment」

<!--allow_comment--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment - <%topentry_title>">Comment&nbsp;:&nbsp;<%topentry_comment_num></a></li><!--/allow_comment-->

変更後
途中にスペースや改行は入れない方がよいです。

<!--allow_comment--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment Form - <%topentry_title>">Comment</a>&nbsp;<!--not_permanent_area--><a href="<%topentry_link>#comment-area" title="Comment List - <%topentry_title>" 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"><!--/not_permanent_area-->:&nbsp;<%topentry_comment_num><!--not_permanent_area--></a><!--/not_permanent_area--></li><!--/allow_comment-->

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

変更場所 -「class="cl-entry"」

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

関連記事