せっかくなので、レスポンシブなデザインにします。

スマホ用に別途用意するのも面倒なだけですが（笑）

一番簡単なやり方は、既存のテーマーをコピーして

必要な箇所を修正するやり方です。

スケルトンが一番解りやすいと思います

まずは、フォルダー構成を見てみます。

 インストールフォルダー/app/webroot/theme/テーマ名

にテーマが格納されるのでこの中のファイルをごにょごにょすれば

出来るはずです。。。。たぶん

メインのフレーム構成は、Layoutsの下のdefault.phpに記述されています。

スケルトンのテーマを見ると以下のようになってます。

BcBaser->xmlHeader() ?>
BcBaser->docType() ?>


BcBaser->charset() ?>
BcBaser->title() ?>
BcBaser->metaDescription() ?>
BcBaser->metaKeywords() ?>
BcBaser->icon() ?>
BcBaser->rss('ニュースリリース RSS 2.0', '/news/index.rss') ?>
BcBaser->css('style') ?>
BcBaser->js(array(
	'admin/jquery-1.7.2.min',
	'admin/functions')) ?>
BcBaser->scripts() ?>
BcBaser->element('google_analytics') ?>





	BcBaser->header() ?>
	
	

	
		

			

				BcBaser->flash() ?>
				BcBaser->content() ?>
				BcBaser->element('contents_navi') ?>
			
		

		

			BcBaser->widgetArea() ?>
		
		
	

	
 このページの先頭へ戻る 
	
	BcBaser->footer() ?>
	


BcBaser->func() ?>

男の勘でも何とかなりそうなソースですね？

<?php $this->BcBaser->css('style') ?>

ここでスタイルシートを指定してます。

レスポンシブデザインには、定番のbootstrap３を使います。

なので、

<?php $this->BcBaser->css(array('style','bootstrap.min','font-awesome.min')) ?>

こんな感じに変更します。

<?php $this->BcBaser->js(array(
    'admin/jquery-1.7.2.min',
    'admin/functions')) ?>
JavaScriptはここで指定してみたいですね

<?php $this->BcBaser->js(array('jquery-1.8.2.min','bootstrap.min','myCom')) ?>

こんな感じで変更します。

注： インストールフォルダー/app/webroot/theme/テーマ名/js

インストールフォルダー/app/webroot/theme/テーマ名/css

の下に必要なファイルをコピーしておく必要があります。

bootstrapのアイコンを使う為には、/app/webroot/theme/テーマ名/に

fontsフォルダーを作成して必要なフォントを入れておく必要があります。

bootstrap2までは、pngファイルでアイコン表示してましたが

bootstrap3からは、フォントで表示してるので忘れがちです。

これで、bootstrapが使えるようになりました（＾ｏ＾ｙもう出来たも同然です（嘘）

さてレイアウトを考えます。

スタイルは後から考えるのでレイアウトを作ります。

    

    
    




　　


　　　　

　　　　BcBaser->content() ?>

　　

　　


　　　　

　　




　　

　　
　　

こんな感じでひとまず、レイアウトは出来ました。

もう完成したも同然・・・・・・・（嘘）

長くなったので次に続きます。

次回は、レイアウトの中身の指定ですがその前に

軽くbootstrap3について解説します。