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

 今回はいよいよ「ブロック」でレイアウトし、ブログアイテムをブロックの中に収めていきます。




ブログアイテム


 まずは、ブログを構成するアイテムは何があるのか、最初にピックアップしてみましょう。

  • ヘッダー
    • ブログタイトル
    • ブログの要約

  • メインコンテンツ
    • 記事タイトル
    • 記事本文
    • 追記文
    • 記事フッター
      • コメント、トラバのリンク
      • カテゴリのリンク
      • タグのリンク
      • 日付

    • コメント一覧
    • トラックバック一覧
    • コメントフォーム
    • トラックバックURL

    • サーチページ(検索結果の記事繰り返し表示)
    • 全記事一覧ページ
    • アーカイブページ(アーカイブ記事の繰り返し表示)
    • カテゴリーページ(カテゴリの記事の繰り返し表示)

    • 前、次のページへのナビ

  • サイドバー
    • プラグイン1
    • プラグイン2
    • プラグイン3

  • フッター
    • コピーライト
    • FC2広告(必須)


 確か、公式テンプレートでのアイテムは、こんな感じだったと思います。
 勿論減らしたり、何かを増やしたり出来ます。FC2の機能を生かすのであれば、このぐらいのアイテムは揃えておきたいところかも知れません。

 では、これらを「divブロック」を作って、実際に「裸のテンプレートひな形」へ放り込んでいきましょう。

 今回は、まず、一般的な「ページ種」によってレイアウトが変わらないテンプレートを作成します。

テンプレートレイアウト


 ブログアイテムの一覧で「ヘッダー」や「メインカラム」等と書いていますが、勿論これらのオードソックスな形式にとらわれる必要はありません。
 フッターを無くして、その中のアイテムを本文中に移すとか、サイドバーに入れ込むとか、コメントフォームをヘッダーに持ってくるとか…………本当に何をどうするかは、アナタ次第デス☆




ブロックレイアウトを作る


 それでは、まずアイテムを入れるボックス、基礎の骨格を作成します。
 よく分からない方は、こちらを参考にしてください。
divボックスの作り方


 前のページで作成したひな形に、「DIVボックス」を入れ、形を作っていきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%template_language>" lang="<%template_language>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<%template_charset>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<!--not_permanent_area--><%introduction><!--/not_permanent_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<link rel="top" href="<%url>" title="Top" />
<link rel="index" href="<%url>?all" title="<%template_index>" />
</head>

<body>
<!--コンテナ-->
<div id="conteinar">

<!--ヘッダー-->
<div id="header">
</div>
<!--ヘッダーここまで-->

<!--メインカラム-->
<div id="main">
</div>
<!--メインカラムここまで-->

<!--サイドバー-->
<div id="side">
</div>
<!--サイドバーここまで-->

<!--フッター-->
<div id="footer">
</div>
<!--フッターここまで-->
</div>
<!--コンテナここまで-->
</body>
</html>


●ブロックを作る時、一番基本的な骨格になるブロックのクラスは「class」ではなく「id」としておくと、テンプレートの汎用性が高くなります。とりあえず何も考えずに「id」にしておくことをお勧めします。
 クラス(class)、IDに関する詳細はこちらから確認頂けます。
テンプレCSSを書く Part.3(特定の場所へのクラス)

●コメント(注釈)は「<!--○○○○-->」という書き方をします。
 必要ない物ですが、ブログ自体には表示されない物です。テンプレートが複雑になってくると「どれがどの閉じタグだったっけ?」等と収拾が付かなくなる原因になるので、とりあえず書いておくことをお勧めします。


 これで、大きなブロックが完成しました。
 現在はまだ何も表示されませんが、実際は下図の様な感じでブロックが表示されている状態まで出来ました。

コンテナ
ヘッダー
メインカラム
サイドバー
フッター





入れ子に注意



 DIVブロックに限らず、HTMLを組むときは、入れ子(ネスト構造と言うそうです)に注意します。

入れ子・正しい例入れ子・間違えている例
 箱の中に箱が入る構造で記述していきます。箱が複雑に絡み合うような記述をすると、デザインがどんどん崩れていきます。




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