pazb-linie
- 2000-03-10 金 21:33
- FC2ブログテンプレート
検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。
■pazb-linie : プレビュー / ■pazw-linie : プレビュー
- 【3カラム版】 : プレビュー padb-linie / padw-linie
- 記事編集画面へのリンク
- 記事の投稿時間を消す
- 文字サイズの変更
- コメントの絵文字を追加
- 記事日付をカテゴリの横に移動
- ブログタイトルを画像に変更する
- 2カラム 幅の変更 : 固定幅 / 可変幅
- 3カラム 幅の変更 : 固定幅 / 可変幅
- 3カラムのみ HTML編集:メイン部分にコンテンツを入れるときの注意事項
履歴
記事編集画面へのリンク
記事本文下の投稿時間の左横に空白のリンクがあります。ログイン状態のときのみ編集画面に飛びます。
記事の投稿時間を消す
変更場所 ▼ HTMLの編集-検索ワード「<%topentry_hour>」
<li><%topentry_hour>:<%topentry_minute></li>
上記部分を削除します。
文字サイズ
変更場所 ▼ スタイルシートの編集
下記のように数値部分を変更すると文字の大きさを変えられます。
%指定をやめてpx指定にする場合は 94%→15.04px / 82%→13.12px に変更してください。
/* ----------------------------------------------------[ FONT ]
.eBody,.fc2_footer,.titleBody{ font-size: 94%; }/* 記事本文 */
コメントの絵文字を追加
変更場所 ▼ HTMLの編集-検索ワード「textarea」
変更箇所は2つあります「<!--comment_area-->」と「<!--edit_area-->」
赤字部分を追加してください。
<dt id="textLabel"><label for="comment">Comment :</label></dt>
<dd id="textIcon"><script type="text/javascript" src="<%server_url>load.js"></script></dd>
記事日付をカテゴリの横に移動
変更場所 ▼ HTMLの編集-検索ワード「blog-date」
<a href="blog-date-<%topentry_year><%topentry_month><%topentry_day>.html"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a>
上記部分を削除します(末尾の半角スペースも含む)
そのすぐ下にある eCategory に赤字を追加します。
【カテゴリの前に日付を入れる場合】
<ul class="eCategory"><li><a href="blog-date-<%topentry_year><%topentry_month><%topentry_day>.html"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a></li><!--parent_category--><li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li><!--/parent_category--><li><a href="<%topentry_category_link>"><%topentry_category></a></li></ul>
【カテゴリの後ろに日付を入れる場合】
<ul class="eCategory"><!--parent_category--><li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li><!--/parent_category--><li><a href="<%topentry_category_link>"><%topentry_category></a></li><li><a href="blog-date-<%topentry_year><%topentry_month><%topentry_day>.html"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a></li></ul>
ブログタイトルを画像に変更する
[A][B][C]いずれかを選択。
[A]タイトルテキストを画像に変更する場合
変更場所 ▼ HTMLの編集-検索ワード「h1」
<%blog_name>
を変更。
<h1 class="title"><a href="<%url>"><%blog_name></a></h1>
赤字部分を変更。画像アドレスにタイトル画像を入れます。
<h1 class="title"><a href="<%url>"><img src="画像アドレス" alt="<%blog_name>" height="画像の縦幅" width="画像の横幅" /></a></h1>
画像の幅はなくても表示はされます。
<h1 class="title"><a href="<%url>"><img src="画像アドレス" alt="<%blog_name>" /></a></h1>
[B]ヘッダ部分(ページ上部)にタイトル画像を入れる場合
変更場所 ▼ スタイルシートの編集-検索ワード「[ Body ]」
「---[ Body ]」 の少し下。#pagetopに赤字部分を追加。画像アドレスにヘッダに表示したいタイトル画像を入れます。
#pagetop{ margin: 0 auto; background:url(画像アドレス) 0px 0px no-repeat; }
その少し下。h1.titleの赤字部分を変更。100pxがタイトル画像の高さになります。数値を増減させて、調整します。
h1.title{ margin: 0 0 100px; padding: 4px 0.1em 0.1em; line-height: 1; font-weight: normal; text-align: left; letter-spacing: 1px; }
[C]ヘッダ部分(ページ上部)の端から端までにタイトル画像を入れる場合
変更場所 ▼ スタイルシートの編集-検索ワード「[ Body ]」
bodyに赤字部分を追加。画像アドレスにヘッダに表示したいタイトル画像を入れます。
body{ background:url(画像アドレス) 0px 0px no-repeat; (略) }
その少し下。h1.titleの赤字部分を変更。100pxがタイトル画像の高さになります。数値を増減させて、調整します。
h1.title{ margin: 0 0 100px; padding: 4px 0.1em 0.1em; line-height: 1; font-weight: normal; text-align: left; letter-spacing: 1px; }
固定幅 2カラム
変更場所 ▼ スタイルシートの編集
全体幅 = メイン + 左右入替数値 + サイド となるようにお好みの幅を設定します。下記はそのサンプルです。サンプル通りにする必要はありません。
左右入替数値 がメインとサイドの間の余白になります。増減させた分だけ、全体幅も増減させます。左右入替数値 28px→25px 全体幅 759px→756px
サイドバー右
/* ----------------------------------------------------[ 左右入替え ]*/ #main{ float: left; } #sidebar{ float: right; }
/* S 680px 459px 31px 0px 190px
/* ----------------------------------------------------[ 幅変更 S ]*/ #pagetop{ width: 680px; } /* 全体幅 */ #main{ width: 459px; /* メイン */ margin-right: 31px; /* 左右入替 right←→left */ } #inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 190px; } /* サイド */
/* M 759px 521px 28px 0px 210px
/* ----------------------------------------------------[ 幅変更 M ]*/ #pagetop{ width: 759px; } /* 全体幅 */ #main{ width: 521px; /* メイン */ margin-right: 28px; /* 左右入替 right←→left */ } #inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 210px; } /* サイド */
/* L 831px 583px 28px 0px 220px
/* ----------------------------------------------------[ 幅変更 L ]*/ #pagetop{ width: 831px; } /* 全体幅 */ #main{ width: 583px; /* メイン */ margin-right: 28px; /* 左右入替 right←→left */ } #inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 220px; } /* サイド */
/* LL 957px 699px 28px 0px 230px
/* ----------------------------------------------------[ 幅変更 LL ]*/ #pagetop{ width: 957px; } /* 全体幅 */ #main{ width: 699px; /* メイン */ margin-right: 28px; /* 左右入替 right←→left */ } #inner{ margin-right: 0px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 230px; } /* サイド */
サイドバー左
左右入替えと幅変更の left right を入替えます。他のサイズも同様です。
/* ----------------------------------------------------[ 左右入替え ]*/ #main{ float: right; } #sidebar{ float: left; }
/* M 759px 521px 28px 0px 210px
/* ----------------------------------------------------[ 幅変更 M ]*/ #pagetop{ width: 759px; } /* 全体幅 */ #main{ width: 521px; /* メイン */ margin-left: 28px; /* 左右入替 right←→left */ } #inner{ margin-left: 0px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 210px; } /* サイド */
可変幅 2カラム
変更場所 ▼ HTMLの編集-検索ワード「Liquid」
Liquid[1] と Liquid[2] の前後にdivを追加
<div id="main"> <!--Liquid[1]--><div id="inner">
</div><!--Liquid[2]--> </div> <div id="sidebar">
変更場所 ▼ スタイルシートの編集
サイドバー右
可変+固定 左右入替 には (サイドバーの幅 + 余白) の数値を。左右入替 には、可変+固定 左右入替 のマイナス値を入れます。
左右入替数値 - サイド幅 = メインとサイドバー間の余白
下記のサンプルではメインとサイドバーの間に 26px(236-210) の隙間ができます。隙間を 4px 広げる場合は、左右入替を -240px 240px とします。減らすときはその逆です。
max-width: 960px; /* 最大幅 */ min-width: 760px; /* 最小幅 */
はウインドウを広げたときの限界値です。必要であれば、追記してください。
/* ----------------------------------------------------[ 左右入替え ]*/ #main{ float: left; } #sidebar{ float: right; }
/* 可変+固定 94% 100% -236px 236px 210px
/* ----------------------------------------------------[ 幅変更 可+固 ]*/ #pagetop{ width: 94%;max-width: 960px;min-width: 760px; } /* 全体幅 */ #main{ width: 100%; /* メイン */ margin-right: -236px; /* 左右入替 right←→left */ } #inner{ margin-right: 236px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 210px; } /* サイド */
サイドバー左
左右入替えと幅変更の left right を入替えます。
/* ----------------------------------------------------[ 左右入替え ]*/ #main{ float: right; } #sidebar{ float: left; }
/* ----------------------------------------------------[ 幅変更 可+固 ]*/ #pagetop{ width: 94%;max-width: 960px;min-width: 760px; } /* 全体幅 */ #main{ width: 100%; /* メイン */ margin-left: -236px; /* 左右入替 right←→left */ } #inner{ margin-left: 236px; } /* 可変+固定 左右入替 right←→left */ #sidebar{ width: 210px; } /* サイド */
固定幅 3カラム
変更場所 ▼ スタイルシートの編集
全体幅を増やすと、メイン幅が広がります。左右幅 と 左右幅+20くらいの数値 の差がサイドバーとメインの間の余白になります。幅M の間隔を 3px 減らすときは、左右幅+20くらいの数値 を 213px 213px とし、全体幅を左右の合計値分(3+3)減らします。906 - 6 = 900px
/* S 819px 190px 190px -190px -190px 210px 210px
/* ----------------------------------------------------[ 幅変更 S ]*/ #pagetop{ width: 819px; } /* 全体幅 */ #sideL{ width: 190px; } /* 左幅 */ #sideR{ width: 190px; } /* 右幅 */ #main{ margin-left : -190px; } /* 左幅の -値 */ #mainSide{ margin-right: -190px; } /* 右幅の -値 */ .eContent,.pContent,ul.navi{ margin-left : 210px; /* 左幅 +20 くらいの数値 */ margin-right : 210px; /* 右幅 +20 くらいの数値 */ }
/* M 906px 196px 196px -196px -196px 216px 216px
/* ----------------------------------------------------[ 幅変更 M ]*/ #pagetop{ width: 906px; } /* 全体幅 */ #sideL{ width: 196px; } /* 左幅 */ #sideR{ width: 196px; } /* 右幅 */ #main{ margin-left : -196px; } /* 左幅の -値 */ #mainSide{ margin-right: -196px; } /* 右幅の -値 */ .eContent,.pContent,ul.navi{ margin-left : 216px; /* 左幅 +20 くらいの数値 */ margin-right : 216px; /* 右幅 +20 くらいの数値 */ }
/* L 950px 203px 203px -203px -203px 223px 223px
/* ----------------------------------------------------[ 幅変更 L ]*/ #pagetop{ width: 950px; } /* 全体幅 */ #sideL{ width: 203px; } /* 左幅 */ #sideR{ width: 203px; } /* 右幅 */ #main{ margin-left : -203px; } /* 左幅の -値 */ #mainSide{ margin-right: -203px; } /* 右幅の -値 */ .eContent,.pContent,ul.navi{ margin-left : 223px; /* 左幅 +20 くらいの数値 */ margin-right : 223px; /* 右幅 +20 くらいの数値 */ }
/* LL 995px 203px 203px -203px -203px 223px 223px
/* ----------------------------------------------------[ 幅変更 LL ]*/ #pagetop{ width: 995px; } /* 全体幅 */ #sideL{ width: 203px; } /* 左幅 */ #sideR{ width: 203px; } /* 右幅 */ #main{ margin-left : -203px; } /* 左幅の -値 */ #mainSide{ margin-right: -203px; } /* 右幅の -値 */ .eContent,.pContent,ul.navi{ margin-left : 223px; /* 左幅 +20 くらいの数値 */ margin-right : 223px; /* 右幅 +20 くらいの数値 */ }
可変幅 3カラム
変更場所 ▼ スタイルシートの編集
全体幅を % で指定するだけです。幅のみ変更します。左右幅 と 左右幅+20くらいの数値 の差がサイドバーとメインの間の余白になります。間隔を 5px 減らすときは、左右幅+20くらいの数値 を 212px 212px とします。
max-width: 960px; /* 最大幅 */ min-width: 760px; /* 最小幅 */
はウインドウを広げたときの限界値です。必要であれば、追記してください。
/* ----------------------------------------------------[ 幅変更 可+固 ]*/ #pagetop{ width: 94%;max-width: 960px;min-width: 760px; } /* 全体幅 */ #sideL{ width: 196px; } /* 左幅 */ #sideR{ width: 196px; } /* 右幅 */ #main{ margin-left : -196px; } /* 左幅の -値 */ #mainSide{ margin-right: -196px; } /* 右幅の -値 */ .eContent,.pContent,ul.navi{ margin-left : 216px; /* 左幅 +20 くらいの数値 */ margin-right : 216px; /* 右幅 +20 くらいの数値 */ }
3カラムのみ HTML編集:メイン部分にコンテンツを入れるときの注意事項
たとえば、プラグイン3と記事の間にブログパーツや広告などを入れるときは以下の場所に入れます。
<!--/plugin--> <!--Plugin3[1]--><!--/index_area--> ここにdiv要素などを入れる <!--topentry-->
このとき、入れる要素には必ず共通の class をつけてください。ここでは ePlus というクラスをつけます。
<!--/plugin--> <!--Plugin3[1]--><!--/index_area--> <div class="ePlus"> ここに入れたいブログパーツの記述 </div> <!--topentry-->
クラスをもう一つ使う場合は class="ePlus hoge" とします。
※クラスhogeには左右のマージンを指定しないでください。上下の余白は指定しても問題ありません。
さらに他の箇所、たとえば、個別ページの記事とコメントの間にブログパーツを入れるときは、次のようになります。
<!--/topentry--> <!--permanent_area--> <div class="ePlus"> ここに入れたいブログパーツ2の記述 </div> <!--/permanent_area--> <!--comment_area-->
このように追加する要素には共通の class="ePlus" をつけます。
そして、スタイルシート幅変更の .eContent,.pContent,ul.navi の後に追加した共通のクラスを入れ、余白などのプロパティを追加します。
変更場所 ▼ スタイルシートの編集
/* ----------------------------------------------------[ 幅変更 可+固 ]*/ #pagetop{ width: 908px; } /* 全体幅 */ #sideL{ width: 196px; } /* 左幅 */ #sideR{ width: 196px; } /* 右幅 */ #main{ margin-left : -196px; } /* 左幅の -値 */ #mainSide{ margin-right: -196px; } /* 右幅の -値 */ .eContent,.pContent,ul.navi,.ePlus{ margin-left : 216px; /* 左幅 +20 くらいの数値 */ margin-right : 216px; /* 右幅 +20 くらいの数値 */ }
追加要素のプロパティをスタイルシートに追記。
margin は margin-bottom か margin-top のみ使います。position:relative はたぶん必須です。overflow:hidden はあった方がよいかもしれません。
/* ----------------------------------------------------[ 追加 ] */ .ePlus{ margin-bottom: 3.3em; /* 下の余白 */ padding: 0 5px; /* 左右内余白 */ position: relative; overflow: hidden; font-size: 82%; /* 文字サイズ */ color: #ffffff; /* 文字色 */ }
- 関連記事