Paroday

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

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

pado-menue

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

■pado-menue : プレビュー
pazw-hellblau
隣接

■pado-menue-i : プレビュー
pado-menu カスタマイズ
肉球みたいなもの

履歴

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

■隣接/ 11-12-画像

プレビュー

メイン部分が少し広がるので、余白を調整します。
全体幅も1～2段階（リンク6個なら6pxずつ）減らした方がよいかもしれません。あわせてメニューリンク幅も1pxずつ減らすのも忘れないでください。

(1)body ---- */

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: 10px;  /* メイン左右余白 */
 margin-left: 10px;
}
div.m-main table{ font-size: 13.12px; }
div.r-main{
 margin: 0 15px 0 15px;
 padding-top: 18px;  /* サイド上余白 */
 text-align: left;
}
.right div.r-main{
 margin: 0 15px 0 15px;
}

すべての「05-right」と「05-left」を「11」に変更します。
すべての「06-right」と「06-left」を「12」に変更します。

テキストエディタなどで置換すると楽です。
 「05-right」→置換後「11-right」
 「05-left」→置換後「11-left」
 「06-right」→置換後「12-right」
 「06-left」→置換後「12-left」

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

(2)body ---- */

#pagetop{
 margin: 0px auto 0;
 overflow: hidden;
 clear: left;
 /* 内背景色 */
background-color: #f8f8f0;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/11-left-210.jpg);
background-position: left top;
background-repeat: repeat-y;
}

(3)header footer --- */

.outhead{
margin: 0 auto;
background-color: #d9d1ba;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/12-left-210.jpg);
background-position: left top;
background-repeat: repeat-y;
}

(4)size-m --- */
他のsizeも同様に変更します（使用するサイズ幅だけでも構いません）
※size-m以外は4箇所変更します。05→11,06→12

.container{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/11-right-210.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.inhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/12-right-210.jpg);
background-position: right top;
background-repeat: repeat-y;
}

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

  1. サイド幅を決める→HTMLのサイド幅変更部分

    <body class="sizer-m"><!--右サイド幅変更-->
    <div class="sizel-m"><!--左サイド幅変更-->

    サイズは以下の5種類です。ここでは「m(210px)」を選択。
    sider(l)-s(200px),m(210px),l(220px),ll(230px),w(240px)
    sider-xxx が右サイド幅。sidel-xxx が左サイド幅。
    【pado-menue-i】の場合
    sider(l)-ss(200px),s(210px),m(220px),l(230px),ll(240px),w(250px)
  2. メニューリンクの幅と個数を決める→147pxで6個
  3. メニューの幅を計算する→147*6=882px
    これに余白分の12px（固定）を加えたものが全体幅になります。
    882+12=894px
  4. スタイルシートの幅変更に各値を入れる

    #pagetop,.outhead,.hdsize{ width: 894px ; }   /* 全体幅 */
    #menunavi li{ width: 147px; }   /* メニューリンク */

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

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

<body class="sizer-s"><!--右サイド幅変更-->
<div class="sizel-s"><!--左サイド幅変更-->

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

/* --- 変更後 : S ---------------------------------------- 幅変更 --- */
S   size-s  (200px)  852px  140px  /  864px  142px  /  876px  144px
どれか一つを選択してください。

#pagetop,.outhead,.hdsize{ width: 852px ; }   /* 全体幅 */
#menunavi li{ width: 140px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 864px ; }   /* 全体幅 */
#menunavi li{ width: 142px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 876px ; }   /* 全体幅 */
#menunavi li{ width: 144px; }   /* メニューリンク */

メイン幅を増やしたいときは、全体幅を増やします。
メニューリンクの数が6個であれば、6px間隔で増減させます（7個なら7px）。
6px（7個なら7px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 6px増やす
全体幅:870px / 143px

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

#pagetop,.outhead,.hdsize{ width: 866px ; }   /* 全体幅 */
#menunavi li{ width: 122px; }   /* メニューリンク */

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

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

<body class="sizer-m"><!--右サイド幅変更-->
<div class="sizel-m"><!--左サイド幅変更-->

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

/* --- 変更後 : M ---------------------------------------- 幅変更 --- */
M   size-m  (210px)  882px  145px  /  894px  147px  /  906px  149px
どれか一つを選択してください。

#pagetop,.outhead,.hdsize{ width: 882px ; }   /* 全体幅 */
#menunavi li{ width: 145px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 894px ; }   /* 全体幅 */
#menunavi li{ width: 147px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 906px ; }   /* 全体幅 */
#menunavi li{ width: 149px; }   /* メニューリンク */

メイン幅を増やしたいときは、全体幅を増やします。
メニューリンクの数が6個であれば、6px間隔で増減させます（7個なら7px）。
6px（7個なら7px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 6px増やす
全体幅:900px / 148px

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

#pagetop,.outhead,.hdsize{ width: 894px ; }   /* 全体幅 */
#menunavi li{ width: 126px; }   /* メニューリンク */

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

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

<body class="sizer-l"><!--右サイド幅変更-->
<div class="sizel-l"><!--左サイド幅変更-->

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

/* --- 変更後 : L ---------------------------------------- 幅変更 --- */
L   size-l  (220px)  918px  151px  /  930px  153px  /  942px  155px
どれか一つを選択してください。

#pagetop,.outhead,.hdsize{ width: 918px ; }   /* 全体幅 */
#menunavi li{ width: 151px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 930px ; }   /* 全体幅 */
#menunavi li{ width: 153px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 942px ; }   /* 全体幅 */
#menunavi li{ width: 155px; }   /* メニューリンク */

メイン幅を増やしたいときは、全体幅を増やします。
メニューリンクの数が6個であれば、6px間隔で増減させます（7個なら7px）。
6px（7個なら7px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 6px増やす
全体幅:936px / 154px

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

#pagetop,.outhead,.hdsize{ width: 929px ; }   /* 全体幅 */
#menunavi li{ width: 131px; }   /* メニューリンク */

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

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

<body class="sizer-ll"><!--右サイド幅変更-->
<div class="sizel-ll"><!--左サイド幅変更-->

メニューリンクを1個増やして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>

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

/* --- 変更後 : LL ---------------------------------------- 幅変更 --- */
LL   size-ll  (230px)  950px  134px  /  964px  136px  /  978px  138px
どれか一つを選択してください。

#pagetop,.outhead,.hdsize{ width: 950px ; }   /* 全体幅 */
#menunavi li{ width: 134px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 964px ; }   /* 全体幅 */
#menunavi li{ width: 136px; }   /* メニューリンク */

#pagetop,.outhead,.hdsize{ width: 978px ; }   /* 全体幅 */
#menunavi li{ width: 138px; }   /* メニューリンク */

メイン幅を増やしたいときは、全体幅を増やします。
メニューリンクの数が7個であれば、7px間隔で増減させます（6個なら6px）。
7px（6個なら6px）増減させるごとにメニューリンクの幅を1pxずつ増減させます。

[例1] 7px増やす
全体幅:957px / 135px

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

#pagetop,.outhead,.hdsize{ width: 960px ; }   /* 全体幅 */
#menunavi li{ width: 158px; }   /* メニューリンク */

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

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

<body class="sizer-m"><!--右サイド幅変更-->
<div class="sizel-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-m (210px)   94%   126px */

#pagetop,.outhead,.hdsize{ width: 94% ; }   /* 全体幅 */
#menunavi li{ width: 131px; }   /* メニューリンク */
#menunavi ul{ width: 786px; }

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

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

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

【最小幅】min-width

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

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

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

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

【最大幅】max-width

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

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

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

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

【最大幅+最小幅】

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

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

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

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

赤字部分を変更します。カラム落ちしないように全体幅を調整してください。
右サイドはエルにして、左サイドはエムにするなどの設定も可能です。

■200px（エス）

<body class="sizer-s"><!--右サイド幅変更-->
<div class="sizel-s"><!--左サイド幅変更-->

■210px（エム）

<body class="sizer-m"><!--右サイド幅変更-->
<div class="sizel-m"><!--左サイド幅変更-->

■220px（エル）

<body class="sizer-l"><!--右サイド幅変更-->
<div class="sizel-l"><!--左サイド幅変更-->

■230px（エルエル）

<body class="sizer-ll"><!--右サイド幅変更-->
<div class="sizel-ll"><!--左サイド幅変更-->

■240px（ダブリュ）

<body class="sizer-w"><!--右サイド幅変更-->
<div class="sizel-w"><!--左サイド幅変更-->

プレビュー

pado-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="leftside">

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

</div>
<div class="leftside">

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

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

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

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

備考

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

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

background-color: #b0a098;

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

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

url( )内に画像のアドレスを入れます。
用意する画像の横幅は(全体幅 - 12px)です。それよりも大きい部分は削られます。
（例）876px なら 864px の画像
margin: 0 5px; に変更した場合は (全体幅-10px)
（例）876px なら 866px の画像

文字サイズ等のブラウザ間の差をなくすため、画像の高さは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=60);-moz-opacity: 0.60;opacity: 0.60;
}

関連記事