前後の記事

最近の記事

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

【５】トップページでのみ表示される部分の用語説明

ＨＴＭＬ部分

・index_area
・div class = "blogtop"
・div class = "blogtop_title"
・div class = "blogtop_body"

スタイルシート部分

・blogtop
・blogtop_title
・blogtop_title a:～
・blogtop_body a:～

index_area

FC2ブログ独自変数の１つです。index_areaで囲まれた部分はトップページでしか表示されません。詳しくはトップページでのみ表示させる方法に載せてありますので参考にして下さい。
▲トップへ

div class = "blogtop"

スタイルシートで設定したblogtopの読み込んでいます。blogtopはトップページでのみ表示されるボックスの領域全体を指します。
▲トップへ

div class = "blogtop_title"

初期段階では「▼トップページでのみ表示されるメニュー」
というテキストの部分です。この文字を変えるとトップページ一番上のタイトルが変わります。このままの文章だとおかしいので、例えばあなたのブログ紹介に使うのであれば「▼当ブログについて」などとするのが良いでしょう。ここにオススメ商品を載せるのもありですし、右メニュー部分の「最近の記事」部分を持ってきて新着記事をトップに出すのもいいかもしれません。
▲トップへ

div class = "blogtop_body"

これはトップページでのみ表示されるボックスのコンテンツ部分（背景白）にあたる部分です。
ここに文章を打ち込んでみたり画像を張ってみたりして下さい。
▲トップへ

blogtop

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

blogtop_title

初期段階では「▼トップページでのみ表示されるメニュー」
というテキストの部分です。背景を紺色(#778899)にしています。変更するにはbackgroundのカラーを変えて下さい。
margin-bottomはタイトル部分とその下背景白のコンテンツ部分（blogtop_body）との間隔を指定しています。
paddingはタイトル領域外枠とテキスト部分との間隔（上px 右px 下px　左px）です。
▲トップへ

blogtop_title a:～

このタイトル部分にリンクを張る場合のリンク色を指定しています。
a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定し、この場合には背景色も変えています。
▲トップへ

blogtop_body a:～

コンテンツ部分にリンクを張る場合のリンク色を指定しています。
a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定しています。
▲トップへ

前後の記事

最近の記事

トラックバック

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

コメント