html5のテンプレートをかんたんに取得できるInitializrを利用します。
http://initializr.com/
◆Initializrとは
HTML5サイトの土台を作ってくれる「Initializr」。
１からHTMLを作っていくのもいいですが、Initializrを使えばウィザード形式で進めると基本的なファイルをzipでダウンロード可能です。
基本HTMLを含むか、jQueryを含むか？の設定や、サーバ設定も含んだ形でパッケージ化が可能
via:http://phpspot.org/blog/archives/2011/02/html5initializr.html
◆手順
１．ダウンロード
initializr.comにアクセスする
「HTML & CSS」で「Initializr sample page」をクリックする
「Javascript」で「I want jQuery minified!」をクリックする
「Compatibility」で「Modernizr!」をクリックする
「Sever Configuration」で「No, thanks」をクリックする
「Download!」をクリックする
jverrecchia-initializr-1.0.zipファイルがダウンロードされます
この手順では展開してからアップロードを行います。
２．セットアップ
jverrecchia-initializr-1.0.zipを展開すると、cssフォルダ、jsフォルダと、ファビコン、index.html、TODO.txtが格納されています。
TODO.txtを開くと、修正すべき箇所が記載されています。
作成するページが英語ではない場合、htmlタグのlang属性を「en」から使用する言語に変更してください。
→日本語なので「ja」に修正
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
title, meta description, meta authorに適切なデータを記載してください。
→お好みで設定
<meta name="description" content="blog,php,mysql,CodeIgniter,html5">
<meta name="author" content="fk2000">
ファビコンを変更してください。
→toypark.inのファビコンを使用するのでそのまま
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
※同梱のファビコンファイルは削除
index.htmlから、script.jsでのjQueryテストおよび、「TODO.txt」へのリンクを削除してください。
→<script src="js/script.js"></script>の行を行ごと削除
→「TODO.txt」へのリンクを含む<p>タグはインフォメーションとして利用できるのでタグ内だけを削除
<p class="info"></p>
サーバーで404の設定をしているならば、404.htmlを用意してください。
→toypark.inの404.htmlを使用するので特に用意しない
３．サーバへの配置
サーバに配置する前に、viewsに格納したindexファイルから、cssフォルダ、jsフォルダを参照するためには、
CodeIgniterのカスタマイズが必要になります。
CodeIgniterのviewから CSS/画像/Java Script を分離する
http://d.hatena.ne.jp/hidde/20081118/1226977364
CodeIgniterのインストールディレクトリ（systemフォルダがある場所）にcssフォルダとjsフォルダ（中にlibsフォルダ）を作成する
作成したフォルダにそれぞれ、style.css、dd_belatedpng.js、jquery-1.4.4.min.js、modernizr-1.6.min.jsを格納する
※jsフォルダのscript.jsはjQueryがロードされるか確認するためのテスト用のため不要です。
system/application/config/autoload.phpを編集する
$autoload['helper'] = array();
↓
$autoload['helper'] = array('url', 'file');
※$config['base_url'] の内容を base_url() で呼び出せるようになる
cssファイルを指定する場合、下記のように記述できる
<link href="<?=base_url();?>css/default.css" type="text/css" rel="stylesheet" />
※画像やJava Scriptも同様に参照できるようになります
そして、index.htmlをindex.phpとして、system/application/viewsに格納する
カスタマイズのつづきは次回で。。
0 コメント:
コメントを投稿