sommer
- 2000-03-20 月 21:37
- FC2ブログテンプレート
検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください
- ■dt2_pasommer : プレビュー
- 【dt2】サンプル
- カスタマイズ
sosky-b
左右入替え(仮)
上部ナビにコメント・トラバ件数表示
曜日ごとに日付画像変更
- ▼3カラム版(未定) / ▼1カラム版(未定)
- トップ追加画像
- 日付部分の追加画像、曜日ごとに画像変更
- サイドバープラグインタイトル部分の画像変更
- 記事編集画面へのリンク
- コメント返信画面へのリンク、コメント特殊画像の追加
- ブログタイトル左横の Entries の変更
- 幅変更 : 固定S、固定M、固定L、固定W
- 左右入替え(仮)
- 上部ナビのリンクをページ内から個別ページに変更
- 上部ナビのタイトルリストにコメントとラックバック件数を表示
- 上部ナビのリストに時刻を表示
- トップページ、上部ナビにプラグイン3を表示
- 【変更1011】タイトル部分のHTML変更
履歴
【変更1011】タイトル部分のHTML変更
変更場所 ▼ HTMLの編集-「container」
赤字部分(container)を削除。
<div class="container">/* 削除 */
<div class="blogTitle">
変更場所 ▼ HTMLの編集-「/body」最後の方
赤字部分(/div)を1つ削除。
</div>/* 削除 */
</div>
</body>
変更場所 ▼ スタイルシートの編集-「.blogTitle」
「Body ---- */」 の少し下。赤字部分を修正・追加。
.blogTitle{
position: relative;
height: 87px;
margin-top: 304px;
}
h1.title{
position: absolute;
z-index: 777;
top: 28px;
left: 17px;
height: 59px;
line-height: 45px;
text-indent: 82px; /* ブログタイトル横位置 */
margin: 0;
padding: 0;
font-size: 94%; /* ブログタイトル文字サイズ */
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #ffffff;
}
#symbol{
position: absolute;
z-index: 888;
top: 1px;
width: 85px;
height: 86px;
text-align: center;
left: 0;
margin: 0;
padding: 0;
font-size: 69%; /* Entries 文字サイズ */
font-family: verdana;
color: #ffffff;
font-weight: bold;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosym01.gif) 0 0 no-repeat; /* 画像 */
}
#symbol span{
display: block;
position: relative;
top: 0px; /* Entries 開始位置 */
left: 0;
width: 85px; /* 85px以下 */
line-height: 85px; /* 行間 */
}
div.r-main{
margin-top: 14px;/* 削除 */
margin-right: 8px;
margin-left: 13px;
text-align: left;
}
変更場所 ▼ スタイルシートの編集-「.pagelist」
「Navi List --- */」 の下。赤字部分を変更。
.pagelist{
padding: 0 0 7px;
margin: 0 0 45px 9px;
color: #ffffff;
font-size: 82%;
}
変更場所 ▼ スタイルシートの編集-「size-m --- */」最後の方
「size-m --- */」 の少し下。赤字部分を削除・変更。
/* container 部分丸ごと削除 */
.size-m .container{
margin-top: 304px;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sots538.gif) 0 0 no-repeat;
}/* ここまで削除 */
.size-m h1.title{
width: 529px;
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots529.jpg) 0 0 no-repeat;
}
変更場所 ▼ スタイルシートの編集-「size-l --- */」最後の方
「size-l --- */」 の少し下。赤字部分を削除・変更。
/* container 部分丸ごと削除 */
.size-l .container{
margin-top: 304px;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sots590.gif) 0 0 no-repeat;
}/* ここまで削除 */
.size-l h1.title{
width: 581px;
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots581.jpg) 0 0 no-repeat;
}
変更場所 ▼ スタイルシートの編集-「size-s --- */」最後の方
「size-s --- */」 の少し下。赤字部分を削除・変更。
/* container 部分丸ごと削除 */
.size-s .container{
margin-top: 304px;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/sots496.gif) 0 0 no-repeat;
}/* ここまで削除 */
.size-s h1.title{
width: 487px;
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots487.jpg) 0 0 no-repeat;
}
トップ追加画像
- プレビュー : sosky804b,856b,748b,953b (初期版 + sots538b,590b,496b)
-
変更場所 ▼ スタイルシートの編集-「size-m --- */」
最下部付近、以下のアドレスを変更。使わないサイズの変更は必要ありません。
画像のサーバー番号を「41」から「34」に、「.jpg」の前に「b」をつけます。
「size-w」は画像のサーバー番号を「38」に、「953b.jpg」とします。/* --------------------------------------------------- size-m --- */
.size-m #pagetop{ width: 804px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosky804b.jpg) 8px 20px no-repeat;
}/* --------------------------------------------------- size-l --- */
.size-l #pagetop{ width: 856px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosky856b.jpg) 8px 20px no-repeat;
}/* --------------------------------------------------- size-s --- */
.size-s #pagetop{ width: 748px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosky748b.jpg) 8px 20px no-repeat;
}2009.10.11より前にダウンロード(/* 20090821)
古いバージョンの場合は、もう一つアドレスを変更。使わないサイズの変更は必要ありません。
画像のサーバー番号を「41」から「34」に、「.jpg」「.gif」の前に「b」をつけます。/* --------------------------------------------------- size-m --- */
.size-m .container{
margin-top: 304px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots538b.gif) 0 0 no-repeat;
}/* --------------------------------------------------- size-l --- */
.size-l .container{
margin-top: 304px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots590b.gif) 0 0 no-repeat;
}/* --------------------------------------------------- size-s --- */
.size-s .container{
margin-top: 304px;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots496b.gif) 0 0 no-repeat;
}元に戻す際は逆の変更をしてください。サーバー番号を「41」にして「b」を外します。
.size-○ .container
の方の画像は戻さなくても使えそうです。
日付部分の画像変更
一色ごとに4つのパターン(計64種類)があります。数字は、「02」から「17」まで。別のパターンは、数字の後に「b」「c」「d」をつけます(例:soday08d.gif など)。
「a、b」は枠線が太いもの。「b、d」は斜線入り。
[カスタマイズ]
※画像サーバーが「41」から「34」に変わっています。初期版のテンプレートは数字を変更してください。
変更場所 ▼ スタイルシートの編集-「ul.daySun」
「Entry --- */」部分の以下の箇所を変更します。
上が平日の画像アドレス。下が日曜日の画像アドレスです。あわせて背景色(#○○○○○○)も変更します。
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday02.gif) 0 0 no-repeat;
}
div ul.daySun{
background: #dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11.gif) 0 0 no-repeat;
}
(例)平日を「02d.gif」 日曜日を「08d.gif」に指定
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday02d.gif) 0 0 no-repeat;
}
div ul.daySun{
background: #dc5598 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday08d.gif) 0 0 no-repeat;
}
画像アドレス一覧(数字ごとの背景色)
数字にあわせて背景色も変更してください。「b~d」は基本画像と同じ背景色になります。
(例)「08.gif」「08b.gif」「08c.gif」「08d.gif」→#dc5598
曜日ごとに画像を変更
変更場所 ▼ スタイルシートの編集-「ul.daySun」
「Entry --- */」部分の以下の箇所を変更します。
上の平日の background: 画像アドレス ; は削除しても構いません。
div ul.daySun{
background: #dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11.gif) 0 0 no-repeat;
}
上記を以下に入替え。画像と背景色はお好みにあわせて変更してください。
div ul.daySun{ /* 日 */
background: #dc5838 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday11d.gif) 0 0 no-repeat;
}
div ul.dayMon{ /* 月 */
background: #3fb5ae url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday05d.gif) 0 0 no-repeat;
}
div ul.dayTue{ /* 火 */
background: #f19727 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday10d.gif) 0 0 no-repeat;
}
div ul.dayWed{ /* 水 */
background: #37a0cc url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday03d.gif) 0 0 no-repeat;
}
div ul.dayThu{ /* 木 */
background: #477574 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday13d.gif) 0 0 no-repeat;
}
div ul.dayFri{ /* 金 */
background: #9a9e00 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday15d.gif) 0 0 no-repeat;
}
div ul.daySat{ /* 土 */
background: #4376c1 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/soday04d.gif) 0 0 no-repeat;
}
サイドバープラグインタイトル部分の画像変更
一色ごとに5つのパターン(計65種類)があります。size-m,lの数字は「224」。size-sの数字は「210」。数字後ろの値は、「a」から「m」まで。そのさらに後に「a」「b」「c」「d」をつけることで、別のパターンに変わります(例:sost224fa.gif など)。
「xa、xb、xe」は右上が白みがかっているもの。「xb、xd」は斜線が薄い色。
[カスタマイズ]
※画像サーバーが「41」から「34」に変わっています。数字を変更してください。
変更場所 ▼ スタイルシートの編集-「size-m --- *」
「size-○ --- */」部分の以下の箇所を変更します。size-m、size-lは「sost224」。size-sは「sost210」の後ろに「aa」~「me」までの値を入れます。使わないサイズの変更は必要ありません。
/* --------------------------------------------------- size-m --- */
.size-m h2.s-title{
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ac.gif) 0 0 no-repeat;
}
/* --------------------------------------------------- size-l --- */
.size-l h2.s-title{
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost224ac.gif) 0 0 no-repeat;
}
/* --------------------------------------------------- size-s --- */
.size-s h2.s-title{
background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sost210ac.gif) 0 0 no-repeat;
}
画像アドレス一覧(色ごとの背景色)
値にあわせて背景色も変更してください。「b~e」は基本画像と同じ背景色になります。
(例)「224aa.gif」「224ab.gif」「224ac.gif」「224ad.gif」「224ae.gif」→#3190b8
記事編集画面へのリンク
記事右上の曜日にリンクがあります。ログイン状態のときのみ編集画面に飛びます。
コメント返信画面へのリンク、コメント特殊画像の追加
コメントの曜日にリンクがあります。ログイン状態のときのみ返信画面に飛びます。
管理者がコメント返信画面から太字や色を指定して返信すると、名前の左横にスターがつきます。
コメント投稿したときの時間(秒)が「00秒」のとき、人型アイコンがオレンジになりました。
[カスタマイズ]
分と秒が「00」のとき、オレンジが増えてオレンジ畑になりました。
遊び要素が感じられるため、初期状態では耕せません。以下のHTMLを変更し、スタイルシートの最下部などに必要項目を追加してください。チャンスは1時間に1回しかないため、滅多に表示されることはないと思います。
※画像サーバーが「41」から「34」に変わっています。ご注意ください。
変更場所 ▼ HTMLの編集-「c-top」
真ん中あたり、<!--comment-->内、赤字部分を追記。
<!--comment-->
<div class="c-entry" id="comment<%comment_no>">
<h3 class="c-top imo<%comment_minute>">
変更場所 ▼ スタイルシートの編集-以下を追加
h3.imo00 span.ico00{
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/icon02a.gif) 0 0 no-repeat;
padding-left: 63px;
}
上部ナビのリンクをページ内から個別ページに変更
直接個別ページにジャンプします。
変更場所 ▼ HTMLの編集-「pagelist」最初の方
赤字部分「#title<%topentry_no>」を変更。
<ul class="nlist"><!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_month>.<%topentry_day> <%topentry_youbi> [<%topentry_category>] <%topentry_title></a></li>
上部ナビのリストに時刻を表示
変更場所 ▼ HTMLの編集-「pagelist」最初の方
カテゴリ、記事タイトルの短いブログ向け。
[<%topentry_category>] の前に <%topentry_hour>:<%topentry_minute> を追加。
<ul class="nlist"><!--topentry-->
<li><a href="#title<%topentry_no>" title="<%topentry_title>"><%topentry_month>.<%topentry_day> <%topentry_youbi> <%topentry_hour>:<%topentry_minute> [<%topentry_category>] <%topentry_title></a></li>
上部ナビのリストにコメントとトラックバック件数を表示
カテゴリ・記事のタイトルが短めで右側に大きな空白ができるブログ向け。
変更場所 ▼ HTMLの編集-「pagelist」最初の方
最初の<ul class="nlist"><!--topentry-->から<!--/topentry-->までのあいだに赤字部分を追加。
<ul class="nlist"><!--topentry-->
<li><a href="#title<%topentry_no>" title="<%topentry_title>"><%topentry_month>.<%topentry_day> <%topentry_youbi> [<%topentry_category>] <%topentry_title></a>
<!--allow_comment--><span><a href="<%topentry_link>#comment-area" title="Comment - <%topentry_title>">( <%topentry_comment_num> )</a><!--deny_tb--></span><!--/deny_tb--><!--/allow_comment-->
<!--allow_tb--><!--allow_comment--> <!--/allow_comment--><!--deny_comment--><span><!--/deny_comment--><a href="<%topentry_link>#trackback" title="Trackback - <%topentry_title>">( <%topentry_tb_num> )</a></span><!--/allow_tb--></li>
<!--/topentry-->
変更場所 ▼ スタイルシートの編集
以下を追加。
トップページ、上部ナビに「プラグイン3」を表示
「トップページでは、ナビリストとプラグインの最新記事が重複するから、ナビリストはなくてもいい」という場合のカスタマイズです。プラグイン3をナビリスト部分に表示させます。
[カスタマイズ]
変更場所 ▼ HTMLの編集-「p-body」
「p-body」のすぐ後に赤字部分を入れます。続く「not_permanent_area」と「/not_titlelist_area」の前後にも赤字部分(not_index_area、/not_index_area)を入れて、挟みます。
<div class="p-body">
<!--index_area--><!--plugin--><!--plugin_third-->
<div class="entry-p">
<h2 class="ptitle"><%plugin_third_title></h2>
<!--plugin_third_description-->
<p class="s-desc"><%plugin_third_description></p>
<!--/plugin_third_description-->
<%plugin_third_content>
<!--plugin_third_description2-->
<p class="s-desc"><%plugin_third_description2></p>
<!--/plugin_third_description2-->
</div>
<!--/plugin_third--><!--/plugin--><!--/index_area-->
<!--not_index_area--><!--not_permanent_area--><!--not_titlelist_area-->
<ul class="nlist"><!--topentry-->
<li><a href="#title<%topentry_no>" title="<%topentry_title>"><%topentry_month>.<%topentry_day> <%topentry_youbi> [<%topentry_category>] <%topentry_title></a></li>
<!--/topentry-->
<!--edit_area--><li><a href="./blog-entry-<%edit_entry_no>.html" title="<%edit_entry_title>"><%edit_category_title> : <%edit_entry_title></a></li><!--/edit_area-->
</ul>
<!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_index_area-->
変更場所 ▼ HTMLの編集-「↓」
既存の「プラグイン3」の部分をすべて削除します。
<!--↓プラグイン3をトップページ以外でも表示する場合は削除-->
<!--index_area-->
(省略)
<!--/index_area-->
<!--↑-->
変更場所 ▼ スタイルシートの編集-「行間」
行間プラグイン3の赤字部分を変更。「1.5」はお好み。
/* ----------------------------------------------------- 行間 --- */
.entry-p{ line-height: 1.5; } /* プラグイン3 */
変更場所 ▼ スタイルシートの編集-「nlist li」
「Navi List --- */」の以下の箇所に赤字部分を追記します。
.nlist li,.entry-p ul li{
padding: 5px 7px 5px 22px;
margin: 0;
line-height: 1.2;
border-bottom: 1px #3a99c1 solid;
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/icoa02.gif) 6px 9px no-repeat;
}
変更場所 ▼ スタイルシートの編集-「Plugin3 --- */」
「Plugin3 --- */」の部分を丸ごと以下に入替えます。
初期状態ではプラグイン3のタイトルは非表示になっています。
表示する場合は、/* タイトル非表示 */ の行を以下に変更してください。
display: block;/* タイトル非表示 */
すると次のようになります。
ブログタイトル左横の Entries の変更
文字の変更
変更場所 ▼ HTMLの編集-検索ワード「文字変更箇所」
赤字部分を変更します。
<p id="symbol">Entries</p>
- [例]Entry、Summer、BLOG、LOVE、夏、肉、民主党
-
- 文字装飾の変更
-
変更場所 ▼ スタイルシートの編集-「Entries」
ダウンロード時期によって変更箇所は異なります
■2009.10.11以降にダウンロード(/* 20091011)
#symbol{
position: absolute;
z-index: 888;
top: 1px;
width: 85px;
height: 86px;
text-align: center;
left: 0;
margin: 0;
padding: 0;
font-size: 69%; /* Entries 文字サイズ */
font-family: verdana; /* 書体 */
color: #ffffff;
font-weight: bold;
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosym01.gif) 0 0 no-repeat; /* 画像 */
}
#symbol span{
display: block;
position: relative;
top: 0px; /* Entries 開始位置 */
left: 0;
width: 85px; /* 85px以下 横幅(横位置)調整 */
line-height: 85px; /* 行間 */
}テキストを複数行入れる場合は、行間を「1.2」などに変更します。
また、「top: ○px;」で縦の開始位置も調整します。
文字サイズは「%指定」にしていますが、「px指定」の方がよいかもしれません。font-weight: normal;
にすると細字になります。
横幅(横位置)調整は必ず85px以下の数値を指定してください
[例]弾け<改行>輪ゴム<!--HTMLの文字を変更-->
<p id="symbol"><span>弾け<br />輪ゴム</span></p>/* スタイルシートの変更 */
font-size: 14px; /* Entries 文字サイズ */
top: 26px; /* Entries 開始位置 */
line-height: 1.2; /* 行間 */
一行に戻す際は、heightとline-heightの値を同じ値に戻してください。フォントはPC環境によるため、一行の方がPCによる差異は小さいです。画像に直接文字等を追加・アップロードしても構いませんが、Gif形式なので色落ちする可能性があります。
■2009.10.11より前にダウンロード(/* 20090821)
#symbol{
position: absolute;
top: 14px; /* Entries 開始位置 */
width: 84px; /* 横幅(横位置)調整 */
height: 59px;
line-height: 59px; /* 行間 */
text-align: center;
left: 0;
margin: 0;
padding: 0;
font-size: 69%; /* Entries 文字サイズ */
font-family: verdana; /* 書体 */
color: #ffffff; /* 文字色 */
font-weight: bold; /* 太さ */
}テキストを複数行入れる場合は、行間を「1.2」などに変更します。
また、「top: ○px;」で縦の開始位置も調整します。
文字サイズは「%指定」にしていますが、「px指定」の方がよいかもしれません。font-weight: normal;
にすると細字になります。
[例]弾け<改行>輪ゴム<!--HTMLの文字を変更-->
<p id="symbol">弾け<br />輪ゴム</p>/* スタイルシートの変更 */
font-size: 14px; /* Entries 文字サイズ */
top: 26px; /* Entries 開始位置 */
line-height: 1.2; /* 行間 */
固定幅[ S ]
変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」
赤字部分を変更します。s(小文字のエス)
<body class="size-s"><!--サイズ変更-->
他のサイズを使わない場合はスタイルシート最下部の
「--- size-m --- */」と「--- size-l --- */」部分を削除しても構いません。
固定幅[ M ]
変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」
赤字部分を変更します。m(小文字のエム)
<body class="size-m"><!--サイズ変更-->
他のサイズを使わない場合はスタイルシート最下部の
「--- size-s --- */」と「--- size-l --- */」部分を削除しても構いません。
固定幅[ L ]
変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」
赤字部分を変更します。l(小文字のエル)
<body class="size-l"><!--サイズ変更-->
他のサイズを使わない場合はスタイルシート最下部の
「--- size-s --- */」と「--- size-m --- */」部分を削除しても構いません。
固定幅[ W ]
変更場所 ▼ HTMLの編集-検索ワード「サイズ変更」
赤字部分を変更します。w(小文字のダブリュ)
<body class="size-w"><!--サイズ変更-->
変更場所 ▼ スタイルシートの編集
最下部に下記を丸ごと追加します。
他のサイズを使わない場合はスタイルシート最下部の
「--- size-s --- */」「--- size-m --- */」「--- size-l --- */」部分を削除しても構いません。
2009.10.11より前にダウンロードされたテンプレートは【変更1011】タイトル部分のHTML変更をする必要があります。
左右入替え(仮)
左右入替えを考慮してシンボル部分の画像を作成していますので一応可能です。
変更場所 ▼ HTMLの編集 -「サイズ変更」
最初の方、サイズ変更のすぐ下にあるpagetopにclass部分を追加。
<div class="lchan" id="pagetop">
変更場所 ▼ スタイルシートの編集
スタイルシートの最下部に以下を追加してください。
2009.10.11より前にダウンロード(/* 20090821)
古いバージョンの場合は、以下のスタイルシートを追加。
元に戻す場合はHTMLに追加した「class="lchan"」を削除してください。使わない「/* --- size-○ --- */」は削除しても構いません。
- 関連記事