インストールが無事終わりましたが
このままでは、アイコン紹介しないといけないので?
オリジナルテーマを作成します。
せっかくなので、レスポンシブなデザインにします。
スマホ用に別途用意するのも面倒なだけですが(笑)
一番簡単なやり方は、既存のテーマーをコピーして
必要な箇所を修正するやり方です。
スケルトンが一番解りやすいと思います
まずは、フォルダー構成を見てみます。
インストールフォルダー/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->func() ?>BcBaser->footer() ?>BcBaser->flash() ?> BcBaser->content() ?> BcBaser->element('contents_navi') ?>BcBaser->widgetArea() ?>
男の勘でも何とかなりそうなソースですね?
<?php $this->BcBaser->css('style') ?>
ここでスタイルシートを指定してます。
レスポンシブデザインには、定番のbootstrap3を使います。
なので、
<?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が使えるようになりました(^o^yもう出来たも同然です(嘘)
さてレイアウトを考えます。
ヘッダー |
|
メインコンテンツ |
サブコンテンツ |
フッター |
スタイルは後から考えるのでレイアウトを作ります。
BcBaser->content() ?>
こんな感じでひとまず、レイアウトは出来ました。
もう完成したも同然・・・・・・・(嘘)
長くなったので次に続きます。
次回は、レイアウトの中身の指定ですがその前に
軽くbootstrap3について解説します。