上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 今回はさらに進んで、スタイルシートの「Position」を利用し、ヘッダー内にある「タイトルロゴ」「概要文」「広告」等々をかっこよくレイアウトしていきます。
 ポータル系サイトや、ニュース系サイトのように、アイテムをきっちり見やすく入れるのが目標です。
(CSSの知識が若干必要です。「テンプレCSSを書く Part.1(書き方)」を参考に。)

 こんな感じ。(広告は本物)

ブログ概要文・ヘッダーレイアウトを自由に行えるのが、CSSのPositionです。





ポジション(position)とは?



 スタイルシートの「position」は、例えば「右から50px、上から30pxのところに、divブロックを配置する」とか「下から20px、左から10pxのところにdivブロックを配置する」と言う命令文です。
 高さや幅が予め決定しているヘッダーなどのブロック内では、「float」を使うより簡単に扱え、しかも正確に座標を取りやすいので重宝します。
 以下の構文を覚えるだけで使えます。

position : relative ;このボックス内で「ポジションを使うよ!」
という宣言のようなもの

position : absolute ;このボックスは、「座標にあわせて配置するよ!」
という決まり文句
left:10px座標:左からの距離(横軸)
right:10px座標:右からの距離(横軸)
top:10px座標:上からの距離(縦軸)
bottom:10px座標:下からの距離(縦軸)
※ポジションについてのより正しい使い方は、「positionを使いこなす」から。

 実際は、座標は縦軸、横軸のどちらか一方だけ使います。
 また、「position : relative ;」という宣言を忘れると、中身のブロックがヘッダーブロックから飛び出し、「画面の右から~px、画面の上から~pxの場所に配置」なんて事になるので注意。


※イメージ図

(top:0/left:0)

top:30px
left:40px


bottom:30px
right:40px

(bottom:0/right:0)     

※(左:上)で指定すれば、親ボックスの左上が基点となり、(右:下)で指定すれば、親ボックスの右下が基点になる。





3FaithBlackに組み込んだサンプル



 実際に組み込んだのがこちら。
 H1タイトルと、p.intro概要文を、座標で表示。

HTML(変更無し)
<div id="header">
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
<p class="intro"><%introduction></p>
</div>


CSS(赤字部分が追加)
#header{
text-align:left;
height:120px;
margin:0 auto;
background:#555 url("") no-repeat center bottom;
position:relative;
}
 :
 :
 :
 :
/* ヘッダー
------------------------------------------------------------ */
#header h1{
font-size:16px;
margin: 0 0 0;
padding:10px 20px;
position:absolute;
left:20px;
top:20px;

}
#header h1 a{
color:#fff;
border:none;
}
#header h1 a:hover{
color:#ccf;
}
.intro{
font-size:12px;
width:500px;
padding:10px;
color:#fff;
margin:10px 20px;
position:absolute;
right:20px;
bottom:20px;

}


 この場合は、以下のようなイメージでブロックが配置されます。

← width:960px →
div#header
座標(0,0)
ブログタイトル
左から20px
上から20pxの位置
ブログ概要文 右から20px 下から20pxの位置

height:
120px;
座標(960px,120px)



 つまり、さらに「div#header」内に「divブロック」を追加し、そのスタイルにポジションを適応していけば、たくさんのアイテムを座標にあわせて自在にレイアウトが出来るようになります。




実際に広告を組み込んでみる



 さらに、例えば広告のdivブロックを、右上の空白部分に組み込んでみたのが、以下の一文です。
 広告ブロックは、右上を基点にして「right:20px top:20px」で配置してみました。

← width:960px →
div#header
座標(0,0)
ブログタイトル
左から20px
上から20pxの位置
ブログ概要文 右から20px 下から20pxの位置
ブログ広告
右から20px
上から20pxの位置

height:
120px;
座標(960px,120px)


 HTML、CSSには、以下の赤字部分を追加しています。

HTML
<div id="header">
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
<p class="intro"><%introduction></p>
<div class="castam_ad">広告用のタグ</div>
</div>


CSS
#header{
text-align:left;
height:120px;
margin:0 auto;
background:#555 url("") no-repeat center bottom;
position:relative;
}
 :
 :
 :
/* ヘッダー
------------------------------------------------------------ */
#header h1{
font-size:16px;
margin: 0 0 0;
padding:10px 20px;
position:absolute;
left:20px;
top:20px;
}
#header h1 a{
color:#fff;
border:none;
}
#header h1 a:hover{
color:#ccf;
}
.intro{
font-size:12px;
width:500px;
padding:10px;
color:#fff;
margin:10px 20px;
position:absolute;
right:20px;
bottom:20px;
}
.castam_ad{
position:absolute;
right:20px;
top:20px;
}


 こんな感じで、いくつでもdivブロックを追加でき、さらに座標で綺麗にレイアウトできるようになります。




様々なカッコイイブログを見て研究する



 ポータルサイトや、カッコイイブログサイトなどを色々見て回ると、凝っているサイトは非常にかっこよくヘッダーがデザインされています。
 検索エンジン最適化の面から見ると、「ナビゲーション的リンク要素」を配置するのが効果的だと思われます。例えば「インデックスページ(全記事)」「RSS」「おしらせ・About」「サイトについて」「メインメニューページへのリンク」「カテゴリ別メニューページ」などなど。
 いろいろなアイテムを、自在にレイアウトしてみて下さい。

 また、フォトショップでのロゴ作成については、手前味噌で申し訳ないのですが、こちらも参考に。
ロゴ | CUTIE PHOTOSHOP・キューティーフォトショップアート


■メニューページへ戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Sat.06.18.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。