上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 FC2テンプレートを実際に作ってみる企画です。
 はじめから読むには、以下からどうぞ。
FC2テンプレートを1から作ってみる

 今回は、最初にどういったサイト構成にするか、どういったページレイアウトにするかという計画を立てていきます。




ブログのページ構成


 FC2ブログの機能で作成できるページ(用意されているURL)は、まず何があるのかを洗っていきましょう。


トップページhttp://***.blog00.fc2.com
記事ページhttp://***.blog00.fc2.com/entry-01.html
カテゴリーページhttp://***.blog00.fc2.com/category-00.html
アーカイブページhttp://***.blog00.fc2.com/blog-date-000000.html
タグページhttp://***.blog00.fc2.com/?tag=**
検索結果表示ページhttp://***.blog00.fc2.com/?q=**

(何かぬけてたらゴメンナサイ)

 これだけのページが、ブログを公開した時点で作られます。
 これらのページのHTMLとCSSを組むために、最初にそれぞれのページとアイテムの構成を計画しておきます。
 アイテムのレイアウトに関しては以下から。



ページのアイテム構成


 ページのアイテムとは、「ヘッダー(タイトル部分)」や「メインカラム」「サイドバー(プラグイン)」「フッター」等のことです。
 これを、先ほど挙げた「作成できるページ(用意されているURL)」6種すべてのページでレイアウトしていくわけです。

テンプレートレイアウト

 例えば、現在一番FC2ブログで一般的だと思われるのが、すべてのページで「ヘッダー」「フッター」「プラグイン」を表示させ、「メインカラム」内だけ、ページごとに異なる物を放り込む手法です。

 あれ? と思われた方もいるかも知れません。ブログと言えば「あの形・レイアウトがすべてのページで同じ」…他の形のブログを見たことがない人もいると思いますが、あれが普遍のデフォルトというわけではありません。

 実は、6種すべてのページで、レイアウトを変えることも出来ます。
 例えば、トップのページでは「ヘッダー」も「サイドバー」も表示させずに、画面いっぱいにメニューを表示するとか、6種の各ページごとにヘッダーを変えるとか…

各ページ種ごとに、レイアウトは変えられる


 ただ、便利で理想的、何より訪問者のユーザビリティーも確保されている、汎用性の高いベストな形、それが、いつも見ているブログの形。全ページに「ヘッダー」「フッター」「サイドバー」が表示されているのが、一番都合が良い形だから…と言うだけのことに過ぎません。





結局FC2ブログでは、何が出来るのか?


 結局FC2ブログで出来るのは、

各ページ種ごとに、レイアウトを自在に変えることが出来る。
ページレイアウトを自由自在に配置できる

 と言うことです。兎に角、自由度が非常に高いのです。
 逆に言うと、きっちりデザインの基礎を固めておかないと、まともな物が作れないと言うわけです。

 自由度が非常に高いので、ブログの構成をホームページのようにすることも出来ます。
 逆に言うと、「ブログ用のツール」が「分かりやすく、しかも充実」しているホームページ作成サービスと言えるかも知れません。




具体的にどういうシステムで表示するのか


FC2テンプレート・管理画面
 実際に管理画面でテンプレート編集ページを開いてみると、「HTML編集ファイル」1つ、「スタイルシートの編集ファイル」1つ、この2つのファイルしか有りませんよね。
 HTMLは1つなのに、どうして各ページ種ごとに違うHTML表示が出来るのかというと…


『もしトップページであれば、ここからここまでは表示しなさい』
『もし詳細記事ページであれば、ここからここまでは表示しません』
『もし詳細記事ページでなければ、ここからここまでは表示しません』
『ここには、記事データを挿入します』

等々等々…

 このような「独自タグ」という、FC2ブログには特殊な命令文が用意されているからです。
 FC2テンプレートとは、この「独自タグ」を使用して、本来であれば複数必要なHTMLファイルを1つに纏めた物なのです。



HTMLと独自タグの組み方の考察


 具体的に、どうやって独自タグと本来のHTMLタグを、どうやって組み上げればいいのでしょう。
 一番簡単なのは、

<トップページはここから>
<html>
<head>
</head>
<body>
<ヘッダー>
<メインカラム>
<サイドバー>
<フッター>
</body>
</html>
<トップページはここまで>

<記事詳細ページははここから>
<html>
<head>
</head>
<body>
<ヘッダー>
<メインカラム>
<コメント>
<サイドバー>
<フッター>
</body>
</html>
<記事詳細ページははここまで>

<全記事表示ページははここから>
 :
 :
 :
※実際の独自タグとは違います。分かりやすく日本語にデフォルメして書き直しています。

 こんな風に、HTML全体を丸ごと独自タグで囲み、各ページをそれぞれ仕上げていく方法。これが一番簡単で分かりやすいですが、手間はかかるし、HTMLファイルは大きくなるし、6種のページでヘッダーをカスタマイズしたとき、それぞれ6種類のHTMLを探して修正しなければならない。などなど、あまり良いことがありません。

 そこで、6種のページすべてで同じ表示をさせたい部分を割り出し、HTMLタグ内に、独自タグを細かく表示していくと、HTMLファイルはスリムになり、合理的に修正もしやすくなり…などなど、良いことが増えます。

<html>
<head>
</head>
<body>
<ヘッダー>
<メインカラム>
<トップページはここから>
<記事繰り返し表示用タグ>
<トップページはここまで>

<全記事表示はここから>
<全記事表示用タグ>
<全記事表示はここまで>

<サーチページはここから>
<サーチページタイトル>
<記事繰り返し表示タグ>
<サーチページはここまで>

<詳細記事ページはここから>
<記事繰り返し表示タグ(勝手に繰り返さない表示に変わる)>
<追記表示タグ>
<コメントフォーム表示タグ>
<詳細記事ページはここまで>
<メインカラムここまで>
<サイドバー>
<フッター>
</body>
</html>

 このような感じで、メインカラム内に独自タグを入れて、各ページ種ごとに表示させる内容を変えていけば、どのページ種の時も「ヘッダー、サイドバー、フッター」は共有、同じ表示になり、「メインカラム内」のみ、各ページ種ごとに表示を変える。

 このようなことが実現できるわけです。




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