pazw-hellblau
- 2000-03-13 月 23:10
- FC2ブログテンプレート
検索ワード「」は、Ctrlキー+Fキー（command+Fキー）で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。
■paza-hellblau : プレビュー : ライン / ■paza-hellblau-s : プレビュー（可変化）
- コメントを個別ページ以外でも表示
- 記事編集画面へのリンク
- 記事の投稿時間を消す
- 文字サイズの変更
- 記事下部ユーザータグのリンクを自分のブログ内に変更
- コメントの絵文字を追加
- 記事上部画像の削除
- 横幅の変更 S幅、M幅、L幅、LL幅、可変＋固定、その他
- サイドバー左右入替え
- 記事タイトルデザインの変更
- 両サイドの背景色・日付背景色の変更
- 背景を白色と指定色（ハーフ画像）に・日付背景色の変更
- メインの両端にラインを引く
- 右上ログインメニューを削除
- div.right{ background: #80b0c3 ; } /* 必要に応じて削除 */ について
- 【pada-hellblau】3カラム横幅変更等
- 【hellblau-i】
履歴
画像の差し替えについて
用意する画像の横幅は メイン幅 - 50px のものが最適です。
メインの両端にラインを引く
変更場所 ▼ スタイルシートの編集-検索ワード「幅変更」
(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 div.main{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-9fbfcf-536.gif);
background-repeat: repeat-y;
}
#pagetop{ background-position: 0px 0px; }
bw-背景色-メイン幅.gif
赤字(9fbfcf)部分で線の色が変わります。線の色は全体背景色と同じ色（値）にします。
似たような色ばかりなので変更しなくとも違和感はないかもしれません。
背景色は6色
初期 : 9fbfcf 薄青 : 93b9cf 緑 : 80b0c3 濃色 : 8fafbf 青 : 99b6cf 明緑 : 84b9cb
メイン幅は【pada-hellbalu】を含むサンプルの８つのサイズ（436,476,486,526,536,566,640,720）.gifだけ用意しています。
[例]bw-9fbfcf-640.gif、bw-80b0c3-536.gif
(2)記事上部画像--- */ の位置を 25px→23px に変更
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9s.jpg) 0px 23px no-repeat;
同様に固定ページの画像位置も 25px→23px に変更します。
両サイドの背景色・日付背景色の変更
変更場所 ▼ スタイルシートの編集-検索ワード「全体背景」
- 両サイドの背景同色変更 -
背景色にあわせて記事タイトルデザインの色も変更します。
背景をそのまま使用する場合は、記事タイトルデザイン部分だけ変更。
記事上部の画像を差し替えれば、黒や赤など他の色も使えると思います。
※サイド右左をクリックするとプレビューが開きます
■#9fbfcf（初期値）
全体背景 --- */
background: #9fbfcf;
記事タイトルデザイン --- */
background: #99bfcf; /* 日付背景色 */
border-bottom: 1px #90bdc7 solid; /* タイトル下線色 */
color: #83a9b9; /* タイトルリンク色 */
color: #83a9b9; /* カテゴリリンク色 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/93b9cf-237.gif);
div.right{ background: #93b9cf ; } /* 必要に応じて削除 */
■#8fafbf（濃い色）
全体背景 --- */
background: #8fafbf;
記事タイトルデザイン --- */
background: #8fafbf; /* 日付背景色 */
border-bottom: 1px #8fafbf solid; /* タイトル下線色 */
color: #83a9b9; /* タイトルリンク色 */
color: #83a9b9; /* カテゴリリンク色 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/8fafbf-237.gif);
div.right{ background: #8fafbf ; } /* 必要に応じて削除 */
■#93b9cf（薄青）
全体背景 --- */
background: #93b9cf;
記事タイトルデザイン --- */
background: #93b9cf; /* 日付背景色 */
border-bottom: 1px #93b9cf solid; /* タイトル下線色 */
color: #79aac3; /* タイトルリンク色 */
color: #79aac3; /* カテゴリリンク色 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/93b9cf-237.gif);
div.right{ background: #93b9cf ; } /* 必要に応じて削除 */
■#99b6cf（青）
全体背景 --- */
background: #99b6cf;
記事タイトルデザイン --- */
background: #99b6cf; /* 日付背景色 */
border-bottom: 1px #99b6cf solid; /* タイトル下線色 */
color: #89a6bf; /* タイトルリンク色 */
color: #89a6bf; /* カテゴリリンク色 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/99b6cf-237.gif);
div.right{ background: #99b6cf ; } /* 必要に応じて削除 */
■#80b0c3（緑）
全体背景 --- */
background: #80b0c3;
記事タイトルデザイン --- */
background: #80b0c3; /* 日付背景色 */
border-bottom: 1px #80b0c3 solid; /* タイトル下線色 */
color: #80a9b9; /* タイトルリンク色 */
color: #80a9b9; /* カテゴリリンク色 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/80b0c3-237.gif);
div.right{ background: #80b0c3 ; } /* 必要に応じて削除 */
■#84b9cb（明るい緑）
全体背景 --- */
background: #84b9cb;
記事タイトルデザイン --- */
background: #84b9cb; /* 日付背景色 */
border-bottom: 1px #84b9cb solid; /* タイトル下線色 */
color: #73abbe; /* タイトルリンク色 */
color: #73abbe; /* カテゴリリンク色 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/84b9cb-237.gif);
div.right{ background: #84b9cb ; } /* 必要に応じて削除 */
背景を白色と指定色（ハーフ画像）に・日付背景色の変更
変更場所 ▼ スタイルシートの編集-検索ワード「全体背景」
- 半分の色を変更 -
背景色にあわせて記事タイトルデザインの色も変更します。
背景をそのまま使用する場合は、記事タイトルデザイン部分だけ変更。
記事上部の画像を差し替えれば、黒や赤など他の色も使えると思います。
※サイド右左をクリックするとプレビューが開きます
【 hellblau 】 初期状態 : 両サイド背景色
hellblau でハーフ画像を使用する場合は、画像が表示されないときを考慮して、サイドバーに背景色をつけます。
全体背景 --- */ に赤字部分を追記
body{
background: #9fbfcf;
}
div.right{ background: #9fbfcf ; } /* 必要に応じて削除 */
【 hellblau-s 】 初期状態 : ハーフ画像
hellblau-s は サイドバー画像 --- に既に入れてあるので追記の必要はありません。
「サイドバー画像 ---」の 9fbfcf-237.gif と div.right{ background: #9fbfcf ; } は必ず同色（同じ値）に設定してください。サンプルでは全体背景とも同色にしていますが、全体背景のみ違う色にすると３色になります。
【サイドバー右】【 hellblau / hellblau-s 共通 】
のときは記事タイトルデザインの日付を反転する（左側に日付）などして、左右を安定させた方がよいかもしれません。そして、全体背景の画像アドレスに「r」アールを加えてください。加える箇所は「-」の前です。他の部分はサイドバー左と同じように変更します。
body{
background: #9fbfcf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bhr-ffffff.gif) center top repeat-y;
}
以下のサンプルではサイドバーを左にしています。
■#9fbfcf（初期値）
全体背景 --- */
body{
background: #9fbfcf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
}
記事タイトルデザイン --- */
background: #99bfcf; /* 日付背景色 */
border-bottom: 1px #90bdc7 solid; /* タイトル下線色 */
color: #83a9b9; /* タイトルリンク色 */
color: #83a9b9; /* カテゴリリンク色 */
div.right{ background: #9fbfcf ; } /* 必要に応じて削除 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-237.gif);
■#8fafbf（濃い色）
全体背景 --- */
body{
background: #8fafbf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
}
記事タイトルデザイン --- */
background: #8fafbf; /* 日付背景色 */
border-bottom: 1px #8fafbf solid; /* タイトル下線色 */
color: #83a9b9; /* タイトルリンク色 */
color: #83a9b9; /* カテゴリリンク色 */
div.right{ background: #8fafbf ; } /* 必要に応じて削除 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/8fafbf-237.gif);
■#93b9cf（薄青）
全体背景 --- */
body{
background: #93b9cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
}
記事タイトルデザイン --- */
background: #93b9cf; /* 日付背景色 */
border-bottom: 1px #93b9cf solid; /* タイトル下線色 */
color: #79aac3; /* タイトルリンク色 */
color: #79aac3; /* カテゴリリンク色 */
div.right{ background: #93b9cf ; } /* 必要に応じて削除 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/93b9cf-237.gif);
■#99b6cf（青）
全体背景 --- */
body{
background: #99b6cf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
}
記事タイトルデザイン --- */
background: #99b6cf; /* 日付背景色 */
border-bottom: 1px #99b6cf solid; /* タイトル下線色 */
color: #89a6bf; /* タイトルリンク色 */
color: #89a6bf; /* カテゴリリンク色 */
div.right{ background: #99b6cf ; } /* 必要に応じて削除 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/99b6cf-237.gif);
■#80b0c3（緑）
全体背景 --- */
body{
background: #80b0c3 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
}
記事タイトルデザイン --- */
background: #80b0c3; /* 日付背景色 */
border-bottom: 1px #80b0c3 solid; /* タイトル下線色 */
color: #80a9b9; /* タイトルリンク色 */
color: #80a9b9; /* カテゴリリンク色 */
div.right{ background: #80b0c3 ; } /* 必要に応じて削除 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/80b0c3-237.gif);
■#84b9cb（明るい緑）
全体背景 --- */
body{
background: #84b9cb url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
}
記事タイトルデザイン --- */
background: #84b9cb; /* 日付背景色 */
border-bottom: 1px #84b9cb solid; /* タイトル下線色 */
color: #73abbe; /* タイトルリンク色 */
color: #73abbe; /* カテゴリリンク色 */
div.right{ background: #84b9cb ; } /* 必要に応じて削除 */
【hellblau-s】は以下も変更 / サイドバー画像 ---
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/84b9cb-237.gif);
記事編集画面へのリンク
記事本文下の投稿時間の左横に空白のリンクがあります。ログイン状態のときのみ編集画面に飛びます。
記事の投稿時間を消す
変更場所 ▼ HTMLの編集-検索ワード「class="time"」
<li class="time"><%topentry_hour>:<%topentry_minute></li><!--allow_tb--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback-<%topentry_title>">Trackback : <%topentry_tb_num></a></li><!--/allow_tb-->
<!--allow_comment--><li>
上記部分を丸ごと以下に変更します。
<!--allow_tb--><li class="time"><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback-<%topentry_title>">Trackback : <%topentry_tb_num></a></li><!--/allow_tb-->
<!--allow_comment--><li<!--deny_tb--> class="time"<!--/deny_tb-->>
CommentとTrackbackの位置を入替える場合は
Edit</a></li> と <li><a href="#pagetop">Top</a></li> の間を以下に変更
<!--allow_comment--><li class="time"><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment-<%topentry_title>">Comment : <%topentry_comment_num></a></li><!--/allow_comment-->
<!--allow_tb--><li<!--deny_comment--> class="time"<!--/deny_comment-->><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback-<%topentry_title>">Trackback : <%topentry_tb_num></a></li><!--/allow_tb-->
■2009/02/13以前にダウンロード
<span class="time"><%topentry_hour>:<%topentry_minute></span> |
上記部分を丸ごと削除します。
文字サイズ[ big ]
変更場所 ▼ スタイルシートの編集
下記のように数値部分を変更すると文字の大きさを変えられます。
%指定をやめてpx指定にする場合は94%→15.04px / 82%→13.12px に変更してください。
.e-text,div.p-third .s-text,.titlebody{ font-size: 94%; } /* --記事本文-- */
記事下部ユーザータグのリンクを自分のブログ内に変更
※初期版以外は変更済です
変更場所 ▼ HTMLの編集-検索ワード「jointtag」
<%topentry_jointtag> 部分を丸ごと赤字に変更します。
<!--tag_list--><a href="./?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a> <!--/tag_list-->
コメントの絵文字を追加
変更場所 ▼ HTMLの編集-検索ワード「c-form」
変更箇所は２つあります「<!--comment_area-->」と「<!--edit_area-->」赤字部分を追加してください。
<p class="l-clear"><label for="comment">Comment</label></p>
<script type="text/javascript" src="<%server_url>load.js"></script>
■2009/02/13以前にダウンロード
<label for="comment">Comment</label><br />
<script type="text/javascript" src="<%server_url>load.js"></script><br />
記事上部画像の削除
変更場所 ▼ スタイルシートの編集
backgroundを削除し、330pxを25pxに変更します。
/* 記事上部画像---再配布× 差し替え○-----------------------------
div.m-main{
padding-top: 25px;
margin: 0 25px;
text-align: left;
overflow: hidden;
}
固定幅[ S ]
【 hellblau 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : S ---------------------------------------- 幅変更 --- */
/* S 701px 486px 215px 486.gif （右 : 0px 0px / 左 : 215px 0px） */
#pagetop{ width: 701px ; } /* 全体幅 */
div.main{ width: 486px ;} /* メイン */
div.right{ width: 215px ; } /* サイドバー */
#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-486.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
メイン幅と画像の数値部分を同じ値にします
サイドバーが左のときは background-position: 215px 0px; になります
/* 記事上部画像---再配布× 差し替え○-----------------------------
div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9s.jpg) 0px 25px no-repeat;
padding-top: 330px;
margin: 0 25px;
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 25px no-repeat;
}
sky9,sky10の後ろに英字小文字の「s」を加えます
【 hellblau-s 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : S ---------------------------------------- 幅変更 --- */
/* S 701px 486px 215px 0px 0px 215.gif */
#pagetop{ width: 701px ; } /* 全体幅 */
div.main{ width: 486px ;} /* メイン */
div.right{ width: 215px ; } /* サイドバー */
div.main{ margin-left: 0px; } /* 可変時 : サイドバーのマイナス値 */
.container{ margin-left: 0px; } /* 可変時 : サイドバーと同じ */
/* ------------------------------------------- サイドバー画像 --- */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-215.gif);
サイドバー幅と画像の数値部分を同じ値にします
/* 記事上部画像---再配布× 差し替え○-----------------------------
sky9,sky10の後ろに英字小文字の「s」を加えます
固定幅[ M ]
【 hellblau 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : M ---------------------------------------- 幅変更 --- */
/* M 761px 536px 225px 536.gif （右 : 0px 0px / 左 : 225px 0px） */
#pagetop{ width: 761px ; } /* 全体幅 */
div.main{ width: 536px ;} /* メイン */
div.right{ width: 225px ; } /* サイドバー */
#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;
}
メイン幅と画像の数値部分を同じ値にします
サイドバーが左のときは background-position: 225px 0px; になります
/* 記事上部画像---再配布× 差し替え○-----------------------------
div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9.jpg) 0px 25px no-repeat;
padding-top: 330px;
margin: 0 25px;
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 25px no-repeat;
}
sky9,sky10の後ろには何もつけません
【 hellblau-s 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : M ---------------------------------------- 幅変更 --- *//* M 761px 536px 225px 0px 0px 225.gif */
#pagetop{ width: 761px ; } /* 全体幅 */
div.main{ width: 536px ;} /* メイン */
div.right{ width: 225px ; } /* サイドバー */
div.main{ margin-left: 0px; } /* 可変時 : サイドバーのマイナス値 */
.container{ margin-left: 0px; } /* 可変時 : サイドバーと同じ */
/* ------------------------------------------- サイドバー画像 --- */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-225.gif);
サイドバー幅と画像の数値部分を同じ値にします
/* 記事上部画像---再配布× 差し替え○-----------------------------
sky9,sky10の後ろには何もつけません
固定幅[ L ]
【 hellblau 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : L ---------------------------------------- 幅変更 --- */
/* L 877px 640px 237px 640.gif （右 : 0px 0px / 左 : 237px 0px） */
#pagetop{ width: 877px ; } /* 全体幅 */
div.main{ width: 640px ;} /* メイン */
div.right{ width: 237px ; } /* サイドバー */
#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-640.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
メイン幅と画像の数値部分を同じ値にします
サイドバーが左のときは background-position: 237px 0px; になります
/* 記事上部画像---再配布× 差し替え○-----------------------------
div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9l.jpg) 0px 25px no-repeat;
padding-top: 330px;
margin: 0 25px;
text-align: left;
overflow: hidden;
}
div.pmain{ /* 固定ページ blog-entry-xx.html の画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10l.jpg) 0px 25px no-repeat;
}
sky9,sky10の後ろに英字小文字の「l」（エル）を加えます
【 hellblau-s 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : L ---------------------------------------- 幅変更 --- */
/* L 877px 640px 237px 0px 0px 237.gif */
#pagetop{ width: 877px ; } /* 全体幅 */
div.main{ width: 640px ;} /* メイン */
div.right{ width: 237px ; } /* サイドバー */
div.main{ margin-left: 0px; } /* 可変時 : サイドバーのマイナス値 */
.container{ margin-left: 0px; } /* 可変時 : サイドバーと同じ */
/* ------------------------------------------- サイドバー画像 --- */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-237.gif);
サイドバー幅と画像の数値部分を同じ値にします
/* 記事上部画像---再配布× 差し替え○-----------------------------
sky9,sky10の後ろに英字小文字の「l」（エル）を加えます
固定幅[ LL ]
【 hellblau 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : LL ---------------------------------------- 幅変更 --- */
/* LL 965px 720px 245px 720.gif （右 : 0px 0px / 左 : 245px 0px） */
#pagetop{ width: 965px ; } /* 全体幅 */
div.main{ width: 720px ;} /* メイン */
div.right{ width: 245px ; } /* サイドバー */
#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-720.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
}
メイン幅と画像の数値部分を同じ値にします
サイドバーが左のときは background-position: 245px 0px; になります
/* 記事上部画像---再配布× 差し替え○-----------------------------
div.m-main{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9ll.jpg) 0px 25px no-repeat;
padding-top: 330px;
margin: 0 25px;
text-align: left;
overflow: hidden;
}
div.pmain{ /* 固定ページ blog-entry-xx.html の画像 */
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10ll.jpg) 0px 25px no-repeat;
}
sky9,sky10の後ろに英字小文字の「ll」（エルエル）を加えます
【 hellblau-s 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : LL ---------------------------------------- 幅変更 --- */
/* LL 965px 720px 245px 0px 0px 245.gif */
#pagetop{ width: 965px ; } /* 全体幅 */
div.main{ width: 720px ;} /* メイン */
div.right{ width: 245px ; } /* サイドバー */
div.main{ margin-left: 0px; } /* 可変時 : サイドバーのマイナス値 */
.container{ margin-left: 0px; } /* 可変時 : サイドバーと同じ */
/* ------------------------------------------- サイドバー画像 --- */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-245.gif);
サイドバー幅と画像の数値部分を同じ値にします
/* 記事上部画像---再配布× 差し替え○-----------------------------
sky9,sky10の後ろに英字小文字の「ll」（エルエル）を加えます
可変＋固定幅
変更場所 ▼ スタイルシートの編集
【 hellblau 】では可変化はできません
【 hellblau-s 】
変更場所 ▼ スタイルシートの編集
/* --- 変更後 : 可変+固定 ---------------------------------------- 幅変更 --- */
/* 可変+固定 100% 100% 245px -245px 245px 245.gif */
#pagetop{ width: 100% ; } /* 全体幅 */
div.main{ width: 100% ;} /* メイン */
div.right{ width: 245px ; } /* サイドバー */
div.main{ margin-left: -245px; } /* 可変時 : サイドバーのマイナス値 */
.container{ margin-left: 245px; } /* 可変時 : サイドバーと同じ */
/* ------------------------------------------- サイドバー画像 --- */
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-245.gif);
サイドバー幅と画像の数値部分を同じ値にします
サイドバー右のときは margin-right に変更
div.main{ margin-right: -245px; } /* 可変時 : サイドバーのマイナス値 */
.container{ margin-right: 245px; } /* 可変時 : サイドバーと同じ */
/* 記事上部画像---再配布× 差し替え○-----------------------------
(1) sky9,sky10の後ろに英字小文字の「w」を加えた1000pxのワイド画像を使用
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9w.jpg) 0px 25px no-repeat;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky10w.jpg) 0px 25px no-repeat;
(2) LLサイズの四角版画像（下記の最大幅を併せて指定するとよいかもしれません）
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sky9llw.jpg) 0px 25px no-repeat;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/skyw10llw.jpg) 0px 25px no-repeat;
/////可変幅の最大幅・最小幅を指定する/////
最大幅は、（画像幅＋サイドバー＋50）以下の値を入れてください。
sky9llw.jpgは670pxなので、670+245+50=965px以下を指定します。
【最大幅】max-width
#pagetopに赤字部分を追記します。※IE6以下は対応していません。
ウインドウを広げたときに、ある一定の幅以上広がらないようにする設定です。
#pagetop{ width: 100% ; max-width: 965px ; } /* 全体幅 */
数値を変更して、最大の横幅を指定します。上記の場合は965px以上広がらなくなります。
【最小幅】min-width
#pagetopに赤字部分を追記します。※IE6以下は対応していません。
ウインドウを広げたときに、ある一定の幅以上小さくならないようにする設定です。
#pagetop{ width: 100% ; min-width: 700px ; } /* 全体幅 */
数値を変更して、最小の横幅を指定します。上記の場合は700px以上小さくならなくなります。
【最大幅+最小幅】
両方を指定することも可能です。※IE6以下は対応していません。
#pagetop{ width: 100% ; max-width: 965px ; min-width: 700px ; } /* 全体幅 */
数値を変更して、最大・最小の横幅を指定します。上記の場合は700px～965pxの範囲で可変します。
その他の固定幅
【 hellblau 】
変更場所 ▼ スタイルシートの編集
全体幅px = メインpx + サイドpx になるように横幅を変更します。
使用可能なメイン幅（こちらで用意しているメイン幅画像）は以下の通りです。
430 460 486 490 520 536 550 580 610 640 670 700
720 730 760 790 820 850 880 910 940 970 1000
例えば、サンプルにないメイン幅 610px に変更する場合
div.main{ width: 610px ;} /* メイン */
#pagetop{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bw-610.gif);}
メイン部分で使用している画像は、縦1px横○○○pxの白色背景画像です。上記以外のサイズを使用するときは各自作成してください。
【 hellblau-s 】
変更場所 ▼ スタイルシートの編集
サイドバー画像 --- */ のアドレスが サイド幅.gif になるように変更します。
使用可能なサイド幅（こちらで用意しているサイド幅画像）は以下の通りです。
205 215 225 225 237 245 255 265 275
例えば、サンプルにないサイド幅 255px に変更する場合
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/9fbfcf-255.gif);
サイド部分で使用している画像は、縦1px横○○○pxの白色背景画像です。上記以外のサイズを使用するときは各自作成してください。
サイドバー左右入替え
変更場所 ▼ スタイルシートの編集
【 hellblau 】
■サイドバー右：初期値
/* left → right right → left に変更 ------------------- 左右入替え --- */
div.main{ float: left ; }
div.right{ float: right ; }
.copyright{ text-align: left ; }
/* --- 初期値 : M ------------------------------------- 幅変更 --- */
LL 0px 0px L 0px 0px M 0px 0px S 0px 0px
background-position: は 0px 0px になります（全サイズ共通）
#pagetop{ background-position: 0px 0px; }
■サイドバー左
/* left → right right → left に変更 ------------------- 左右入替え --- */
div.main{ float: right ; }
div.right{ float: left ; }
.copyright{ text-align: right ; }
/* --- 初期値 : M ------------------------------------- 幅変更 --- */
LL 245px 0px L 237px 0px M 225px 0px S 215px 0px
background-position: の 左側の数値にサイドバーの幅を入れます
#pagetop{ background-position: 225px 0px; }
【 hellblau-s 】
■サイドバー左：初期値
/* left → right right → left に変更 ------------------- 左右入替え --- */
div.main{ float: right ; }
div.right{ float: left ; }
#pagetop{ background-position: left top; }
.copyright{ text-align: right ; }
/* --- 初期 : bh-ffffff.gif ----------------------------- 全体背景 --- */
初期（ハーフ）画像を使用していない場合は全体背景の変更箇所はありません
background: #9fbfcf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bh-ffffff.gif) center top repeat-y;
■サイドバー右
/* left → right right → left に変更 ------------------- 左右入替え --- */
div.main{ float: left ; }
div.right{ float: right ; }
#pagetop{ background-position: right top; }
.copyright{ text-align: left ; }
/* --- 初期 : bh-ffffff.gif ----------------------------- 全体背景 --- */
「-」の前に 「r」を加えます
初期（ハーフ）画像を使用していない場合は全体背景の変更箇所はありません
background: #9fbfcf url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/bhr-ffffff.gif) center top repeat-y;
div.right{ background: #xxxxxx ; } /* 必要に応じて削除 */ について
FC2の画像サーバーの調子や使用画像によって削除するかどうかを決めてください。
画像が表示されないことによって、サイドバーが真っ白になる現象を回避するための背景色指定です（初期状態の【hellblau】はサイドバーに画像を使っていないため、CSSにはありません）。
画像が問題なく表示されるのであれば、この１行は必要ありません。色変更するときにいちいち変えるのが面倒な場合は削除しても構いません。また、真っ白になっても字が見える文字色をサイドバーに使っている場合も必要ありません。
チェックやストライプなど模様のついた全体背景画像（hellblau）やサイドバー背景画像（hellblau-s）をサイドバーに表示させたいときにこの１行があると画像が消えてしまいます（画像の上に背景色を付けるため）
右上ログインメニューを削除
変更場所 ▼ HTMLの編集-検索ワード「t-login」
以下の赤字部分（<div class="login">～</div>）を丸ごと削除
<div class="t-login">
<ul><li><a href="<%url>" title="<%blog_name>">Home</a></li><li><a href="<%url>archives.html">All</a></li><li><a href="<%server_url>control.php">Log in</a></li><li><a href="<%url>?xml">RSS</a></li></ul>
</div>
変更場所 ▼ スタイルシートの編集-検索ワード「div.r-main」
---body---- */ 変更箇所はスタイルシートの真ん中くらいにあります
5px→10px 数値を増やすとサイドバー上部の余白が広がります
div.r-main{
margin: 10px 15px 0;
text-align: left;
}
記事タイトルデザインの変更
変更場所 ▼ スタイルシートの編集-検索ワード「タイトルデザイン」
記事タイトルデザイン --- */
以下の部分の値を赤字に変更します。ダウンロード時期によって、クラス名などの記述が異なる場合があります。すべてコピーするのではなく、該当箇所（値）のみ変更してください。
■記事タイトルの文字サイズを大きくする
.toptitle{ margin-right: 40px; }
.topday{
float: right;
width: 40px;
line-height: 49px;
height: 49px;
font-size: 94%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 4px 7px 7px 4px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 94%; /* タイトル文字サイズ */
}
/* 日付文字サイズ */ は82%のままでも違和感がないかもしれません。
カテゴリ文字サイズも大きくする場合は以下も変更します。
.tag-m,.e-category{ font-size: 94%; } /* カテゴリ・ユーザタグ文字サイズ */
■日付を反転させる
以下の部分の値を赤字に変更します。
.toptitle{ margin-left: 34px; }
.topday{
float: left;
width: 34px;
line-height: 46px;
height: 46px;
font-size: 82%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 5px 7px 6px 9px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 82%; /* タイトル文字サイズ */
}
.e-category{
padding: 6px 3px 4px;
text-align: right;
line-height: 1;
margin-bottom:20px;
}
さらにタイトル文字サイズを大きくする場合は以下の変更を加えます。
.toptitle{ margin-left: 40px; }
.topday{
float: left;
width: 40px;
line-height: 48px;
height: 48px;
font-size: 94%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 5px 7px 6px 9px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 94%; /* タイトル文字サイズ */
}
.e-category{
padding: 6px 3px 4px;
text-align: right;
line-height: 1;
margin-bottom:20px;
}
/* 日付文字サイズ */ は82%のままでも違和感がないかもしれません。
カテゴリ文字サイズも大きくする場合は以下も変更します。
.tag-m,.e-category{ font-size: 94%; } /* カテゴリ・ユーザタグ文字サイズ */
■タイトル下線をなくす
以下の部分の値を赤字に変更します。
.toptitle{ margin-right: 37px; }
.topday{
float: right;
width: 37px;
line-height: 46px;
height: 46px;
font-size: 82%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 6px 7px 5px 4px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 82%; /* タイトル文字サイズ */
}
#comment-area,div.c-edit,#trackback,.p-title{
border-bottom: 1px #90bdc7 solid; /* タイトル下線色 */
}
.e-category{
padding: 4px 4px 6px;
text-align: left;
line-height: 1;
margin-bottom:20px;
}
/* タイトル下線色 */ 部分では h2.e-title, を削除します。
さらにタイトル文字サイズを大きくする場合は以下の変更を加えます。
.toptitle{ margin-right: 40px; }
.topday{
float: right;
width: 40px;
line-height: 49px;
height: 49px;
font-size: 94%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 7px 7px 5px 4px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 94%; /* タイトル文字サイズ */
}
#comment-area,div.c-edit,#trackback,.p-title{
border-bottom: 1px #90bdc7 solid; /* タイトル下線色 */
}
.e-category{
padding: 4px 4px 6px;
text-align: left;
line-height: 1;
margin-bottom:20px;
}
/* 日付文字サイズ */ は82%のままでも違和感がないかもしれません。
カテゴリ文字サイズも大きくする場合は以下も変更します。
.tag-m,.e-category{ font-size: 94%; } /* カテゴリ・ユーザタグ文字サイズ */
■タイトル下線をなくして反転
以下の部分の値を赤字に変更します。
.toptitle{ margin-left: 37px; }
.topday{
float: left;
width: 37px;
line-height: 46px;
height: 46px;
font-size: 82%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 7px 7px 5px 9px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 82%; /* タイトル文字サイズ */
}
#comment-area,div.c-edit,#trackback,.p-title{
border-bottom: 1px #90bdc7 solid; /* タイトル下線色 */
}
.e-category{
padding: 4px 9px 6px;
text-align: left;
line-height: 1;
margin-bottom:20px;
}
/* タイトル下線色 */ 部分では h2.e-title, を削除します。
さらにタイトル文字サイズを大きくする場合は以下の変更を加えます。
.toptitle{ margin-left: 40px; }
.topday{
float: left;
width: 40px;
line-height: 48px;
height: 48px;
font-size: 94%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
h2.e-title,#comment-area,div.c-edit,#trackback,div.e-title{
padding: 7px 7px 5px 9px;
margin: 0;
line-height: 1;
text-align: left;
font-weight: bold;
font-size: 94%; /* タイトル文字サイズ */
}
#comment-area,div.c-edit,#trackback,.p-title{
border-bottom: 1px #90bdc7 solid; /* タイトル下線色 */
}
.e-category{
padding: 4px 9px 6px;
text-align: left;
line-height: 1;
margin-bottom:20px;
}
/* 日付文字サイズ */ は82%のままでも違和感がないかもしれません。
カテゴリ文字サイズも大きくする場合は以下も変更します。
.topday{
float: left;
width: 40px;
line-height: 49px;
height: 49px;
font-size: 94%; /* 日付文字サイズ */
font-weight: normal;
font-family: verdana;
text-align: center;
}
.tag-m,.e-category{ font-size: 94%; } /* カテゴリ・ユーザタグ文字サイズ */
コメントを個別ページ以外でも表示
表示できるのは、コメント投稿者・コメントタイトル・コメント本文の3項目です。URLや日付などは変数がないため、基本的に表示できません。
コメント（特に絵文字などの装飾が多いもの）がたくさんついたりするとページの読み込みが少し遅くなります。普通のブログと普通のPC環境であれば、たぶん問題はありません。記事の追記展開と同様に、displayで非表示にしていてもアクセスした瞬間に内容物が読み込まれてしまいます。
A,Bどちらかを選択してください。
- ■A:通常形式
（1）e-bottom の後に赤字部分を入れます。
変更場所 ▼ HTMLの編集-検索ワード「class="e-bottom"」
<ul class="e-bottom">
（略）
</ul>
<!--not_permanent_area-->
<dl class="cl-entry">
<dt class="cl-top">Comment List</dt>
<dd class="cl-top"><%topentry_comment_num></dd>
<!--comment_list-->
<dt><%topentry_comment_list_name> : <%topentry_comment_list_title></dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
<!--/not_permanent_area-->
（2）以下をスタイルシートに追加。
変更場所 ▼ スタイルシートの編集
dl.cl-entry{
margin: 5px 3px 0px 8px;
padding: 0.6em 0.3em 0.2em 30px; /* 全体左余白30px */
background: transparent; /* 背景色 */
color: #008080; /* 名前文字色 */
}
dl.cl-entry .cl-top{ display: none; }
dl.cl-entry dt{ /* コメントタイトル */
margin : 0;
padding: 0.5em 0 0;
line-height: 1.1;
font-size: 69%; /* 文字サイズ */
}
dl.cl-entry dd{ /* コメント本文 */
margin: 0;
padding: 0.5em 5px 0.7em 1.3em;
line-height: 1.3;
font-size: 69%; /* 文字サイズ */
color: #444444;
}
- ■B:コメントに番号を振る形式
（1）e-bottom の後に赤字部分を入れます。
変更場所 ▼ HTMLの編集-検索ワード「class="e-bottom"」
<ul class="e-bottom">
（略）
</ul>
<!--not_permanent_area-->
<ul class="cl-entry">
<li class="cl-top">Comment List</li>
<!--comment_list--><li>
<%topentry_comment_list_name> : <%topentry_comment_list_title>
<p><%topentry_comment_list_brbody></p>
</li><!--/comment_list-->
</ul><!--/not_permanent_area-->
（2）以下をスタイルシートに追加。
背景色をつけるときは transparent→#f9f9f9 などに変更
変更場所 ▼ スタイルシートの編集
div ul.cl-entry{
margin: 5px 3px 0px 8px;
padding: 0.6em 0.3em 0.2em 40px; /* 全体左余白40px */
list-style-type: decimal;
background: transparent; /* 背景色 */
color: #008080; /* 名前文字色 */
}
ul.cl-entry .cl-top{ display: none; }
ul.cl-entry li{ /* コメントタイトル */
margin : 0;
padding: 0.5em 0 0;
line-height: 1.1;
font-size: 69%; /* 文字サイズ */
}
ul.cl-entry p{ /* コメント本文 */
margin: 0;
padding: 0.5em 5px 0.7em 0px;
line-height: 1.3;
font-size: 100%;
color: #444444;
}
- ■AB:コメント数クリックで展開
（1）e-bottom の中にある以下の箇所を入替えます。
変更場所 ▼ HTMLの編集-検索ワード「allow_comment」
変更箇所「allow_comment～/allow_comment」
<!--allow_comment--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment - <%topentry_title>">Comment : <%topentry_comment_num></a></li><!--/allow_comment-->
変更後
途中にスペースや改行は入れない方がよいです。
<!--allow_comment--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment Form - <%topentry_title>">Comment</a> <!--not_permanent_area--><a href="<%topentry_link>#comment-area" title="Comment List - <%topentry_title>" onclick="javascript:i=document.getElementById('cl<%topentry_no>');if(i.style.display == 'none'){i.style.display='block'}else{i.style.display='none'}return false" onkeypress="this.onclick"><!--/not_permanent_area-->: <%topentry_comment_num><!--not_permanent_area--></a><!--/not_permanent_area--></li><!--/allow_comment-->
（2）AまたはBで追加した部分の2行目に赤字部分を追加。
変更場所 -「class="cl-entry"」
class="cl-entry" id="cl<%topentry_no>" style="display: none;">
- 関連記事
-
- pado-menue
- padw-sauber-s
- pada-hellblau
- pazw-hellblau
- pazw-sauber
- pazw-ruhig
- pazb-linie