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

【２】header部分のタグ説明

ＨＴＭＬ部分

・a name = "top"
・div class = "intro"
・%introduction
・div class = "header"
・h1
・a href = "./"
・%blog_name
・div class = "blogmap"

スタイルシート部分

・header h1
・header a:〜
・intro
・blogmap
・blogmap a:〜

a name = "top"

これは、記事右下にある「ページ上部へ」というリンクをクリックした時の移動先を指定するものです。このマニュアルもこのタグを使っています。
a name　でそのリンクの名前を作っておき、別の場所でa nameでつけた名前を指定して(a href = "#a nameでつけた名前">)そこへ移動するようにしています。
▲トップへ

div class = "intro"

スタイルシートで定義した"intro"の設定をdivでくぐった場所に読み込ませています。"intro"はイントロダクション、つまり紹介文の部分です。
▲トップへ

%introduction

管理画面の環境設定の変更⇒サイトの紹介で入力した文章が映し出されます。ただし、紹介文で改行してもこちらでは反映されないので、この<%introduction>の部分を消し、直接ＨＴＭＬ部分に入力し、改行させたいポイントで<br>（改行コード）と入力して改行させて下さい。
▲トップへ

div class = "div class = header"

スタイルシートで設定したheader部分の設定を読み込みます。header部分とは、ブログタイトル、紹介文、ブログマップ全体の基準値設定の場所です。画面上部のボックスの事です。
▲トップへ

h1

スタイルシートで設定したブログタイトル部分の文字設定を読み込みます。h1とは、見出しタグの中で最も重要なタグの１つ（ロボット型検索エンジン、googleなどの目から）とされる部分で、ここで表示される文字（つまりブログタイトル）が検索結果に大きな影響を与えます。
▲トップへ

a href = "./"

ブログタイトルをクリックした時や「ＴＯＰ」や「ホーム」と表記されたテキストをクリックした場合に用いられています。"./"はそのブログのトップページへのリンクを表示させる為のもので、もじブログタイトルをクリックした時にトップでは無い別のリンク先（例えば個別にトップページを記事として作った場合）に移動させたい場合、記事ＵＲＬを　./　に変えればＯＫです。
▲トップへ

%blog_name

%blog_nameは管理画面⇒環境設定の変更で決めたブログタイトルのテキストが入ります。%blog_nameを削除して直接入力すると入力したテキストがブログタイトル部分に表示されます。
▲トップへ

div class = "blogmap"

blogmapとは、header部分の右下にある"top""rss"という表示のある部分です。スタイルシートで設定したblogmap部分の設定が読み込まれます。
デフォルトではTOPとRSSのみですが、div class = "blogmap"で囲まれた部分に入力すると新たにボタンが出来上がります。
▲トップへ

div class = "header h1"

ブログタイトル部分の文字サイズ（font-size）、header部分左端からの空白(margin 上px　右px 下px 左px)、ブログタイトル部分の領域内での空白（padding）、ブログタイトル部分の背景色(background-color)を設定をしています。ＨＴＭＬ内での使用についてはh1を参考にして下さい。
▲トップへ

div class = "header a：〜"

ヘッダー部分（デフォルトではブログタイトル部分のみ反映）のリンク色の設定をしています。
a:linkはまだ見ていない（キャッシュされていない）リンクテシスト、a:visitedはすでに見た（キャッシュされた）リンクテキスト、a:hoverはマウスカーソルを上にのせた時のリンクテキストの設定をします。"color"で文字色の設定、background-colorで背景色の設定、border-top/rightで枠線の上と右の設定をしています。初期設定では、まだ見ていなくともすでに見ていても、マウスカーソルをのせても文字サイズ白、マウスカーソルをのせた時以外は背景色はheader部分全体と同じ#778899、マウスカーソルをのせた時のみ背景色を濃くして（#033）上と右に枠線を入れて(border-top/border-right)その枠線の設定(枠線の太さ1px、枠線の色#cccccc)います。
▲トップへ

div class = "intro"

ブログ紹介文のスタイルを設定します。ブログ紹介文はページ一番上に表示される、細い灰色の部分全体を指します。
文字サイズを80%(基準値より20％小さい)、紹介文領域からの空白部分(padding)、文字の右寄せ(text-align:right)、上と下に枠線を引いています(border-top/bottom)。
▲トップへ

blogmap

blogmapとは、ヘッダー部分の右下にある"TOP""RSS"というボタン（のように見せている）領域の事です。
文字サイズを75％(font-size:75%)にして基準値よりも25%小さい文字にし、ヘッダー部分の他の領域との間隔を0(margin:0px)、blogmap部分の領域内でも間隔を0(padding:0px)、文字を右寄せ(text-align:right)、これを左寄せにしたければrightをleftに、中央に持っていく場合はcenterにして下さい。そして下に枠線を入れます(border-bottom)。
▲トップへ

blogmap a:〜

ブログマップ部分（ヘッダー右下"TOP""RSS"）のリンク色の設定をしています。
a:linkはまだ見ていない（キャッシュされていない）リンクテシスト、a:visitedはすでに見た（キャッシュされた）リンクテキスト、a:hoverはマウスカーソルを上にのせた時のリンクテキストの設定をします。"color"で文字色の設定、background-colorで背景色の設定、border-top/rightで枠線の上と右の設定をしています。初期設定では、まだ見ていなくともすでに見ていても、マウスカーソルをのせても文字サイズ白、マウスカーソルをのせた時以外は背景色はheader部分全体と同じ#778899、マウスカーソルをのせた時のみ背景色を濃くして（#033）上と右に枠線を入れて(border-top/border-right)その枠線の設定(枠線の太さ1px、枠線の色#cccccc)います。
▲トップへ

前後の記事

最近の記事

トラックバック

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

コメント