hellblau-i
- 2000-03-19 日 02:15
- FC2ブログテンプレート
検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。
-
- ■hellblau-i
- サンプル
右-back8 左-back8
右ハーフ-back8 左ハーフ-back8hellblau-s : 背景2種
3カラム
右-back8 左-back4
back4 back8
- hellblau : 幅変更などの方法はhellblauを参考
- 【hellblau】back画像使用
- 【hellblau】bh-画像使用
- 【hellblau-s】bh-画像
- 【hellblau-s】異なる背景画像
- 【hellblau3カラム】back画像使用
履歴
上部画像の差し替え
用意する画像の横幅は メイン幅 - 50px のものが最適です。
【hellblau】back画像使用
変更場所 ▼ スタイルシートの編集
(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-画像使用
変更場所 ▼ スタイルシートの編集
(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-画像
【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】異なる背景画像
変更場所 ▼ スタイルシートの編集
(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画像使用
変更場所 ▼ スタイルシートの編集
(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;
}
- 関連記事