concrete5 のブロックを自分が好きなような HTML や設定で出力できるようにカスタマイズするのが、カスタムテンプレートです。 今回はカスタムテンプレートの使い方、作り方を簡単に紹介しました。 ■ サンプルデータダウンロード http://bit.ly/c57_ustream_ct_seminar ■ 【完全保存版】 concrete5.7.x テーマスニペット集 http://ja.katzueno.com/2015/08/3492/

1. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
第9回
ブロックの作り方
カスタムテンプレートを極める
2015/8/27 (木)
concrete5 Ustream 勉強会
シーズン4

2. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
自己紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com

3. 2014.9.28 (日) CMS の1つ、concrete5 のわかりやすい紹介
concrete5
日本語版とコミュニティを
2009年に立ち上げました
concrete5-japan.org

4. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
コンなご
concrete5 名古屋 ユーザーグループ

5. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
書籍の紹介
「concrete5 公式活用ガイド
ブック」
買ってねー。
今日の内容の詳しくは
この本からです！

6. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
本日のアジェンダ
カスタムテンプレート
カスタムテンプレートの基本
カスタムテンプレートを使ってみよう
カスタムテンプレートを作ってみよう
YouTube ブロック
オートナビ：リンクリスト
ページリスト
お知らせ

7. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
おことわり
今日のセッションは HTML や CSS で
サイトコーディング出来る人向けです。
でも、出来る限りわかりやすく
説明できるよう頑張ります。

8. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
テーマ・コード集
【完全保存版】 concrete5.7.x テーマスニペット集
http://ja.katzueno.com/2015/08/3492/

9. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
サンプルファイル・ダウンロード
ZIPファイルダウンロードリンク
http://bit.ly/c57_ustream_ct_seminar
ZIPファイルを解凍
MAMP や XAMPP の作業ディレクトリに
解凍

10. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
配布データの確認
勉強会参加者専用データの説明
“c5ngo_sql.zip”を phpmyadmin などで
インポート
http://localhost/c5ngo/index.php/login
設定によっては
http://localhost:8088/c5ngo/index.php/login
ID: admin
Pass: 123456

11. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
サンプルファイルの構成
/mockup
HTML コーディングファイル
/c5ngo/application/themes/olive_sample
concrete5 サンプルデータ

12. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
サンプルファイルの構成
本のサンプルデータ
/answers/application/blocks/
実は、ここに答えが・・・

13. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
さーてやりましょう

14. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレートについて
簡単に言うと
ブロックで出力される HTML を変えます

15. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレート使い方
というか実践してみましょう！
サンプルサイトを開いてください
カスタムテンプレートが適用されていない
デモサイトを用意しました

16. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレート使い方
というか実践してみましょう！
サンプルサイトを開いてください (見比べ)
localhost
本のサンプルサイト
カスタムテンプレートが適用されていない
デモサイトを用意しました

17. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレート使い方
パンくずのオートナビを適用してみよう
メニューページに
編集モードに
ブロックをクリック
カスタムテンプレートをクリック
「Breadcrumb」を選択

18. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレート使い方
パンくずのオートナビを適用してみよう
ファイルを見てみよう
/c5ngo/application/blocks/autonav/
「templates」というフォルダが有ります
その中に PHP ファイルが有ります

19. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレートとは
ブロックの view.php のコードを
自分の好きなように出力するように書き換えたもの
主な目的例
CSS クラスを変えたい
ページリスト、オートナビなどで別の追加情報
（ページ属性等）を出したい

20. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレートとは
実践：YouTubeブロックの view.php を書き
換えよう！
トップページのカレーの動画
サイズを変えてみよう

21. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレートとは
実践：ページリスト：お知らせ
最終的なサンプルを参考に
出力される CSS を変えてみよう

22. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
ページリストの view.php の説明
実際のコードを見て説明します。
PHPコードがありますが、アレルギー無く
聞いてください。

23. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
ページリストの view.php の説明
恐れることはない！
<?php foreach ($pages as $page):
と
<?php endforeach; ?>
の間が繰り返される
と覚えるだけ！

24. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
ページリストの view.php の説明
恐れることはない！
あとは、実践でお教えします
時間があったらあとで解説します

25. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
カスタムテンプレートとは
時間余ったかな？
オートナビ
ページリストのコードの説明

26. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
おわり：おつカレー

27. 2015.8.27 (土) 第9回 「カスタムテンプレートを極める」 Ustream 勉強会シーズン4
紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com