スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレート講座第二回 
2005 11 02
Wed 01:34:11

テンプレート講座  Comment 0  Trackback 0  edit.

当初の予定ではゆっくりと時間をかけてトップページの作り方をと思いましたが、色々と考えが渦巻き始めたので細々と書いていこうと思います。

二回目は、トップページをどうデザインするか?です。
まずはトップページに必要なモノを考えてみましょう。
絶対に必要なのは、記事一覧ページに入るためのリンクですね。
これが無いと記事が読めませんので。w
それとブログのタイトル。
後は、せっかく来てくれたのだから「ここは私のブログです」と言う目印の意味でも画像なんかを使うと良いでしょう。
勿論、コメントなども有ると「どんなブログなの?」と言う訪問者も戸惑わないでしょうね。

しかし誰でもがタグを組んでトップページを作る事は出来ません。
ソフトなどが有ればそれで作ったモノを貼り付けるという手法もとれますが、初心者でも意外と簡単な方法として私が紹介するのは「画像を使う」デザインです。
「画像は難しいよ?」と、思われるかも知れませんが何も一から画像を作る必要は有りません。
スクリーンキャプチャを使ってブログテンプレートからデザインを画像として使う、と言う手法も有ります。
まぁ?画像なら何でも良いので適当にインターネットで探してみましょう。

一回目の時に簡単な変数を使った構成を覚えてますか?
<body>

<!--index_area-->
これはトップページです。
<!--/index_area-->

<!--not_index_area-->
? (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>

これを使って見ましょう。
まずメインの画像をどうするか?です。
普通なら <img> タグを使って貼りたい所ですがそうすると画像の上に文字やリンクは張れません。
そこでブロックタグを使います。
<div>?</div>

これは<div>で囲まれたタグをひとつのブロックとして扱うタグです。
この<div>にクラス属性を使って大きさと背景画像を指定する事で画像を貼る事が出来る訳です。
<body>

<!--index_area-->
<div class="index_top">
これはトップページです。
</div>
<!--/index_area-->

<!--not_index_area-->
? (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>

classを付けたのでスタイルシートに色々な設定値が使えるようになりました。
.index_top {
width:500px;
height:450px;
background: url(http://画像のアドレス○○.jpg) no-repart top left;
}

上の設定をスタイルシートに追加する事でトップページには画像が表示されたと思います。
(スタイルシートの設定は、width(幅)500px height(高さ)450px background(背景の指定)no-repart(繰り返さない) top left(左上に合わせる)と言う設定をしています。)

ここまでは大丈夫かな?
画像をウインドウの中央にしたい場合は、
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;

と言う魔法の言葉を追加して下さい。
タグを知っている方は<center>を使いたい所ですがせっかくスタイルシートを使うようになっている訳ですから、中央に寄せる場合は上の属性を指定するようにしましょう。
ちなみに
body {
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

と同じ魔法の呪文を追加して下さい。(ちょっと面倒ですがこれでIEだけじゃなく他のブラウザでも中央に表示されます。)
これで取りあえずトップに画像が貼れました。
次にこの画像の上に、記事一覧へ入るための入り口(ENTERなど)を付ける訳ですが、トップページを使う場合、今までのアドレスのままだと記事一覧ページへは入れません。
./?page=0

と言うアドレスが追加される事になっています。(試しにご自身のアドレスに上の ?page=0 を追加してみて下さい。記事一覧ページが表示されたと思いますが)
<body>

<!--index_area-->
<div class="index_top">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>
<!--/index_area-->

<!--not_index_area-->
? (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>

上のようにすると、画像の上に ENTER のリンクが見えますね。
でもこれだと ENTER が左上に来て格好良くないです。
そこでこれもブロックタグで囲って位置を指定してあげましょう。
<body>

<!--index_area-->
<div class="index_top">
<div class="index_enter">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>
</div>
<!--/index_area-->

<!--not_index_area-->
? (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>

これでクラス名を index_enter と付けましたのでスタイルシートで設定してあげましょう。
.index_top {
width:500px;
height:450px;
background: url(http://画像のアドレス○○.jpg) no-repart top left;
}
.index_enter {
margin-left:auto;
margin-right:auto;
margin-top:225px;
text-align:center;
font-size:20pt;
}

これでほぼ画像の真ん中にENTERが配置出来たと思います。
細かい位置は、px単位で設定してあげると好きな位置に出来ます。
ついでにフォントサイズも 20pt の大きめサイズにしています。

これだけでも立派にトップページが出来上がった訳ですが、ブログのタイトルやコメントなども載せたいと思う場合は、それぞれを<div>タグで囲い class= を付けてスタイルシートで設定してあげましょう。
その場合は、上から順番に配置して上げると細かな設定がやりやすいと思います。

一応、トップページが出来たという事で今回はこの辺にしましょう。(長文ですしw)

次回へ(不定期)

ジャンル [ ブログ テーマ [ オリジナルテンプレート ]

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。