Main menu
You are here
テーマの作成 その３
その２で、テンプレートファイル（page.tpl.php）の中身はHTMLでもOKなことが判明した。なので、まずはHTMLで下地的にページのデザインをおこなっていく。
私はページのデザインを行う場合、デザインイメージを作ることからはじめる。ペイントソフトをつかって全体の配置イメージをつくってから、それに合わせてHTMLやCSSをコーディングするのだ。単に手順の問題なので閲覧者は自身の好きな方法でデザインしてほしい。
ページデザインのラフ画像
このデザインを元にコーディングをすりあわせていく。
<?php/* MnM Design theme template */?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<title>テーマテスト</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://localhost/drupal/testj/sites/all/themes/mnmdesign/style.css">
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
<div id="container">
<div id="wrapper_main">
<div id="contents">メインコンテンツ</div>
<div id="sidebar_left">左サイドバー</div>
</div>
<div id="sidebar_right">右サイドバー</div>
</div>
<div id="footer">
<p>フッター</p>
</div>
</body>
</html>
HTMLに体裁（デザイン）を与える上でスタイルシートを指定する必要がある。Drupal 6 ではデフォルトで style.css という名前のファイルがテーマディレクトリに存在すればそれをスタイルシートとして読み込んでくれる（厳密にはテンプレート内で指定しないとページに反映されない）。また、このスタイルシートの指定は、その１で作った.infoファイルの stylesheet 項目でも可能だ。スタイルシートが二つ（ファイル名のみとフルパス）あるのは単純に作業効率上の問題（サーバーでチェックする際に、現段階ではフルパスでの指定が必要。一方ローカルでコードを確認する場合はフルパスだと正しく読み込めない、よって同じファイルを２つの呼び方でリンクしてある）で、実際は指定は１つでかまわない。
その１で作った.info にも stylesheets[all][] = style.css と指定してある。デフォルトを丸写しだったのでそうなっているが、style.css の名前をそのまま使う（他のスタイルシートを使わない）のであれば省略してもちゃんと style.css が読み込まれる。
スタイルシートの内容は以下の通り
@charset "utf-8";/* HTML group */* {
margin: 0px;
padding: 0px;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
}
body {
background-color: #18240F;
}
/* HTML group */
#header {
height: 128px;
width: 1024px;
margin-right: auto;
margin-left: auto;
background-color: #66FF00;
}
#footer {
background-color: #FFFF00;
height: 128px;
width: 1024px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#container {
background-color: #FFFFFF;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#wrapper_main {
float: left;
width: 760px;
}
#sidebar_left {
float: left;
width: 264px;
background-color: #FFFFFF;
}
#sidebar_right {
float: right;
width: 264px;
background-color: #FFFFFF;
}
#contents {
float: right;
width: 496px;
background-color: #FFFFCC;}
ヘッダーとフッター、およびセンター区画に左右のサイドバーとメインコンテンツの3ペインを配置してある。ブラウザーで見ると以下のようになる。
みためぱっとしないが、まあ最初はこのようなものだ。
デザインラフにあわせて基本的な区画を配置してあるが、実際にはデザイン上の制約でもっと細かく区画を追加していくことになるだろう。これをらもとに、HTMLのコードと、CCSを追加してデザインラフのイメージ通りにページを作り上げていくことになる。
その４につづく。
Recent comments