concrete5バージョン8リリースパーティ「テーマを作ろう」
•
1 like•406 views
2016.4.23 concrete5バージョン8リリースパーティでの、「テーマを作ろう」 発表スライド
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to concrete5バージョン8リリースパーティ「テーマを作ろう」
Similar to concrete5バージョン8リリースパーティ「テーマを作ろう」 (20)
Recently uploaded
Recently uploaded (11)
concrete5バージョン8リリースパーティ「テーマを作ろう」
- 1. 作るだけなら怖くない！ concrete5でテーマを作ってみよう！ 田原遊馬（タハラユウマ） 株式会社クロスキューブ 取締役 / アートディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear ノンプログラマでもできる気がする！すごく荒っぽいテーマの作り方 2016.4.23 concrete5 バージョン8リリースパーティ（東京）
- 2. 田原遊馬（たはらゆうま） 株式会社クロスキューブ 取締役 / アートディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear concrete5などのCMS案件を中心にお仕事してます。 concrete5 / WordPress / EC-CUBE / PHP / JavaScript / HTML / CSS / DTP & WEB Design and more!!
- 10. なかなかできる子。
- 18. 基本となるテンプレート一式をまとめる • hoge.html（さっき作った） • 「css」ディレクトリ • 「js」ディレクトリ • 「fonts」ディレクトリ
- 19. HTMLファイルの名前を 「default.php」に変更し、 １行目に「コンクリ以外のアクセスはダメ！ゼッタイ！」 という意味のおまじない を入れる。 <?php defined('C5_EXECUTE') or die("Access Denied."); ?>
- 22. page_theme.phpの編集 テーマの名前、説明文の書き換えを適宜行います。 return t( Elemental )をreturn t( 練習テーマ ) return t( 長い英文 )をreturn t( 練習用ですよ！ ) とすると、「練習用ですよ！」という説明文の「練習テーマ」になり ます。
- 25. コンクリ用の必須ファイルの読み込み HTMLの をごっそり に置き換え。 BODY最下部のJSたちのBootstrap以外を に置き換え <meta keywords= > <meta description= > <title> <?php Loader::element('header_required'); ?> <?php Loader::element('footer_required'); ?>
- 27. CSSやJSのパスを合わせるおまじない 読み込むCSSやJSまでのパスを テーマフォルダまでのパスを出力してくれるおまじないを使って 書き換え。 例：CSSが「テーマフォルダ/css/style.css」にいる場合 <?php echo $this->getThemePath(); ?> <link href="<?php echo $this->getThemePath(); ?>/css/bootstrap.min.css" rel="stylesheet">
- 28. 今度こそいい感じ！
- 30. 魔法のDIVで囲めばOK <body>の中、<script>以外のものををまとめて の中に入れてしまいましょう。 <div class="<?php echo $c->getPageWrapperClass()?> c5wrap > 中身 </div>
- 32. ページ固有のエリアを設定したい いわゆるコンテンツ部分を以下と置き換えてしまいます。 同じ要領で、複数のエリアも、new Area('Main')をnew Area( エリアの名前')としてやれば可能です。 <?php $a = new Area('Main'); $a->display($c); ?>
- 33. ページ共通のエリアを設定したい ナビゲーションなど、共通して使うエリアの設定は以下 固有のエリア設定同様、複数設定できます。 <?php $a = new GlobalArea('Header Navigation'); $a->display(); ?>
- 35. 一番シンプルなテーマを作る方法 • HTML・CSS・JSなど通常の静的ページのデータを用意する。 • page_theme.phpを用意する。 • HTMLの冒頭におまじないを記述し、default.phpとする。 • コンクリ用のヘッダ・フッタを読み込ませるコードを入れる。 • おまじないを使って、CSSやJSのパスを合わせる。 • コンクリ用の魔法のDIVタグを入れる。 • 適宜エリアを設定する。 • いい感じにスクリーンショットを撮影し、360px*270pxの thumbnail.pngを作る。
- 36. よりいい感じにするには • 右サイドバーや、左サイドバーのテンプレートを作る。 • テンプレートで使い回すヘッダなどのパーツを分割する。 • Bootstrapを使いこなし、オリジナリティ れるデザインにする。 • コンクリ内蔵のlessコンパイラを使えるようにする。 • cssを部分的に管理画面から書き換えられるようにする。 • 勢い余ってブロックの作り方を覚える。 • さらに勢い余って、パッケージ化し、バージョン管理をする。 など・・・
- 39. ご清聴ありがとうございました