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

【４】右メニュー部分の用語説明

ＨＴＭＬ部分

・TD VALIGN=TOP CLASS=rtmenu width = "250"
・div class = "menuright"
・div class = "menurightbox"
・category
・%category_***
・archive
・%archive_***
・recent
・%recent_***
・copyright

スタイルシート部分

・rtmenu
・margin
・padding
・width
・background
・overflow
・div.menuright
・.menurightbox
・menurightbox a:〜

TD VALIGN=TOP CLASS=rtmenu width = "250"

まず、記事、左メニュー、右メニューの３列はテーブルで作られています。ＨＴＭＬ内では左メニュー、記事部分、右メニューの順番で作成されています。 最後に作るのが右メニュー部分で、tdvalignというのはこれを宣言しないと左メニューとコンテンツ部分、右メニュー部分のトップ部分の位置がずれていってしまうので設定しています。 class rtmenuは、スタイルシートで設定した右メニュー部分の領域の設定をＨＴＭＬ内で適用させています。width = 250というのは、右メニュー部分の幅の初期設定です。幅を変更する際は、この部分の値とスタイルシート部分のrtmenuのwidthも変更して下さい。
▲トップへ

div class = "menuright"

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

div class = "menurightbox"

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

category

ＦＣ２独自変数の１つで、カテゴリーの一覧を表示します。
管理者ページ⇒カテゴリーの編集で追加したカテゴリーがリスト化されて表示されます。
▲トップへ

%category_***

ＦＣ２独自変数の１つである、カテゴリーの一覧を表示する「category」内でのみ使用できる単変数です。
■%category_link・・・カテゴリーＵＲＬを所得します。
■%category_name・・・カテゴリー名を所得します。
■%category_count・・・カテゴリー内記事数を所得します。
▲トップへ

archive

ＦＣ２独自変数の１つである、archive（年、月別記事）の一覧を表示するものです。
例えば、2005年6月に26記事公開したのであれば、2005年06月(26)と表示されます。
▲トップへ

%archive_***

Ｃ２独自変数の１つである、archive（年、月別記事）内でのみ使用できる単変数です。
■%archive_link・・・その月のＵＲＬを所得
■%archive_year・・・その月の「年」を所得
■%archive_month・・・その月の「月」を所得
■%archive_count・・・その月の投稿数を所得
▲トップへ

recent

recentはＦＣ２独自変数の１つである、最近投稿された記事の一覧を表示させる為のものです。 管理者ページ⇒環境設定の変更⇒ブログの設定⇒最近のエントリーの表示数の数と連動しており、一覧表示させる最新のエントリー数はここで決めた数字だけ表示されます。
▲トップへ

%recent_***

ＦＣ２独自変数の１つである、最近投稿された記事の一覧を表示するための変数recent内でのみ使用できる単変数です。
■%recent_link・・・最近投稿されたエントリーのＵＲＬを所得します。
■%recent_body・・・本文の要約を表示します。これは、マウスをリンク上に乗せた場合にポップアップされる文章です。
■%recent_title・・・最近投稿されたエントリーのタイトルを所得します。
■%recent_month/day・・・最近投稿された記事の月、日を所得します。
▲トップへ

copyright

ここに記述されているものは全てそのままにして下さい。著作権を放棄していない事をあらわすものです。
▲トップへ

rtmenu

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

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は250pxに指定しています。 widthとは幅の事です。この数値を増やし、かつＨＴＭＬ部分の右メニュー部分のwidthもスタイルシートで設定した幅にすると右メニュー部分の幅が指定したとおりに増えます。
▲トップへ

background

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

overflow

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

menurightbox:a〜

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

div.menuright

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

.menurightbox

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

前後の記事

最近の記事

トラックバック

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

コメント