Paroday

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

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

hellblau-i

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

paza-hellblau-i
■hellblau-i
サンプル

右-back8 左-back8
右ハーフ-back8 左ハーフ-back8

hellblau-s : 背景2種
右-back8 左-back4

3カラム
back4 back8

履歴

上部画像の差し替え

用意する画像の横幅は メイン幅 - 50px のものが最適です。

【hellblau】back画像使用

01 02

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

(1)幅変更 --- */ の 以下の箇所を丸ごと変更します

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}

変更後

#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwb-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0; }

「bw」の直後に「b」を入れます。他のサイズの場合も同様です。
bwb-446、bwb-486、bwb-536、bwb-576、bwb-640、bwb-720

(2)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12.jpg) 0px 20px no-repeat;

(3)全体背景--- のbackgroundを以下に変更します 「left」「top」「repeat」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
}

数値を4~9に変更することで背景色が変化します。
back4、back5、back6、back7、back8、back9
back4、back5であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※#3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back5.gif) left top repeat;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back6.gif) left top repeat;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back7.gif) left top repeat;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back9.gif) left top repeat;

(4)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。記事上部画像が、sky11,12であれば、#66a360でも違和感ないと思います。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(5)サイドバーリンク色--- 背景画像に合わせて文字色を変更します
※全体背景がback4,6などのときは#000000でもよいかもしれません。

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します

※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau】bh-画像使用

03 04

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

(1)初期状態ではバランスが悪いので、左右を入替えるか、記事タイトルデザインを反転させた方がよいかもしれません。
※ここでは左右を入替えることとします(左サイドバー)。

/* left → right right → left ------------------- 左右入替え --- */
div.main{ float: right; }
div.right{ float:left; }
#b-top{ text-align: right; }
ul.t-login{ text-align: left; }

最後のul.t-loginの1行は、ダウンロード時期によっては必要ありません。

(2)幅変更 --- */ の 以下の箇所を丸ごと変更します

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}

■変更後:左サイドバーのとき

#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwa-536.gif);
background-position: 225px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0; }

「bw」の直後に「a」を入れます。他のサイズの場合も同様です。
bwa-486、bwa-536、bwa-576、bwa-640、bwa-720
positionにはサイドバーと同じ数値を入れます→「255px」

■変更後:右サイドバーのとき

#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwar-536.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0; }

「bw」の直後に「ar」を入れます。他のサイズの場合も同様です。
bwar-486、bwar-536、bwar-576、bwar-640、bwar-720
positionには「0px」を入れます

(3)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12.jpg) 0px 20px no-repeat;

(4)全体背景--- のbackgroundを以下に変更します

■変更後:左サイドバーのとき 「bhr-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bh-04、bh-05、bh-06、bh-07、bh-08、bh-09
bh-04、bh-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき 「bhr-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bhr-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bhr-04、bhr-05、bhr-06、bhr-07、bhr-08、bhr-09
bhr-04、bhr-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※#3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-04.gif) center top repeat-y;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-05.gif) center top repeat-y;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-06.gif) center top repeat-y;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-07.gif) center top repeat-y;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-09.gif) center top repeat-y;

(5)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。記事上部画像が、sky11,12であれば、#66a360でも違和感ないと思います。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(6)サイドバーリンク色--- 背景画像に合わせて文字色を変更します

※全体背景がback4,6などのときは#000000でもよいかもしれません。

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します
※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau-s】bh-画像

03 04

【hellbalau】bh-画像使用と同じ見た目になります。画像が表示されないときは真っ白になってしまうので、可変化しないのであれば、【hellbalau】をbh-画像使用にカスタマイズした方がよいかもしれません。

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

(1)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11l.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12l.jpg) 0px 20px no-repeat;

(2)サイドバー画像 --- */ の 以下の箇所を変更します

■変更後:左サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08b-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08b」を入れます。他のサイズの場合も同様です。
08b-205、08b-215、08b-225、08b-235、08b-237、08b-245、08b-255、08b-265、08b-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04b-237、05b-237、06b-237、07b-237、08b-237、09b-237
04b-、05b-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08br-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08br」を入れます。他のサイズの場合も同様です。
08br-205、08br-215、08br-225、08br-235、08br-237、08br-245、08br-255、08br-265、08br-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04br-237、05br-237、06br-237、07br-237、08br-237、09br-237
04br-、05br-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:左右共通

div.right{ background: #9fbfcf ; }/* 必要に応じて削除 */

上記を丸ごと削除します。

(4)全体背景--- のbackgroundを以下に変更します

■変更後:左サイドバーのとき 「bh-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bh-04、bh-05、bh-06、bh-07、bh-08、bh-09
bh-04、bh-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき 「bhr-」「center」「top」「repeat-y」

body {
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bhr-08.gif) center top repeat-y;
}

数値を4~9に変更することで背景色が変化します。
bhr-04、bhr-05、bhr-06、bhr-07、bhr-08、bhr-09
bhr-04、bhr-05であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-04.gif) center top repeat-y;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-05.gif) center top repeat-y;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-06.gif) center top repeat-y;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-07.gif) center top repeat-y;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-08.gif) center top repeat-y;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-09.gif) center top repeat-y;

(5)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。記事上部画像が、sky11,12であれば、#66a360でも違和感ないと思います。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(6)サイドバーリンク色--- 背景画像に合わせて文字色を変更します

※全体背景がback4,6などのときは#000000でもよいかもしれません。

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します
※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau-s】異なる背景画像

06 07

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

(1)記事上部画像--- の画像を 9→11に、位置を 25px→20px に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11l.jpg) 0px 20px no-repeat;

同様に固定ページの画像も 10→12、25px→20px に変更します。

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12l.jpg) 0px 20px no-repeat;

(2)サイドバー画像 --- */ の 以下の箇所を変更します

■変更後:左サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08b-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08b」を入れます。他のサイズの場合も同様です。
08b-205、08b-215、08b-225、08b-235、08b-237、08b-245、08b-255、08b-265、08b-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04b-237、05b-237、06b-237、07b-237、08b-237、09b-237
04b-、05b-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:右サイドバーのとき

#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/08br-237.gif);
 background-color: #ffffff; /* メイン部分背景色 */
 background-repeat: repeat-y;
}

「-サイド幅」の直前に「08br」を入れます。他のサイズの場合も同様です。
08br-205、08br-215、08br-225、08br-235、08br-237、08br-245、08br-255、08br-265、08br-275
「b」の直前の数値を4~9に変更することで背景が変化します。
04br-237、05br-237、06br-237、07br-237、08br-237、09br-237
04br-、05br-であれば、記事上部画像をsky9,10にしても違和感はないと思います。

■変更後:左右共通

div.right{ background: #9fbfcf ; }/* 必要に応じて削除 */

上記を丸ごと削除します。

(4)全体背景--- のbackgroundを以下に変更します 「back4」「left」「top」「repeat」

body {
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
}

数値を4~9に変更することで背景色が変化します。
back4、back5、back6、back7、back8、back9

※#69a9c9は画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back5.gif) left top repeat;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back6.gif) left top repeat;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back7.gif) left top repeat;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back9.gif) left top repeat;

(5)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは#3389bbで統一。

background: #3490c0;   /* 日付背景色 */
border-bottom: 1px #3490c0 solid;   /* タイトル下線色 */
color: #3490c0;   /* タイトルリンク色 */
color: #3490c0;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #3490c0;   /* ブログタイトル */

(6)サイドバーリンク色--- 背景画像に合わせて文字色を変更します

color: #ffee00 ; /* 本文リンク */

(6)plugin-calender--- back8の場合はカレンダーの土曜日が見難いので変更します
※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

【hellblau3カラム】back画像使用

01 02

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

(1)幅変更 --- */ の 以下の箇所を丸ごと変更します

#pagetop{ width: 886px ;}  /* 全体幅 メイン+左+右*/
div.leftside{ width: 681px ;}  /* メイン幅+左サイド幅 */
div.main{ width: 476px ;}  /* メイン幅 */
div.left{ width: 205px ;}  /* 左サイド幅 */
div.right{ width: 205px ;}  /* 右サイド幅 */
#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-476.gif);
background-position: 205px 0px;
background-repeat: repeat-y;
}

変更後

#pagetop{ width: 896px ;}  /* 全体幅 メイン+左+右*/
div.leftside{ width: 691px ;}  /* メイン幅+左サイド幅 */
div.main{ width: 486px ;}  /* メイン幅 */
div.left{ width: 205px ;}  /* 左サイド幅 */
div.right{ width: 205px ;}  /* 右サイド幅 */
#pagetop,#pagetop .main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bwb-486.gif);
background-position: 205px 0px;
background-repeat: repeat-y;
}
#pagetop div.main{ background-position: 0px; }

全体幅とメイン幅(3行目まで)を10px増やします。これは他の[S][M][L][LL]サイズも同様です。
(例)L 956px 746px 536px
「bw」の直後に「b」を入れ、ここも10増やします。他のサイズの場合も同様です。
bwb-446、bwb-486、bwb-536、bwb-576、bwb-640、bwb-720

(2)記事上部画像--- の画像を 9→11 に、marginを 20→25 に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky11s.jpg) 0px 20px no-repeat;
padding-top: 325px;
margin: 0 25px;

同様に固定ページの画像も 10→12 に変更

background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky12s.jpg) 0px 20px no-repeat;

(3)全体背景--- のbackgroundを以下に変更します 「left」「top」「repeat」

body {
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
}

数値を4~9に変更することで背景色が変化します。
back4、back5、back6、back7、back8、back9
back4、back5であれば、記事上部画像をsky9,10にしても違和感はないと思います。

※#3389bbは画像が表示されないときの背景色。

/* 各背景画像の背景色サンプル */
background: #69a9c9 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back4.gif) left top repeat;
background: #66a3c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back5.gif) left top repeat;
background: #66a6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back6.gif) left top repeat;
background: #43a3d3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back7.gif) left top repeat;
background: #3389bb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back8.gif) left top repeat;
background: #3282b5 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/back9.gif) left top repeat;

(4)記事タイトルデザイン--- の各色を好みに合わせて変更します

※ここでは全体背景色に近い色で統一。back8,9であれば、#3490c0など。

background: #63a9c6;   /* 日付背景色 */
border-bottom: 1px #63a9c6 solid;   /* タイトル下線色 */
color: #63a9c6;   /* タイトルリンク色 */
color: #63a9c6;   /* カテゴリリンク色 */

文字色 --- のブログタイトルも同じような色で。

color: #63a9c6;   /* ブログタイトル */

(5)サイドバーリンク色--- 背景画像に合わせて文字色を変更します
※他候補としては#ffff00、#ffee00など。

color: #000000 ; /* 本文リンク */

(6)plugin-calender--- カレンダーの土曜日が見難いので変更します

※カレンダーを設置しているときだけの変更。
※変更箇所はスタイルシートの下の方にあります。

.calender th#sat{
 color: #0000cc;
}

関連記事