エリアにする所も決めた。
じゃあいよいよテンプレートを作っていく。
任意のフォルダを作って、以下のような構成にした。
css、images、jsフォルダは、読んで字の如し。
elementsフォルダは、サイト全体に『共通パーツ』としてインクルードさせるエリアのファイルを格納する場所、と思ってもらえれば良い。ヘッダーとかフッターとか、全ページに共通する、あるいは特定のディレクトリに共通するエリアの事。
thumbnail.pngは、テンプレートをConcrete5にインストールした時に、ちょっとしたプレビュー（サムネイル）として表示されるものなので、作ったデザインを縮小して120*90pxのサイズで置いておこう。これは別に無くても大丈夫。
description.txtもインストールした時の説明文的な表示に使用される。
内容は
1行目にテンプレートの名前（任意）
2行目に説明
という簡単な形でOK。
例
株式会社架空商事テンプレート
これは株式会社架空商事のWEBサイト用のテンプレートです。
これだけで良い。
そしてこのファイルも別に無くても大丈夫。
※txtファイルも含め、作るファイルの文字コードは全てUTF-8で作る事。
ここまで揃ったらまずは作ったデザインを普通にHTMLとCSSで組んでいこう。
HTMLとCSSを組んだだけでは、テンプレートでは無いので、HTMLを組み終わるまでが下準備、と言えそうだ。
今回作るテンプレートは、架空の会社のコーポレートサイトだけど、先の拡張性を考えてHTML5で作る事にする。
テンプレートフォルダのルートにindex.htmlを作成してcssと必要なjsライブラリを置いてみる。
cssフォルダの中身
common.css（今回作るテンプレートデザインに必要なstyle）reset.css（html5の要素に対するリセット）
typography.css（記事ブロックエディター「TinyMCE」で使用される）
typography.cssを使うという記事ブロックエディター「TinyMCE」が何のことなのか分からないかも知れないけど、無いと後々困りそうなので空で良いので作っておこう。というか僕も今の時点では良く分かってない。
reset.cssはいろんな所から出てるんだけど
・はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』
http://www.html5-memo.com/first-html5/html5-002/
という記事に出てるものを使用する事にした。ヒトコトでリセットcssと言っても、それぞれ違いがあるし、これは自分の好みで選べば良いのかなと思っている。
jsフォルダの中身
html5shiv.min.js（html5のタグをIE8以下にも認識させる為のもの）respond.min.js（CSS3をIE8以下でも有効にする為のもの）
main.js（サイト内で何かjavascriptでやりたい事がある場合に一応用意）
html5shiv.js
http://code.google.com/p/html5shiv/
からzipをダウンロード。distディレクトリ内。
respond.min.js
https://github.com/scottjehl/Respond
からzipをダウンロード。distディレクトリ内。
html5shiv.jsとrespond.jsについては、必要不要論がいろんな所で議論されてるみたいで、深く突っ込んでいくと、WEBのあるべき姿として使うべきじゃないって話もあるみたい。
「html5shiv.jsを使うのをやめることにしました」
http://webamb.com/html5/1058.html
html5shiv.jsを使わないIEに対応したHTML5コーディング方法とは
http://2ndidea.com/html5/html5-coding-without-html5shiv/
上の記事を読んでて「確かに」と思う事も多くて、使わないで済むようにしたいんだけど、今回はそうゆう事を考えずにテンプレート作成に集中したい（言い訳）ので導入。
でも、多分上記の記事のように使わないで作るのが正しい気がする。使わないでも作れるんならそうした方が良い。うん、良いよね。
※html5shivを使う時の注意としてcssファイルの頭には
@charset "utf-8";
という訳でhtmlのhead内に各ファイルを読み込み。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
<meta name="description" content="ディスクリプション内容"/>
<meta name="keywords" content="キーワード" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/typography.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
こんな感じになった。
じゃあ作ったデザインをHTMLに組んでいく事にしよう。
というかこの記事でHTMLを組み終わる所までいこうと思ったけど、予想以上に長くなったのでそこは次回に。
自作テンプレートの道5 下準備3
自作テンプレートの道4 下準備2
自作テンプレートの道3 下準備1
自作テンプレートの道2 デザイン作成とテンプレート作成時の考え方
自作テンプレートの道1 ファイル構成
0 件のコメント:
コメントを投稿