Paroday

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

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

padw-einfach

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

■padw-einfach : プレビュー　　/　　■padw-einfach-l　/　プレビュー
padw-einfach padw-einfach-l

履歴

背景画像を使う

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

/* ----------------------------------------------------[ Body ]*/

body{　の background /* 全体背景色 */ 部分を変更。
（　）内に画像のアドレスを入れて差し替えます。

>>斜線背景画像（back1.gif）プレビュー

 background: #ffffff url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back1.gif) left top repeat;

 background: #f0f0f0 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back1a.gif) left top repeat;

#ffffff 部分を変更すると色が変わります。色は #fbfbff など薄め推奨です（#f○f○f○）

back1/aback1.gifの色変化は白地の部分、back1a.gifの色変化は赤地の部分です

>>十字背景画像（back2.gif）プレビュー

 background: #ffffff url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back2.gif) left top repeat;

 background: #f0f0f0 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back2a.gif) left top repeat;

#ffffff 部分を変更すると色が変わります。色は #fbfbff など薄め推奨です（#f○f○f○）

back2/aback2.gifの色変化は白地の部分、back2a.gifの色変化は赤地の部分です

記事やコメントの曜日（Mon,Tue,Wed,Thu,Fri,Sat,Sun）をクリックすると、ログイン状態のときのみ編集・返信画面に飛びます。

記事の投稿時間を消す

【einfach】【einfach-l】共通

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

下記を削除。

<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_hour>:<%topentry_minute></a></li>

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

赤字部分を削除。

<%titlelist_youbi> <%titlelist_hour>:<%titlelist_minute></span>

<%titlelist_youbi></span>

【einfach-l】のみ

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

赤字部分を削除。

<%topentry_youbi></a> <%topentry_hour>:<%topentry_minute></span>

<%topentry_youbi></a></span>

文字サイズ

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

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

.eBody,.titleBody{      /* -- 記事本文 -- */
   font-size: 69%;   /* 文字サイズ */
}

コメントの絵文字を追加

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

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

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

einfach-l : 一覧で表示される本文を複数行表示する・表示しない

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

赤字部分を変更・追記します

/* ----------------------------------------------------[ Archives ] */

.listBody p.listDesc {
   margin: 0 0 9px;
   padding: 0 6px 0 10px;
   display: none;   /* 表示しない */
   height: 1.4em;
   line-height: 1.4;
   overflow: hidden;
   color: #333333;
}
.listBody p.listDesc {
   margin: 0 0 9px;
   padding: 0 6px 0 10px;
   height: 1.4em;   /* 初期値 : 1行表示 */
   line-height: 1.4;
   overflow: hidden;
   color: #333333;
}
.listBody p.listDesc {
   margin: 0 0 9px;
   padding: 0 6px 0 10px;
   max-height: 2.8em;   /* 2行表示 */
   line-height: 1.4;
   overflow: hidden;
   color: #333333;
}
* html .listBody p.listDesc {
   height: 1.4em;
}
.listBody p.listDesc {
   margin: 0 0 9px;
   padding: 0 6px 0 10px;
   max-height: 4.2em;   /* 3行表示 */
   line-height: 1.4;
   overflow: hidden;
   color: #333333;
}
* html .listBody p.listDesc {
   height: 1.4em;
}

line-height を倍にしていくと表示される行が増えます。ただし、改行（br要素）などは無視されます。
「* html ～」はIE6対策です。

einfach-l : トップページなどで表示される（テキストのない）ヘッダ部分の高さを変更する

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

赤字部分に数値を入れると高さが増えます

/* ----------------------------------------------------[ Body ] */

#subTile span{
   display: block;
   height: 5px;
   overflow: hidden;
   visibility: hidden;
}

記事タイトル・サイドバータイトル部分の上下余白の変更

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

下記のように数値部分を変更すると上下の余白変えられます。
/* ----------------------------------------------------[ Side ]

.sTitle{
   padding: 6px 9px 7px;
   line-height: 1;
   text-align: left;
}

固定幅　3カラム

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

全体幅を px で指定します。全体幅を増やすと、メイン幅が広がります。左右幅 と 左右幅+15くらいの数値 の差がサイドバーとメインの間の余白になります。
幅M の間隔を 2px 減らすときは、左右幅+15くらいの数値 を 204px 204px とし、全体幅を 増減させた左右の合計値分（2+2）減らします。880 - 4 = 876px
下記はそのサンプルです。サンプル通りにする必要はありません。

/* S　780px 180px 180px -180px -180px 195px 195px

/* ----------------------------------------------------[ 幅変更 S ]*/
#pagetop{ width: 780px; }   /* 全体幅 */
#sideL{ width: 180px;}   /* 左幅 */
#sideR{ width: 180px;}   /* 右幅 */
#main{ margin-left : -180px;}   /* 左幅の-値 */
#container{ margin-right: -180px;}   /* 右幅の-値 */
.entryBlock,.pThird{
   margin-left : 195px;   /* 左幅＋15程度の数値 */
   margin-right : 195px;   /* 右幅＋15程度の数値 */
}

/* M　880px 190px 190px -190px -190px 206px 206px

/* ----------------------------------------------------[ 幅変更 M ]*/
#pagetop{ width: 880px; }   /* 全体幅 */
#sideL{ width: 190px;}   /* 左幅 */
#sideR{ width: 190px;}   /* 右幅 */
#main{ margin-left : -190px;}   /* 左幅の-値 */
#container{ margin-right: -190px;}   /* 右幅の-値 */
.entryBlock,.pThird{
   margin-left : 206px;   /* 左幅＋15程度の数値 */
   margin-right : 206px;   /* 右幅＋15程度の数値 */
}

/* L　958px 193px 193px -193px -193px 209px 209px

/* ----------------------------------------------------[ 幅変更 L ]*/
#pagetop{ width: 958px; }   /* 全体幅 */
#sideL{ width: 193px;}   /* 左幅 */
#sideR{ width: 193px;}   /* 右幅 */
#main{ margin-left : -193px;}   /* 左幅の-値 */
#container{ margin-right: -193px;}   /* 右幅の-値 */
.entryBlock,.pThird{
   margin-left : 209px;   /* 左幅＋15程度の数値 */
   margin-right : 209px;   /* 右幅＋15程度の数値 */
}

可変幅　3カラム

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

全体幅を % で指定するだけです。幅のみ変更します。左右幅 と 左右幅+15くらいの数値 の差がサイドバーとメインの間の余白になります。間隔を 2px 減らすときは、左右幅+15くらいの数値 を 207px 207px とします。
max-width: 960px; /* 最大幅 */ min-width: 760px; /* 最小幅 */
はウインドウを広げたときの限界値です。必要であれば、追記してください。

/* ----------------------------------------------------[ 幅変更 可＋固 ]*/
#pagetop{ width: 96%;max-width: 960px;min-width: 760px; }   /* 全体幅 */
#sideL{ width: 193px;}   /* 左幅 */
#sideR{ width: 193px;}   /* 右幅 */
#main{ margin-left : -193px;}   /* 左幅の-値 */
#container{ margin-right: -193px;}   /* 右幅の-値 */
.entryBlock,.pThird{
   margin-left : 209px;   /* 左幅＋15程度の数値 */
   margin-right : 209px;   /* 右幅＋15程度の数値 */
}

pazw-einfach / pazw-einfach-l 共通 : 2カラム化

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

<div id="sideL" class="sidebar">
から
<!--/plugin_second-->
<!--/plugin-->
</div>
までを以下に入替えます。先頭の </div> は新たに追加します。

</div>

<div class="sidebar">
<!--plugin--><!--plugin_first-->
<div class="f-ina e-frame">&nbsp;</div>
<dl>
<dt class="sTitle e-frame"><%plugin_first_title></dt>
<dd class="sBody f-bottom">
<!--plugin_first_description-->
<p class="pDesc"><%plugin_first_description></p>
<!--/plugin_first_description-->
   <%plugin_first_content>
<!--plugin_first_description2-->
<p class="pDesc"><%plugin_first_description2></p>
<!--/plugin_first_description2-->
</dd>
</dl>
<!--/plugin_first-->

<!--plugin_second-->
<div class="f-ina e-frame">&nbsp;</div>
<dl>
<dt class="sTitle e-frame"><%plugin_second_title></dt>
<dd class="sBody f-bottom">
<!--plugin_second_description-->
<p class="pDesc"><%plugin_second_description></p>
<!--/plugin_second_description-->
   <%plugin_second_content>
<!--plugin_second_description2-->
<p class="pDesc"><%plugin_second_description2></p>
<!--/plugin_second_description2-->
</dd>
</dl>
<!--/plugin_second-->
<!--/plugin-->
</div>

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

左右入替えを追加し、幅変更を丸ごと以下に変更します

/* ----------------------------------------------------[ 左右入替え ]
 * left→right right→left に変更 幅変更も同様に
*/
#container{ float: left; }
.sidebar{ float: right; }

/* ----------------------------------------------------[ 幅変更 ]
 * 初期値 : M
 * LL   932px    681px   26px    0px    225px
 * L    823px    582px   26px    0px    215px
 * M    768px    532px   26px    0px    210px
 * S    712px    491px   26px    0px    195px
 * 可変＋固定  94%   100%  -236px    236px    210px
 * 可変＋可変  94%    71.1%     0px      0px     26%
 * Sample どれか１行を左から順に下記の5つに上書き
*/
#pagetop{ width: 768px; }   /* 全体幅 */
#container{
   width: 532px;   /* メイン */
   margin-right: 26px; /* 左右入替 right←→left */
}
#main{ margin-right: 0px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 210px; }   /* サイド */

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

/* ----------------------------------------------------[ Body ] */

#container{ width:100%; float: left; overflow: hidden;}
から
#sideR{ float: right; }
までを以下に入替えます。

#container{
   margin-top: 18px;   /* メイン上部余白 */
   overflow: hidden;
   text-align: left;
}
.sidebar{
   padding-top: 18px;   /* メイン上部余白 */
   overflow: hidden;
   text-align: left;
}

記事本文で使用可能な画像の大きさ目安

 * LL  640px / L  530px / M  480px / S  340px / 可変  変動

固定幅　2カラム

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

全体幅 = メイン + 左右入替数値 + サイド　となるように幅を指定します。下記はそのサンプルです。サンプル通りにする必要はありません。
左右入替数値 がメインとサイドの間の余白になります。増減させた分だけ、全体幅も増減させます。左右入替数値 26px→28px 全体幅 768px→770px

サイドバー右

/* ----------------------------------------------------[ 左右入替え ]*/
#container{ float: left; }
.sidebar{ float: right; }

/* S　712px 491px 26px 0px 195px

/* ----------------------------------------------------[ 幅変更 S ]*/
#pagetop{ width: 712px; }   /* 全体幅 */
#container{
   width: 491px;   /* メイン */
   margin-right: 26px; /* 左右入替 right←→left */
}
#main{ margin-right: 0px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 195px; }   /* サイド */

/* M　768px 532px 26px 0px 210px

/* ----------------------------------------------------[ 幅変更 M ]*/
#pagetop{ width: 768px; }   /* 全体幅 */
#container{
   width: 532px;   /* メイン */
   margin-right: 26px; /* 左右入替 right←→left */
}
#main{ margin-right: 0px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 210px; }   /* サイド */

/* L　823px 582px 26px 0px 215px

/* ----------------------------------------------------[ 幅変更 L ]*/
#pagetop{ width: 823px; }   /* 全体幅 */
#container{
   width: 582px;   /* メイン */
   margin-right: 26px; /* 左右入替 right←→left */
}
#main{ margin-right: 0px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 215px; }   /* サイド */

/* LL　932px 681px 26px 0px 225px

/* ----------------------------------------------------[ 幅変更 LL ]*/
#pagetop{ width: 932px; }   /* 全体幅 */
#container{
   width: 681px;   /* メイン */
   margin-right: 26px; /* 左右入替 right←→left */
}
#main{ margin-right: 0px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 225px; }   /* サイド */

サイドバー左

左右入替えと幅変更の left right を入替えます。他のサイズも同様です。

/* ----------------------------------------------------[ 左右入替え ]*/
#container{ float: right; }
.sidebar{ float: left; }

/* M　768px 532px 26px 0px 210px

/* ----------------------------------------------------[ 幅変更 M ]*/
#pagetop{ width: 768px; }   /* 全体幅 */
#container{
   width: 532px;   /* メイン */
   margin-left: 26px; /* 左右入替 right←→left */
}
#main{ margin-left: 0px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 210px; }   /* サイド */

可変幅　2カラム

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

サイドバー右

可変＋固定 左右入替 には (サイドバーの幅 + 余白) の数値を。左右入替 には、可変＋固定 左右入替 のマイナス値を入れます。
左右入替数値 - サイド幅 = メインとサイドバー間の余白
下記のサンプルではメインとサイドバーの間に 26px(236-210) の隙間ができます。隙間を 4px 広げる場合は、左右入替を -240px 240px とします。減らすときはその逆です。
max-width: 960px; /* 最大幅 */ min-width: 760px; /* 最小幅 */
はウインドウを広げたときの限界値です。必要であれば、追記してください。

/* ----------------------------------------------------[ 左右入替え ]*/
#container{ float: left; }
.sidebar{ float: right; }

/* 可変＋固定　94%　100%　-236px　236px　210px

/* ----------------------------------------------------[ 幅変更 可＋固 ]*/
#pagetop{ width: 94%;max-width: 960px;min-width: 760px; }   /* 全体幅 */
#container{
   width: 100%;   /* メイン */
   margin-right: -236px; /* 左右入替 right←→left */
}
#main{ margin-right: 236px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 210px; }   /* サイド */

サイドバー左

左右入替えと幅変更の left right を入替えます。

/* ----------------------------------------------------[ 左右入替え ]*/
#container{ float: right; }
.sidebar{ float: left; }
/* ----------------------------------------------------[ 幅変更 可＋固 ]*/
#pagetop{ width: 94%;max-width: 960px;min-width: 760px; }   /* 全体幅 */
#container{
   width: 100%;   /* メイン */
   margin-left: -236px; /* 左右入替 right←→left */
}
#main{ margin-left: 236px; } /* 可変＋固定 左右入替 right←→left */
.sidebar{ width: 210px; }   /* サイド */

3カラムのみ　HTML編集：メイン部分にコンテンツを入れるときの注意事項

プラグイン3と記事の間にブログパーツや広告などを入れるとき

<!--/plugin-->
<!--Plugin3[1]--><!--/index_area-->

ここにdiv要素などを入れる

<!--topentry-->

このとき、入れる要素には必ず共通の class をつけてください。ここでは ePlus というクラスをつけます。

<!--/plugin-->
<!--Plugin3[1]--><!--/index_area-->

<div class="ePlus">
ここに入れたいブログパーツの記述
</div>

<!--topentry-->

クラスをもう一つ使う場合は class="ePlus hoge" とします。
※クラスhogeには左右のマージンを指定しないでください。上下の余白は指定しても問題ありません。

個別ページの記事とコメントの間にブログパーツを入れるとき

【einfach】の場合

<!--/topentry-->

<!--permanent_area-->
<div class="ePlus">
ここに入れたいブログパーツの記述
</div>
<!--/permanent_area-->

<!--comment_area-->

【einfach-l】の場合

<div class="hoge">
ここに入れたいブログパーツの記述
</div>

<!--comment_area-->

『einfach-l』は、記事とコメントが同じブロックの中にある（ひと繋ぎになっている）ので、共通の class をつける必要はありません。プラグイン3のようにメイン部分と分離された（ひと繋ぎになっていない）箇所に、ブログパーツを入れるときのみ、共通の class をつける必要があります。

『einfach』→追加する要素には共通の class="ePlus" をつける
『einfach-l』→ひと繋ぎになっていない箇所に要素を追加するときは共通の class="ePlus" をつける。ひと繋ぎになっている記事やコメント、トラックバックの間に入れるときは共通の class は不要。

そして、スタイルシート幅変更の .entryBlock,.pThird の後に追加した共通のクラスを入れ、余白などのプロパティを追加します。

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

/* ----------------------------------------------------[ 幅変更 可＋固 ]*/
#pagetop{ width: 96%; }   /* 全体幅 */
#sideL{ width: 193px;}   /* 左幅 */
#sideR{ width: 193px;}   /* 右幅 */
#main{ margin-left : -193px;}   /* 左幅の-値 */
#container{ margin-right: -193px;}   /* 右幅の-値 */
.entryBlock,.pThird,.ePlus{
   margin-left : 209px;   /* 左幅＋15程度の数値 */
   margin-right : 209px;   /* 右幅＋15程度の数値 */
}

追加要素のプロパティをスタイルシートに追記。
margin は margin-bottom か margin-top のみ使います。overflow:hidden はたぶんあった方がよいです。

/* ----------------------------------------------------[ 追加 ]
*/
.ePlus{
   margin-bottom: 3.3em;   /* 下の余白 */
   padding: 0 5px;   /* 左右内余白 */
   overflow: hidden;
   font-size: 82%;   /* 文字サイズ */
   color: #ffffff;   /* 文字色 */
}

『einfach-l』の共通 class ではない hoge には 自由にプロパティをつけても構いません。

/* ----------------------------------------------------[ 追加 ]
*/
.hoge{
   margin: 0 0 2em 0;   /* 上右下左の余白 */
   padding: 0 5px;   /* 左右内余白 */
   font-size: 82%;   /* 文字サイズ */
   color: #000000;   /* 文字色 */
}
関連記事