Paroday

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

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

pazb-linie

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

■pazb-linie : プレビュー  /  ■pazw-linie : プレビュー
pazb-linie pazw-linie

履歴

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

linie

記事の投稿時間を消す

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

<li><%topentry_hour>:<%topentry_minute></li>

上記部分を削除します。

文字サイズ

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

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

.eBody,.fc2_footer,.titleBody{ font-size: 94%; }/* 記事本文 */

コメントの絵文字を追加

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

変更箇所は2つあります「<!--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>

記事日付をカテゴリの横に移動

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

<a href="blog-date-<%topentry_year><%topentry_month><%topentry_day>.html"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a>

上記部分を削除します(末尾の半角スペースも含む)

そのすぐ下にある eCategory に赤字を追加します。

【カテゴリの前に日付を入れる場合】

<ul class="eCategory"><li><a href="blog-date-<%topentry_year><%topentry_month><%topentry_day>.html"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a></li><!--parent_category--><li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li><!--/parent_category--><li><a href="<%topentry_category_link>"><%topentry_category></a></li></ul>

【カテゴリの後ろに日付を入れる場合】

<ul class="eCategory"><!--parent_category--><li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li><!--/parent_category--><li><a href="<%topentry_category_link>"><%topentry_category></a></li><li><a href="blog-date-<%topentry_year><%topentry_month><%topentry_day>.html"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a></li></ul>

ブログタイトルを画像に変更する

[A][B][C]いずれかを選択。

[A]タイトルテキストを画像に変更する場合

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

<%blog_name>を変更。

<h1 class="title"><a href="<%url>"><%blog_name></a></h1>

赤字部分を変更。画像アドレスにタイトル画像を入れます。

<h1 class="title"><a href="<%url>"><img src="画像アドレス" alt="<%blog_name>" height="画像の縦幅" width="画像の横幅" /></a></h1>

画像の幅はなくても表示はされます。

<h1 class="title"><a href="<%url>"><img src="画像アドレス" alt="<%blog_name>" /></a></h1>

[B]ヘッダ部分(ページ上部)にタイトル画像を入れる場合

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

「---[ Body ]」 の少し下。#pagetopに赤字部分を追加。画像アドレスにヘッダに表示したいタイトル画像を入れます。

#pagetop{
  margin: 0 auto;
  background:url(画像アドレス) 0px 0px no-repeat;
}

その少し下。h1.titleの赤字部分を変更。100pxがタイトル画像の高さになります。数値を増減させて、調整します。

h1.title{
  margin: 0 0 100px;
  padding: 4px 0.1em 0.1em;
  line-height: 1;
  font-weight: normal;
  text-align: left;
  letter-spacing: 1px;
}

[C]ヘッダ部分(ページ上部)の端から端までにタイトル画像を入れる場合

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

bodyに赤字部分を追加。画像アドレスにヘッダに表示したいタイトル画像を入れます。

body{
  background:url(画像アドレス) 0px 0px no-repeat;
(略)
}

その少し下。h1.titleの赤字部分を変更。100pxがタイトル画像の高さになります。数値を増減させて、調整します。

h1.title{
  margin: 0 0 100px;
  padding: 4px 0.1em 0.1em;
  line-height: 1;
  font-weight: normal;
  text-align: left;
  letter-spacing: 1px;
}

固定幅 2カラム

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

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

サイドバー右

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

/* S 680px 459px 31px 0px 190px

/* ----------------------------------------------------[ 幅変更 S ]*/
#pagetop{ width: 680px; }   /* 全体幅 */
#main{
   width: 459px;   /* メイン */
   margin-right: 31px; /* 左右入替 right←→left */
}
#inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */
#sidebar{ width: 190px; }   /* サイド */

/* M 759px 521px 28px 0px 210px

/* ----------------------------------------------------[ 幅変更 M ]*/
#pagetop{ width: 759px; }   /* 全体幅 */
#main{
   width: 521px;   /* メイン */
   margin-right: 28px; /* 左右入替 right←→left */
}
#inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */
#sidebar{ width: 210px; }   /* サイド */

/* L 831px 583px 28px 0px 220px

/* ----------------------------------------------------[ 幅変更 L ]*/
#pagetop{ width: 831px; }   /* 全体幅 */
#main{
   width: 583px;   /* メイン */
   margin-right: 28px; /* 左右入替 right←→left */
}
#inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */
#sidebar{ width: 220px; }   /* サイド */

/* LL 957px 699px 28px 0px 230px

/* ----------------------------------------------------[ 幅変更 LL ]*/
#pagetop{ width: 957px; }   /* 全体幅 */
#main{
   width: 699px;   /* メイン */
   margin-right: 28px; /* 左右入替 right←→left */
}
#inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */
#sidebar{ width: 230px; }   /* サイド */

サイドバー左

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

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

/* M 759px 521px 28px 0px 210px

/* ----------------------------------------------------[ 幅変更 M ]*/
#pagetop{ width: 759px; }   /* 全体幅 */
#main{
   width: 521px;   /* メイン */
   margin-left: 28px; /* 左右入替 right←→left */
}
#inner{ margin-left: 0px; } /* 可変+固定 左右入替 right←→left */
#sidebar{ width: 210px; }   /* サイド */

可変幅 2カラム

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

Liquid[1] と Liquid[2] の前後にdivを追加

<div id="main">
         <!--Liquid[1]--><div id="inner">
         </div><!--Liquid[2]-->
</div>


<div id="sidebar">

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

サイドバー右

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

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

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

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

サイドバー左

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

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

固定幅 3カラム

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

全体幅を増やすと、メイン幅が広がります。左右幅 と 左右幅+20くらいの数値 の差がサイドバーとメインの間の余白になります。幅M の間隔を 3px 減らすときは、左右幅+20くらいの数値 を 213px 213px とし、全体幅を左右の合計値分(3+3)減らします。906 - 6 = 900px

/* S 819px 190px 190px -190px -190px 210px 210px

/* ----------------------------------------------------[ 幅変更 S ]*/
#pagetop{ width: 819px; }   /* 全体幅 */
#sideL{ width: 190px; }   /* 左幅 */
#sideR{ width: 190px; }   /* 右幅 */
#main{ margin-left : -190px; }   /* 左幅の -値 */
#mainSide{ margin-right: -190px; }   /* 右幅の -値 */
.eContent,.pContent,ul.navi{
   margin-left : 210px;   /* 左幅 +20 くらいの数値 */
   margin-right : 210px;   /* 右幅 +20 くらいの数値 */
}

/* M 906px 196px 196px -196px -196px 216px 216px

/* ----------------------------------------------------[ 幅変更 M ]*/
#pagetop{ width: 906px; }   /* 全体幅 */
#sideL{ width: 196px; }   /* 左幅 */
#sideR{ width: 196px; }   /* 右幅 */
#main{ margin-left : -196px; }   /* 左幅の -値 */
#mainSide{ margin-right: -196px; }   /* 右幅の -値 */
.eContent,.pContent,ul.navi{
   margin-left : 216px;   /* 左幅 +20 くらいの数値 */
   margin-right : 216px;   /* 右幅 +20 くらいの数値 */
}

/* L 950px 203px 203px -203px -203px 223px 223px

/* ----------------------------------------------------[ 幅変更 L ]*/
#pagetop{ width: 950px; }   /* 全体幅 */
#sideL{ width: 203px; }   /* 左幅 */
#sideR{ width: 203px; }   /* 右幅 */
#main{ margin-left : -203px; }   /* 左幅の -値 */
#mainSide{ margin-right: -203px; }   /* 右幅の -値 */
.eContent,.pContent,ul.navi{
   margin-left : 223px;   /* 左幅 +20 くらいの数値 */
   margin-right : 223px;   /* 右幅 +20 くらいの数値 */
}

/* LL 995px 203px 203px -203px -203px 223px 223px

/* ----------------------------------------------------[ 幅変更 LL ]*/
#pagetop{ width: 995px; }   /* 全体幅 */
#sideL{ width: 203px; }   /* 左幅 */
#sideR{ width: 203px; }   /* 右幅 */
#main{ margin-left : -203px; }   /* 左幅の -値 */
#mainSide{ margin-right: -203px; }   /* 右幅の -値 */
.eContent,.pContent,ul.navi{
   margin-left : 223px;   /* 左幅 +20 くらいの数値 */
   margin-right : 223px;   /* 右幅 +20 くらいの数値 */
}

可変幅 3カラム

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

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

/* ----------------------------------------------------[ 幅変更 可+固 ]*/
#pagetop{ width: 94%;max-width: 960px;min-width: 760px; }   /* 全体幅 */
#sideL{ width: 196px; }   /* 左幅 */
#sideR{ width: 196px; }   /* 右幅 */
#main{ margin-left : -196px; }   /* 左幅の -値 */
#mainSide{ margin-right: -196px; }   /* 右幅の -値 */
.eContent,.pContent,ul.navi{
   margin-left : 216px;   /* 左幅 +20 くらいの数値 */
   margin-right : 216px;   /* 右幅 +20 くらいの数値 */
}

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には左右のマージンを指定しないでください。上下の余白は指定しても問題ありません。

さらに他の箇所、たとえば、個別ページの記事とコメントの間にブログパーツを入れるときは、次のようになります。

<!--/topentry-->

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

<!--comment_area-->

このように追加する要素には共通の class="ePlus" をつけます。

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

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

/* ----------------------------------------------------[ 幅変更 可+固 ]*/
#pagetop{ width: 908px; }   /* 全体幅 */
#sideL{ width: 196px; }   /* 左幅 */
#sideR{ width: 196px; }   /* 右幅 */
#main{ margin-left : -196px; }   /* 左幅の -値 */
#mainSide{ margin-right: -196px; }   /* 右幅の -値 */
.eContent,.pContent,ul.navi,.ePlus{
   margin-left : 216px;   /* 左幅 +20 くらいの数値 */
   margin-right : 216px;   /* 右幅 +20 くらいの数値 */
}

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

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