デザイナー目線で concrete5 のテーマ作成・デザインカスタマイズについて解説した concrete5 関西ユーザーグループ 第21回勉強会での資料、基礎編。 文字が読みにくいのでこちらもご覧ください。 http://www.onside.com/Guest/Web/c5_kansai_user_group/20130907_a/

1. concrete5 関西ユーザーグループ 第21回勉強会
ケーキ屋さんのサイトを作ってみよう！- 基礎編 -
2013.09.07
design works onside inc.

2. 自己紹介
ÌC»1Ñ/ Shin'ichi Nakane

3. こんなアイコンを見かけたらヨロシク...

4. アジェンダ
QïQ u £–o¤“z̃ »...
1. テーマのテンプレートとページタイプって？
2. エリアを設定してデザイン・レイアウトを実現しよう
3. これだけは覚えよう！ - オートナビ & ページリスト
4. これは便利！ - Manual Nav & Designer Content
5. カスタムテンプレートでデザインの実現を！
åÒ¾éß É u |—¡” z∼O¶̃ »¡›œ |—¡
QïQ”m »...

5. ̃µ¶Ñ¾ç³¢›–Æ—¡

6. テーマのテンプレートファイルとページタイプって？
concrete5 ”äßþv¢ÀåÒ¾ ÇÕÜþ¾ÖÁ³ũ¶qö wo¶”w ä ö ßçô¹
¾ úßÔܾö
ä ö ßçô¹¾ ”ö{»õ|z¶o Êo—¡w úßÔܾöw«ł› °vßflœo
vØ...
oq̃ —¢»ä ö ßçô¹¾ •fio–

7. デフォルトテーマ GREEK YOGURT の構成はどうなってるの？
Greek Yogurt ”ä ö ßçô¹¾ »̃”øq•¶›–o—¡
̃”q« ÈK¶”»...

8. これだけ！
o¤›–Ó ö

9. GREEK YOGURT のページタイプはどうなってるの？
Greek Yogurt ”úßÔܾö»̃”øq•¶›–o—¡
ä ö ßçô¹¾ m°£–Æ− ...

10. header.php footer.php » ƒ©§©”ô¹¾ •¾ Ë ßè|–o—¡ Àblog_header.php
›– ³›–−̇Á

11. ページのレイアウトとテンプレートファイル、ページタイプの関係
mz— ¾¼Áç ”94¶” エリア »Èo—¡ø
à ¼“õ áË úßÔܾö ł|–x– ºº̃|o ¡ø„

12. úßÔܾö”î è ù ä ö ßçô¹¾ ù³œ∼•¡− ƒ”ô¹¾ wúßÔܾ
ö•Qi©—¡
ƒ©ıł”þ » ¡̊–default.php wQi©—¡
fi—ß レイアウトwœ∼ エリアØœ∼ m© úßÔܾö³ozfi¢›–Ø
default.php “¦ ZD¡−̃ w x—¡” ä ö ßçô¹¾ ³¢−Èowmß—£
µ

13. ページとページタイプ、テンプレートファイルの関係・その1
̃”øq•úßÔܾö”î è ù œ∼ùÚ”ä ö ßçô¹¾ w¶o ¡̊–
default.php wQi©—¡

14. ページとページタイプ、テンプレートファイルの関係・その2
×s default.php “¦|vä ö ßçô¹¾ w¶z–Ø úßÔܾö³Ł1¡−̃ 5
fi”úßÔ•ƒ©§©Èq÷áÝß«(³Qi¡−̃ w x—¡
fi—ß ä ö ßçô¹¾ »mz— à ¼”Ë1³¡−“¦¶” 1fi”ä ö ßçô
¹¾ ØúßÔܾö”c“¦åÒ¾ ”¾¶›¤úßÔ³¢−̃ w x—¡
oq̃ Ã ¼›–̇...

15. エリアを設定してデザイン・レイアウトを実現しよう
エリア設定ってどうなってるの？
default.php ”à ¼Ł1³¢–Æ− ...
÷áÝß ôáÜß”ô¹¾ ³ÊÆ7µ o—¡” «ł› °vß•zo...
<!--?php
defined('C5_EXECUTE') or die("Access Denied.");
$this--->inc('elements/header.php'); ?>
<div class="clear"></div>
<div id="main-content-container" class="grid_16">
<div id="main-content-inner">
<!--?php
$a = new Area('Main');
$a--->display($c);
?>
</div>
</div>
<div id="right-sidebar-container" class="grid_8">
<div id="right-sidebar-inner">
<!--?php
$a = new Area('Sidebar');
$a--->display($c);
?>
</div>
</div>
<!-- end sidebar -->
<!--?php $this--->inc('elements/footer.php'); ?>

16. ¾¼Áç à ¼ ”94³°vߺ¡z¡−¤Ł•ž—l¡|–Æ—¡
<!--start main container -->
<div id="main-container" class="container_24">
<div id="header">
<!--?php
$a = new GlobalArea('Site Name');
$a--->display();
?>
<!--?php
$a = new GlobalArea('Header Nav');
$a--->display();
?>
<div id="header-image">
<!--?php
$a = new Area('Header Image');
$a--->display($c);
?>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div id="main-content-container" class="grid_16">
<div id="main-content-inner">
<!--?php
$a = new Area('Main');
$a--->display($c);
?>
</div>

17. ÷áÝß )•Ì ßï à ¼w2fi à ¼w1fi Ÿ¾ ”Ï ä â )•Ã ¼w2
fi ôáÜß )•»Ã ¼wŁ1©–o—£µ

18. エリアとは？
à ¼ »õ áË” ‾w x−Qjh ¶Ã ¼”̃ ¡
Ì ßï à ¼ » ä ö ßçô¹¾ •l¡|–m© úßÔܾö•94¶zÚý|
—¡
fi—ß Ì ßï à ¼³Qj¡− Ì ßï à ¼wŁ1|–m−¡̊–”ä ö ßç
ô¹¾ ”úßÔ³Nò|—¡
ÕÜáËØœ∼øq•³°©–o−¡̊–”úßÔ³Nò|—¡w ̃«œ»ä ö ßçô¹
¾ •»œB|–o—£µ

19. Vœ ¡w ̃©›–Dreamweaver ”ä ö ßç•í–o−?
Ø«¬µ Dreamweaver ³³›¤̃ w¶o<•»°vœ¶o Êo—¡w åÒ¾éßµ»
Dreamweaver ³³›¤̃ ”m−<wIo” »̇
<!--start main container -->
<div id="main-container" class="container_24">
<div id="header" class="grid_24">
<!-- #BeginLibraryItem "/Library/Site Name.lbi" -->
<div>Site Name</div>
<!-- #EndLibraryItem -->
<!-- #BeginLibraryItem "/Library/Header Nav.lbi" -->
<div>Header Nav</div>
<!-- #EndLibraryItem -->
</div>
<!-- TemplateBeginIf cond="OptionalRegionClear1" -->
<div class="clear"></div>
<!-- TemplateEndIf -->
<!-- TemplateBeginEditable name="EditRegionHeaderImage" -->
<div id="main-content-inner2">
<p>Header Image</p>
</div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginIf cond="OptionalRegionClear2" -->
<div class="clear"></div>
<!-- TemplateEndIf -->
<div id="main-content-container" class="grid_16">
<!-- TemplateBeginEditable name="EditRegionMain" -->
<div id="main-content-inner3">

20. Ì ßï Ã ¼wDreamweaver ”ライブラリ Ã ¼wDreamweaver ”編集可能領域•
¡−øq¶cw¡−...

21. これだけは覚えよう！ - オートナビ & ページリスト
オートナビ・ブロックとページリスト・ブロック
åÒ¾ ÇÕÜþ¾Ö³¡−ö ̃”2fi”õ áË»wo ¡
Åßçéò̂õ áË»ƒ”ù” ß Šø éòÎßÓ ºð z¢ Õç³¢{ úßÔ
Õç̂õ áË» Ѿç”&ËŽpº−éÑfi¶∙³ Õç=™ ¢{|–z©—¡
Greek Yogurt » Header Nav à ¼•Åßçéò̂õ áË õ Ì”Main à ¼•úßÔ
Õç̂õ á˳Ł1|–o—¡

23. サンプルサイトのオートナビ・ブロック

24. ̃”3y wÅßçéò̂õ áË ¡

25. :‚» Åßçéò̂õ áË”Ł1« ”ºû»Œx—¡w
•Ł1z¦́wí|z̈v©–o—¡” ̨ •|–z“o
m Ѿ Õçß å½ Ëç /concrete/blocks/autonav/view.phpÒ³¢− ł Ł1z¦
ºÅöÓ ¶∙”ÏŸ çẅv©–o—¡” Ñ̃’fi•¶−̃ ³uÏŁ|—¡ À
PHP w°vœ¶z–Ø∙µ¶ÅöÓ wm−”v»°v− Êo—¡øÁ
Åßçéòõ áË”³oz
concrete5Åßçéòõ áË”³oz— Ł

26. サンプルサイトのページリスト・ブロック

27. ^&Žp” Õç −é”Ñfi³Úý¡− Õç |–Ł1|–o—¡
̃«œØѾ Õçß å½ Ëç /concrete/blocks/page_list/view.phpÒ³¢− ÑŠì¾
«(”Ł1z¦¶∙ẅv©–o—¡” Ñ̃’fi•¶›–z“o

28. これは便利！ - Manual Nav & Designer Content
MANUAL NAV & DESIGNER CONTENT アドオン
̃”2fi» Ô ”õ áË »¶zþßÍáçö ¾Õ”¼èÅ ¡

29. Åßçéò̂õ áË»Ufl¶” ¡w Ÿê™ß•Úý£¤z¶oúßÔwm›¤þ ºô
áÜß”éòÎßÓ ¶∙”þ » ÇÕÜŠ:z•ø−Ł1wÈo“›¤ßšk5³̈o¤
ß¡−Èowmß—¡w Manual Nav ³³s +”•Ł1 x—¡
ıÚ» lìõ áË• Õç=™ l¡|– ôáÜßéòÎßÓ ́³Ł1|–o¤”
¡w :»Manual Nav Ł1|–o—¡

30. サンプルサイトの MANUAL NAV ブロック
Ł1»̇...

31. ̃µ¶•+”(^-^)

32. DESIGNER CONTENT を使おう！
Ô ”õ áË »³oı>w∙o “vœ o›–Å Ôé ”õ á˳¢−”»îßè
w o
ƒµ¶ x•Designer Content » ›–ØUfl̈
+”•Š¢”õ á˳¢{ x—¡
í|o³oz»̀l³̨Ö|–z“o
¼èÅ ÍDesigner ContentΔ³ozÀï© UflÁ

33. こんな感じのオリジナルブロックが作れます。

35. カスタムテンプレートでデザインの実現を！
カスタムテンプレートを理解すればどんなデザインでも大丈夫？
Ô ”õ á˳Ł1|¤“¦ » Ê›¤øq¶åÒ¾ •»¶ß—£µ
×s ß̋∙”Manual Nav Ł1|¤ôáÜßéòÎßÓ » Ł1|¤“¦“ ̃”øq•
¶ß—¡
̃”õ áË•ÇÕÜŠä ö ßç³Ł1¡− ...

36. ̃”øq•åÒ¾ wQi©¤ôáÜßéòÎßÓ •¶ß—¡

37. Ô ”ôáÜßéòÎßÓ ÇÕÜŠä ö ßç³Ł1|¤ôáÜßéòÎßÓ ”Ï
ßè³̋̊–Æ—¡
Ô ”ôáÜßéòÎßÓ
<!--?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?-->
<ul>
<!--?php foreach ($links as $link):
$cssClasses = array();
if ($link--->isCurrent) {
$cssClasses[] = 'nav-selected';
}
if ($link->inPath) {
$cssClasses[] = 'nav-path-selected';
}
$cssClasses = implode(' ', $cssClasses);
?>
<li class="<?php echo $cssClasses; ?>">
<a href="<?php echo $link->url; ?>" class="<?php echo $cssClasses; ?> roll"><span data-title="
text, ENT_QUOTES, APP_CHARSET); ?>
">
<!--?php echo htmlentities($link--->text, ENT_QUOTES, APP_CHARSET); ?>
</span></a>

38. ÇÕÜŠä ö ßç³Ł1|¤ôáÜßéòÎßÓ
<!--?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?-->
<nav id="footer-navi" class="clearfix">
<ul>
<!--?php foreach ($links as $link):
$cssClasses = array();
if ($link--->isCurrent) {
$cssClasses[] = 'nav-selected';
}
if ($link->inPath) {
$cssClasses[] = 'nav-path-selected';
}
$cssClasses = implode(' ', $cssClasses);
?>
<li class="<?php echo $cssClasses; ?>">
<a href="<?php echo $link->url; ?>" class="<?php echo $cssClasses; ?> roll"><span data-title="
text, ENT_QUOTES, APP_CHARSET); ?>
">
<!--?php echo htmlentities($link--->text, ENT_QUOTES, APP_CHARSET); ?>
</span></a>
</li>

39. fi—ß ÕçÀ ul Á”ł0•Õܾ ³Qi£−¤Ł•nav ÜÌ −›–o−“¦ ¡
̃”øq• Ô ”õ áË”Ïßè”>³gsÇÕÜþ¾Ö¡−̃ •ø›– Ê›¤øq¶
åÒ¾ ³ ‚£−”wÇÕÜŠä ö ßç ¡

40. カスタムテンプレートの作り方
ÇÕÜŠä ö ß糶•¡−”•» —¢concrete5 ”å½ Ëç ö{³¶•¡−Èow
mß—¡
∙”øq¶å½ Ëç ö{•¶›–o−”v¢–Æ—|łq

41. ¾ Õçß |¤å½ Ëç concrete å½ Ëç ”ö{wí–o−...

42. ¾ Õçß |¤å½ Ëç wユーザー領域 ̃”å½ Ëç •m−ô¹¾ w=ß©
–ÊÆ7—©—¡
¾ Õçß |¤å½ Ëç ”concrete å½ Ëç wシステム（コア）領域 ¡
oq̃ »...

43. ×s Åßçéòõ áË”ÇÕÜŠä ö ßç³v¢¡−þ » Ѿ Õçß å½ Ë
ç /concrete/blocks/autonav/Ò”view.php ³Ñ¾ Õçß å½ Ëç
/blocks/autonav/templates/Ò•Ïóß|– ƒ”ô¹¾ ³ÇÕÜþ¾Ö|—¡
ô¹¾ ùwÇÕÜŠä ö ßç”ùÚ•¶ß—¡” Ì ßï Ÿê™ß”ÇÕÜŠä
ö ßç“ Ñ¾ Õçß å½ Ëç /blocks/autonav/templates/global_menu.phpÒØ|z
» Ѿ Õçß å½ Ëç /blocks/autonav/templates/global_menu/view.phpÒ”∙«œv
•¶ß—¡
Ñglobal_menu/view.phpÒ”þ » Ñglobal_menu/view.cssÒÑglobal_menu/view.jsÒ oqø
q• ÇÕÜŠä ö ßç³Ł1|¤õ áË•Õܾ ÓßçºJavaScript ³Qi x—
¡

44. t•ô¹¾ ”ÏóߺÇÕÜŠä ö ß產{³|¶o °vßflœo Êo—¡w
̃”ö{³¶•¡− ÇÕÜŠä ö ß產{»õ|z¶o ¡

45. 基礎編は、ココまで。
後半は、サンプルサイトを見ながら解説します。
@nipper_onside
design works onside inc.