Microsoft PowerPoint - baserCMS_workshop2.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - baserCMS_workshop2.ppt"

たみえはしかわ
7 years ago
Views:

1 ワークショップ2:テーマ導入とカスタマイズ ECWorks 滝下真玄 (MASA-P)

2 1

3 ほかのデザインを使いたいオリジナルデザインを作りたい 2

4 どうしたらいいの?? 3

5 ほかのデザインを使いたいテーマをダウンロードオリジナルデザインを作りたいオリジナルテーマの作成 4

6 テーマをダウンロード 5

7 テーマを適用ダウンロード今回は Ecology を適用してみる今回は勉強会ページからたどってもOK ダウンロードファイルの解凍一式をFTPを使ってアップロードインストールフォルダ/app/webroot/themed 内に設置 Ecology_2.0 ではなくその中の Ecology をアップロード 6

8 テーマを適用 7

9 テーマを適用 /app/webroot/ecology/pages フォルダ内のファイル全部に書き込み権限を与える 8

10 テーマを適用適用ボタンを押す 9

11 テーマを適用テーマが適用された! 10

12 テーマを適用 11

13 ダウンロードテーマを使う場合の注意点画像はすべて仮なので自分のサイト向けに作り直す必要がある同じ大きさの画像を用意する画像フォルダは一般的に /app/webroot/themed/(テーマ名)/img/ 内にある色味などを変えたい場合はCSSも修正するアイテムを増減させたい場合は /app/webroot/themed/(テーマ名)/pages/ 内のビューファイルや /app/webroot/themed/(テーマ名)/layouts/ 内のレイアウトファイルを変更する 12

14 それでは満足できない 13

15 14

16 オリジナルテーマをつくるしかない 15

17 ご注意ここからはコーダー寄りの少し難しい話になります今回はコピペすれば進めるように作ってありますが作業が難しいと感じたら見ていただくだけでもOKですコーダーの方は是非チャレンジしてみてくださいより詳しいやり方については今後の勉強会で 16

18 basercmsのビュー 17

19 basercmsのビューレイアウトページ(コンテンツ) エレメント 18

20 basercmsのビューレイアウト一番外側にあたるものでどのページでも表示される領域主にヘッダやフッタなどを記述するテーマの管轄エレメントビューテンプレート内で呼び出される領域複数のページで同じものを表示することができるテーマの管轄 19

21 basercmsのビューページ(コンテンツ) basercms管理画面のページ管理で編集できる領域またはブログの記事に当たる領域ファイルとして自動的に保存されるテーマの管轄ではない 20

22 basercmsのビューカスタムテーマを作る HTMLファイルを分割してレイアウトとエレメントを作り出す 21

23 テーマのフォルダ構造 CSS エレメント画像レイアウトページ (ページ管理で自動的に保存される) 22

24 早速オリジナルテーマをつくっていきましょう 23

25 素材今回のHTMLはトップページは大きなタイトル画像を持ち3ペインのレイアウトその他のページはタイトル画像が小さく2ペインのレイアウト bodyに Home があるかどうかでCSSを判定する (basercmsのapiにページ名を入手するものがあるのでそれを利用する) トップとその他のページは出来るだけタグやCSSクラスを共通化するようにデザインコーディング 24

26 素材 25

27 素材 26

28 ひな形の作成テーマ管理で demo をコピー demo_copy の編集を押しテーマ名の demo_copy を rest に変更ほかの情報もここで変更OK(今回は割愛) FTP等で /app/webreoot/themed/rest をダウンロード 27

29 ひな形を作成ここをクリックしてテーマを複製 28

30 ひな形を作成複製された 29

31 ひな形を作成 rest に変更 30

32 ひな形を作成 rest に変更 31

33 ファイルのコピー js img css の中身をダウンロードしたテンプレートの同じフォルダにコピーレイアウトのdefault.phpを default.php.old 等にしておく(後で消します) index.htmlを default.php に変更してlayoutsにコピーアップロードして更新してみましょう 32

34 ファイルのコピー 33

35 パスの書き換え default.phpを開き./css/./js/./img/ になっているところを /themed/rest/css/ /themed/rest/js/ /themed/rest/img/ に置換アップロードして更新してみましょう 34

36 htmlヘッダを書き換え <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>italian Restaurant BASER</title> <?php $bcbaser->charset()?> <?php $bcbaser->title()?> <?php $bcbaser->metadescription()?> <?php $bcbaser->metakeywords()?> 35

37 bodyタグを書き換え <body id="home"> <body id="<?php $bcbaser->contentsname()?>"> 36

38 ヘッダ部をエレメントに置き換える rest/elements/header.php の中を全部消去 beginheader endheaderをheader.phpに貼り付ける  (この中身を貼り付ける)  37

39 フッタ部をエレメントに置き換える beginfooter endfooterを下記に置き換える  <?php $bcbaser->header()?>  38

40 ヘッダ部をエレメントに置き換える rest/elements/footer.php の中を全部消去 beginfooter endfooterをfooter.phpに貼り付ける  (この中身を貼り付ける)  39

41 ヘッダ部をエレメントに置き換える beginheader endheaderを下記に置き換える  <?php $bcbaser->footer()?>  40

42 TwoColumn を sidebar エレメントにする rest/elements/sidebar.php の中を全部消去 begin TwoColumn end TwoColumnをsidebar.php に貼り付ける  (この中身を貼り付ける)  41

43 TwoColumn を sidebar エレメントにする中身を /rest/elements/sidebar.php にコピー元あった部分は取っておくと良い  <?php $bcbaser->element('sidebar');?>  42

44 サイドバー内のウィジェットエリアをウィジェットにする <div class= widget-area > </div> を丸ごと何処かに保存して下記タグを入れる <?php $bcbaser->element('widget_area',array('no'=> $widgetarea))?> 43

45 サイドバー内のウィジェットエリアをウィジェットにするウィジェット管理を開いて text で登録する <div class="widget-area"> の部分は消去する <div id="sidecontact"> <h2><img src="/themed/rest/img/head_side_contact.gif" alt="contact" /></h2> <div class="clearfix"> <img src="/themed/rest/img/img_contact.gif" alt="店内イメージ" class="floatleft-img" id="imgcontact" /> <img src="/themed/rest/img/logo_small.gif" width="119" height="30" alt="italian Restaurant Baser ロゴ" class="logo-small" /> <p>福岡県福岡市天神<br />TEL <br /></p> </div> <a href="./contact/index"><img src="/themed/rest/img/bnr_contact.jpg" alt="お問い合わせ" class="btn" id="bannercontact" /></a> </div> 44

46 ThreeColumn の部分を Homeの時だけ呼び出す  <?php if($bcbaser->istop()) :?> ここはおなじ <?php endif;?>  45

47 画像をTopとそれ以外用に振り分ける  <div id="imgmain"> <?php if($bcbaser->istop()) :?> <img src="/themed/rest/img/img_top_main.jpg" alt="italian Restaurant Baser メインイメージ" /> <?php else:?> <img src="/themed/rest/img/img_sub_main.jpg" alt="italian Restaurant Baser イメージ" /> <?php endif;?> </div>  46

48 ThreeColumn の改良ブログのリスト Ajax機能を貼り付けブログ名やAjaxのURLは場合によって変わるので注意  <?php if($bcbaser->istop()) :?> <div id="threecolumn"> (略) </div> <?php endif;?>  47

49 グローバルメニューの修正サイドバーとフッタ内にあるグローバルメニューをbaserCMSに合わせるグローバルメニューの調整が必要ですが割愛します sidebar.php <div id="twocolumn"> <div id="sideglobalmenu" class="side-box"> <h2><img src="/themed/rest/img/head_side_contents.gif" width="200" height="20" alt="contents" /></h2> <?php $bcbaser->element('global_menu')?> </div> <?php $bcbaser->element('widget_area',array('no'=>$widgetarea))?> </div> 48

50 グローバルメニューの修正 footer.php <div id="footer"> <div id="footerglobalmenu" class="clearfix"> <?php $bcbaser->element('global_menu')?> </div> <div id="copyright"> Copyright(C) 2010 Baser All rights Reserved. <a href=" target="_blank"><img src="/themed/rest/img/baser.power.gif" alt="basercms : Based Website Development Project" border="0" /></a> <a href=" target="_blank"><img src="/themed/rest/img/cake.power.gif" alt="cakephp(tm) : Rapid Development Framework" border="0" /></a> </div> </div> 49

51 ContentsBodyを置き換え ContentsBodyの部分を切り取り何処かに保存しておく切り取った部分を次のタグで置き換える  <div id="contentsbody"> <?php $bcbaser->content();?> </div>  50

52 ContentsBodyを置き換え切り取った部分を管理画面の固定ページ管理で index に適用編集画面のソースをクリックしてから適用する 51

53 テーマ完成 52

54 その他携帯やスマートフォン対応については同様にデザインを当てる必要がある管理機能を使わずにpagesを直接編集してもよいまた逆に管理画面だけでもできないことはないレンタルサーバ内で作ろうとすると外部に制作過程が見えてしまう可能性があるのでできればローカル環境でやった方がよい 53

55 お疲れ様でした 54

Microsoft PowerPoint - CakePHPforDesign.ppt

Microsoft PowerPoint - CakePHPforDesign.ppt デザイナー向けCakePHP 勉強会 1 CakePHPのデザイン周辺 ECWorks 滝下真玄 (MASA-P) http://www.ecworks.jp/ info@ecworks.jp @ecworks_masap 自己紹介 CakePHPのデザイン周辺 1 自己紹介 CakePHPのデザイン周辺 2 このセッションの着地点と内を編集すればCakePHPに