＜＜カスタマイズトップへ戻る

【６】エントリー部分の用語説明

ＨＴＭＬ部分

・div class = "kizi"
・permanent/not_permanent_area
・h2
・<!--topentry-->
・div class = "ptime"
・index_area
・編集
・オートナビゲーション機能（パンくずリスト）
・div class = "kizi_more"
・div class = "kizi_tale"

スタイルシート部分

・kizi
・kizi h2
・ptime
・kizi_body

div class = "kizi"

スタイルシート部分で宣言した".kizi"を読み込んでいます。
設定を変更するにはスタイルシート部分を書き換えて下さい。 ▲トップへ

permanent/not_permanent_area

permanant_areaとは、ＦＣ２独自変数の１つで、固定リンク画面(blog-entry-x.html)に移ったときに表示するものです。これで囲まれた部分は固定リンク画面でしか表示されません。"not_"の方は、逆に固定リンク以外で表示されます。
詳しくはテンプレート機能一覧で説明されています。
▲トップへ

H2

H2というのは、見出しタグの１つで、このテンプレートでは見出しタグを二つだけ使用しています。見出しタグには全部で１〜６の６レベルで使用する事が出来、数字が小さくなるほど重要な見出しという事になります。
このテンプレートではH1をブログタイトル、H2を記事タイトルにし、ロボット型検索エンジン、googleなどから見れば何が重要かわかりやすくしています。
右メニューなどをh3で指定される事が多いですが、検索エンジンは「カテゴリ」「リンク」など、あまり重要視して欲しくないキーワードも重要視してしまうので、ここでは避けました。
h2で囲まれた部分は、各記事ごとのタイトル文字部分にあたります。
▲トップへ

<!--topentry-->

topentryは、ＦＣ２独自変数の１つで、公開されたエントリーを繰り返し表示します。
これに囲まれた部分<!--topentry-->〜<!--/topentry-->でのみ使える変数があります。それが%topentry_noや%topentry_titleといったものです。
それぞれ詳しくはテンプレート機能一覧をご覧下さい。
▲トップへ

div class = "ptime"

スタイルシート部分で宣言したptimeを読み込んでいます。
ptimeは各記事のタイトルの下にある、更新した時間を表示している時間の場所にあたります。月と日にち・時間・分を表示させています。
▲トップへ

indexarea

トップページでのみ表示される部分です。
詳しくはトップページでのみ表示させる方法に記載されています。
▲トップへ

編集

必要なければ
｜ <a href="<%url>admin.php?mode=editentry&no=<%topentry_no>">編集</a>
の部分を消して下さい。これは、各記事ごとに簡単に編集が出来る為にあり、過去の記事を修正したい時でも、わざわざ「過去の記事の編集」から探さなくとも直接その記事の編集ページへ移動できるものです。
▲トップへ

オートナビゲーション機能（パンくずリスト）

これは、「今見ているページはブログ内のどういった断層にいるか」がすぐ分かるもので、
トップ＞カテゴリ名＞記事名
といった風に表示されます。必要なければ↓オートナビ〜↑オートナビまで消して下さい。その際は、２つあるので両方消して下さい。
▲トップへ

div class = "kizi_more"

追記部分へのリンク表示部分です。
これをクリックすると、追記部分で記述した部分が表示されます。
テキストを変えたければ、▼続きを読む
という部分を、「追記」「もっと詳しく」「...more」などと変えて下さい。
▲トップへ

div class = "kizi_tale"

スタイルシート部分で設定したkizi_taleを読み込んでいます。
kizi_taleとは、各記事の一番下にある
コメント(0)｜トラックバック(0)｜
という部分です。何か追加したいものなどがあれば付け足して下さい。
たとえば人気blogランキングに参加している人は、｜ランキング
と記述すればクリック数が増えるかもしれませんね。
▲トップへ

kizi

記事表示部分（３列の中央部分です）の設定をしています。
この領域の内側にあるテキストなどとの間隔を指定するのがpadding[パディング]です。padding:0pxとなっていますが、これは左の領域内側との間隔を0にするという事です。少し余白を持たせたいならば数値をpadding:上余白px 右余白px 下余白px 左余白pxとそれぞれ大きくして指定して下さい。 margin[マージン]との違いを理解するのに時間がかかるかもしれませんが、簡単に違いを申しますと、marginは領域の外側との間隔、paddingは領域の内側と内側にあるテキストなどとの間隔をそれぞれ指しており、間隔を空ける対象が違います。
borderは記事表示部分の外枠です。詳しくは記事内での見出し例を見て下さい。
text-align:leftは文章を左寄せにしています。中央寄せする場合はcenter、右寄せする場合はrightと指定して下さい。
▲トップへ

kizi h2

記事タイトル部分のリンク色や背景色の設定をしています。
背景を紺色(#778899)にしています。変更するにはbackgroundのカラーを変えて下さい。
margin-bottomはタイトル部分とその下背景白のコンテンツ部分（kizi_body）との間隔を指定しています。 paddingはタイトル領域外枠とテキスト部分との間隔（上px 右px 下px　左px）です。
kizi h2 a:〜では、このタイトル部分にリンクを張る場合のリンク色を指定しています。 a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定し、この場合には背景色も変えています。
▲トップへ

ptime

記事タイトルの下にある、投稿時間の表示部分の設定をしています。
text-alignで文字を左寄せし、font-sizeで文字サイズを変更します。
背景色を変えたい場合は#ccccccを変更して下さい。
カラーコードはわにchanのうぇぶわ〜るどさんの所が調べやすいです。
▲トップへ

kizi_body

記事のコンテンツ部分の設定をしています。
line-heightは文字の上下間隔で、この数値を大きくすればするほど、改行した時に文字通しの間隔が広くあきます。
marginは、記事部分外側の領域との間隔を指定しています。
margin 上px 右px 下px 左pxで間隔を指定します。
このテンプレートでは、margin 0px 10px 0px 10pxとなっているので、左右間が10pxあいています。
kizi_body a:〜では、このタイトル部分にリンクを張る場合のリンク色を指定しています。 a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定しています。
▲トップへ

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL：
http://fc2blogshop.blog13.fc2.com/tb.php/84-a2a67352

コメント