Paroday

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

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

pada-hellblau

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

■pada-hellblau : プレビュー : ライン
pada-hellblau

履歴

メインの両端にラインを引く

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

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

#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,#pagetop div.main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-9fbfcf-476.gif);
background-repeat: repeat-y;
}
#pagetop{ background-position: 205px 0px; }

bw-背景色-メイン幅.gif
赤字部分で線の色が変わります。線の色は全体背景色と同じ色(値)にします。
似たような色ばかりなので変更しなくとも違和感はないかもしれません。

背景色は6色
初期 : 9fbfcf 薄青 : 93b9cf 緑 : 80b0c3 濃色 : 8fafbf 青 : 99b6cf 明緑 : 84b9cb

メイン幅は【paza-hellbalu】を含むサンプルの8つのサイズ(436,476,486,526,536,566,640,720).gifだけ用意しています。

[例]bw-9fbfcf-526.gif、bw-80b0c3-436.gif


記事上部画像--- */ の位置を 20px→18px に変更

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

同様に固定ページの画像位置も 20px→18px に変更します。


>>両端ライン プレビュー

固定幅[ S ]

/* --- 変更後 : S ---------------------------------------- 幅変更 --- */
/* S  836px  636px  436px  200px  436.gif  200px */

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

/*  記事上部画像---再配布× 差し替え○-----------------------------

div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9ss.jpg) 0px 20px no-repeat;
padding-top: 315px;
margin: 0 20px;
text-align: left;
overflow: hidden;
}
div.pmain{  /* 固定ページ blog-entry-xx.html の画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10ss.jpg) 0px 20px no-repeat;
}

padding-topを10px減らし、sky9,sky10の後ろに英字小文字の「ss」を加えます

固定幅[ M ]

/* --- 初期値 : M ---------------------------------------- 幅変更 --- */
/* M  886px  681px  476px  205px  476.gif  205px */

#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;
}

/*  記事上部画像---再配布× 差し替え○-----------------------------

div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9s.jpg) 0px 20px no-repeat;
padding-top: 325px;
margin: 0 20px;
text-align: left;
overflow: hidden;
}
div.pmain{  /* 固定ページ blog-entry-xx.html の画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10s.jpg) 0px 20px no-repeat;
}

sky9,sky10の後ろに英字小文字の「s」を加えます

固定幅[ L ]

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

/* --- 変更後 : L ---------------------------------------- 幅変更 --- */
/* L  946px  736px  210px  210px  526.gif  210px */

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

/*  記事上部画像---再配布× 差し替え○-----------------------------

div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9.jpg) 0px 20px no-repeat;
padding-top: 325px;
margin: 0 20px;
text-align: left;
overflow: hidden;
}
div.pmain{  /* 固定ページ blog-entry-xx.html の画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10.jpg) 0px 20px no-repeat;
}

skys1,skys2の後ろには何もつけません

固定幅[ LL ]

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

/* --- 変更後 : LL ---------------------------------------- 幅変更 --- */
/* LL  996px  781px  215px  215px  566.gif  215px */

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

/*  記事上部画像---再配布× 差し替え○-----------------------------

div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9m.jpg) 0px 20px no-repeat;
padding-top: 325px;
margin: 0 20px;
text-align: left;
overflow: hidden;
}
div.pmain{  /* 固定ページ blog-entry-xx.html の画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10m.jpg) 0px 20px no-repeat;
}

sky9,sky10の後ろに英字小文字の「m」エムを加えます

右上ログインメニューを削除

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

t-login部分を丸ごと削除

<div class="t-login">
<ul><li class="loginlist"><a href="<%url>" title="<%blog_name>">Home</a></li><li class="loginlist"><a href="<%url>archives.html">All</a></li><li class="loginlist"><a href="<%server_url>control.php">Log in</a></li><li class="loginlist"><a href="<%url>?xml">RSS</a></li></ul>
</div>

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

---body---- */ 変更箇所はスタイルシート欄の中間くらいにあります

.left div.r-mainと同じ数値を入れます。3px→18px

.right div.r-main{
   margin: 18px 0 0 14px;
   text-align: left;
}

関連記事