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

【３】左メニュー部分の用語説明

ＨＴＭＬ部分

・TD VALIGN=TOP CLASS=ltmenu width = "160"
・div class="menuleft"
・div class="menuleftbox"
・フリースペース
・%link_url
・%link_name
・rcomment
・%rcomment_***
・rtrackback
・%rtrackback_***

スタイルシート部分

・ltmenu
・margin
・padding
・width
・background
・overflow
・div.menuleft
・.menuleftbox
・menuleftbox a:〜

TD VALIGN=TOP CLASS=ltmenu width = "160"

まず、記事、左メニュー、右メニューの３列はテーブルで作られています。ＨＴＭＬ内では左メニュー、記事部分、右メニューの順番で作成されています。
はじめに作るのが左メニュー部分で、tdvalignというのはこれを宣言しないと左メニューと記事部分、右メニュー部分のトップ部分の位置がずれていってしまうので設定しています。
class ltmenuは、スタイルシートで設定した左メニュー部分の領域の設定をＨＴＭＬ内で適用させています。width = 160というのは、左メニュー部分の幅の設定であり、googleアドセンス(クリックされると報酬が得られるシステム）の広告を設置する幅で160というのがあるのでそれに合わせて設定しました。
▲トップへ

div class="menuleft"

スタイルシート部分で宣言したdiv.menuleftのスタイルをＨＴＭＬ内で適用させています。
これは、左メニューの各ボックスのタイトル部分にあたり、「コメント」「トラックバック」「リンク」などと、灰色の背景の部分です。この部分の増やしていくとボックスのタイトル部分が増えていきます。
▲トップへ

div class="menuleftbox"

スタイルシート部分で宣言した.menuleftboxのスタイルをＨＴＭＬ内で適用させています。
これは、左メニューの各ボックスの灰色の背景のタイトル下の部分にあたり、投稿されたコメントなどがリスト化されて表示される部分です。
menuleftと組み合わせて使う事により、新たに左メニュー部分にボックスが生成されます。
▲トップへ

フリースペース

これは不必要ならば<↓フリースペース>から↑フリースペースまで全て消して下さい。
アフィリエイトブログを運営される場合はこちらに広告やgoogleアドセンスを設置したりオススメ商品を載せたりします。いずれも横幅160pxに抑えた方がいいです。
他にもブログの紹介文の詳細や画像、ブログペットなどのブログパーツなどを載せることが出来ます。
▲トップへ

%link_url

管理人画面の「リンクの編集」で追加したリンクのＵＲＬを参照しています。これによりクリックした時、リンクの編集で追加したリンクのＵＲＬに移動します。
▲トップへ

%link_name

管理人画面の「リンクの編集」で追加したリンクの名前を参照します。これにより左メニューの「リンク」に追加したリンクがリスト化して表示されます。
▲トップへ

rcomment

ＦＣ２独自変数の１つで、最近投稿されたコメントの一覧を表示させます。
▲トップへ

%rcomment_***

FC2独自変数の１つ、"rcomment"内で使える変数です。
■rcomment_etitle・・・最近のコメントのタイトルを表示させます
■rcomment_link・・・最近のコメントのＵＲＬを所得します
■rcomment_name・・・最近のコメントの投稿者の名前を所得します
■rcomment_month/day・・・そのコメントが送られてきた月、日を所得します
▲トップへ

rtrackback

FC2独自変数の１つで、最近投稿されたトラックバックの一覧を表示させます。
▲トップへ

%rtrackback_***

FC2独自変数の１つであるrtrackback内で使える変数です。
■%rtrackback_link・・・送られてきたトラックバックのＵＲＬを所得します
■%rtrackback_excerpt・・・送られてきたトラックバックの要約文を所得します。ここでは、マウスをトラックバックタイトルのリンクの上に乗せると表示されるようにしています。
■%rtrackback_title・・・送られてきたトラックバックのタイトルを所得します。
■%rtrackback_blog_name・・・送信者のブログ名を所得します。
■%rtrackback_month/day・・・送信された月、日を所得します。
▲トップへ

lemenu

左メニュー列全体の設定をします。その下のdiv.menuleft、div.menuleftboxで各ボックスごとのタイトル部分の設定やタイトル下リスト部分の設定をします。
▲トップへ

margin

左部分の領域の外側との間隔を指定するのがmargin[マージン]です。margin:5px 0px 0px 0pxとなっていますが、左メニュー領域の上部分とヘッド部分に5px余白を持たせ、左右、下部分の領域一杯に表示させるという事です。少し余白を持たせたいならば数値を
margin:上余白px 右余白px 下余白px 左余白px とそれぞれ大きくして指定して下さい。
padding[パディング]との違いを理解するのに時間がかかるかもしれませんが、簡単に違いを申しますと、marginは領域の外側との間隔、paddingは領域の内側と内側にあるテキストなどとの間隔をそれぞれ指しており、間隔を空ける対象が違います。 ▲トップへ

padding

左部分の領域の内側にあるテキストなどとの間隔を指定するのがpadding[パディング]です。padding:0pxとなっていますが、これは左の領域内側との間隔を0にするという事です。少し余白を持たせたいならば数値を
padding:上余白px 右余白px 下余白px 左余白pxとそれぞれ大きくして指定して下さい。
margin[マージン]との違いを理解するのに時間がかかるかもしれませんが、簡単に違いを申しますと、marginは領域の外側との間隔、paddingは領域の内側と内側にあるテキストなどとの間隔をそれぞれ指しており、間隔を空ける対象が違います。 ▲トップへ

width

widthは160pxに指定しています。
これは、googleアドセンスという、googleアドセンス会員になって広告設定して生成されたタグを貼り付ける事により訪問者が広告をクリックすると報酬が貰えるシステムを意識したサイズです。この数値を増やし、かつＨＴＭＬ部分の左メニュー部分のwidthもスタイルシートで設定した幅にすると左メニュー部分の幅が指定したとおりに増えます。
▲トップへ

background

左メニュー部分の背景色を決めます。この部分の変更しただけでは全ての背景色（各ボックスのタイトルやコンテンツ部分）の色は変わりません。
▲トップへ

overflow

overflowでは、width,heightを指定した場合、テキストや画像がコンテンツ部分に収まりきらない場合にhiddenを指定する事により、収まりきらない場合は表示しない事にしています。heightを指定していないので収まりきらない事は無いと思いますが、もしもの時の為の指定です。
指定できる値は以下のものがあります。
■hidden・・・収まりきらない場合は表示しない
■visible・・・領域の指定(width,heightの値)を無視し、高さと幅を自動的に調整して収まりきらない場合も表示させます。デザインが崩れてしまう場合もありますので注意が必要です。
■scroll・・・収まりきらない場合は縦と横にスクロールバーをつけてスクロールする事により収まりきらなかった部分も見えるようになります。
■auto・・・訪問者が使用しているブラウザが自動的に処理します。ブラウザにはあまり頼らない方がいいのでオススメできません。
▲トップへ

div.menuleft

左メニューの各ボックスのタイトル部分の設定をします。
borderで枠線の太さ(1px)や枠線の種類(枠線の種類についてはこちらを参考にして下さい。)、タイトル部分の背景色(background-color)、文字色(color)を設定します。
▲トップへ

.menuleftbox

各ボックスのコンテンツ部分の設定をします。
text-align:leftは文字の左寄せ、borderは各ボックスコンテンツ部分の枠線の太さ(px)、色(#〜)、枠線の種類(枠線の種類についてはこちらを参考にして下さい。)、line-height(文字の上下間隔)、background(背景色)、margin(上px 右px 下px 左px)で隣接する領域との間隔を設定します。
▲トップへ

.menuleftbox a:〜

左メニューのコンテンツ部分のリンク色を設定します。
■a:link・・・初めて訪れる場合のリンク色を設定します。
■a:visited・・・すでに訪れた場合のリンク色を設定します。
■a:hover・・・マウスをリンクの上にのせた時のリンク色を設定します。
▲トップへ

前後の記事

最近の記事

トラックバック

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

コメント