技術メモ詳細detail

はじめて?のCMS2

インストールが無事終わりましたが

このままでは、アイコン紹介しないといけないので?

オリジナルテーマを作成します。

 

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

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

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

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

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

cms2_1.png

このサイトが完成イメージです。

素人でなんとなく出来るもんですねw


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

 インストールフォルダー/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') ?>

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

レスポンシブデザインには、定番の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について解説します。

baserCMS   2013/12/29   muryoku

はじめて?のCMS2にコメントを書き込む

Loading...
 画像の文字を入力してください

SITE INFO

サイトロゴ

Welcome !!

夢力のページにようこそ
いらっしゃいました。

業務内容の紹介と技術的メモを
中心に掲載していく
予定にしております。

暖かい目でよろしく
お願いいたします。

9月 2021年10月 11月
     12
3456789
10111213141516
17181920212223
24252627282930
31

月別アーカイブ一覧



Copyright © Muryoku. All Rights Reserved.