Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

concrete5 デザインカスタマイズ 基礎編

2,252 views

Published on

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

http://www.onside.com/Guest/Web/c5_kansai_user_group/20130907_a/

Published in: Design
  • Be the first to comment

concrete5 デザインカスタマイズ 基礎編

  1. 1. concrete5 関西ユーザーグループ 第21回勉強会 ケーキ屋さんのサイトを作ってみよう!- 基礎編 - 2013.09.07 design works onside inc.
  2. 2. 自己紹介 ÌC»1Ñ/ Shin'ichi Nakane
  3. 3. こんなアイコンを見かけたらヨロシク...
  4. 4. アジェンダ QïQ u £–o¤“z̃ »... 1. テーマのテンプレートとページタイプって? 2. エリアを設定してデザイン・レイアウトを実現しよう 3. これだけは覚えよう! - オートナビ & ページリスト 4. これは便利! - Manual Nav & Designer Content 5. カスタムテンプレートでデザインの実現を! åÒ¾éß É u |—¡” z∼O¶̃ »¡›œ |—¡ QïQ”m »...
  5. 5. ̃µ¶Ñ¾ç³¢›–Æ—¡
  6. 6. テーマのテンプレートファイルとページタイプって? concrete5 ”äßþv¢ÀåÒ¾ ÇÕÜþ¾ÖÁ³ũ¶qö wo¶”w ä ö ßçô¹ ¾ úßÔܾö ä ö ßçô¹¾ ”ö{»õ|z¶o Êo—¡w úßÔܾöw«ł› °vßflœo vØ... oq̃ —¢»ä ö ßçô¹¾ •fio–
  7. 7. デフォルトテーマ GREEK YOGURT の構成はどうなってるの? Greek Yogurt ”ä ö ßçô¹¾ »̃”øq•¶›–o—¡ ̃”q« ÈK¶”»...
  8. 8. これだけ! o¤›–Ó ö
  9. 9. GREEK YOGURT のページタイプはどうなってるの? Greek Yogurt ”úßÔܾö»̃”øq•¶›–o—¡ ä ö ßçô¹¾ m°£–Æ− ...
  10. 10. header.php footer.php » ƒ©§©”ô¹¾ •¾ Ë ßè|–o—¡ Àblog_header.php ›– ³›–−̇Á
  11. 11. ページのレイアウトとテンプレートファイル、ページタイプの関係 mz— ¾¼Áç ”94¶” エリア »Èo—¡ø à ¼“õ áË úßÔܾö ł|–x– ºº̃|o ¡ø„
  12. 12. úßÔܾö”î è ù ä ö ßçô¹¾ ù³œ∼•¡− ƒ”ô¹¾ wúßÔܾ ö•Qi©—¡ ƒ©ıł”þ » ¡̊–default.php wQi©—¡ fi—ß レイアウトwœ∼ エリアØœ∼ m© úßÔܾö³ozfi¢›–Ø default.php “¦ ZD¡−̃ w x—¡” ä ö ßçô¹¾ ³¢−Èowmß—£ µ
  13. 13. ページとページタイプ、テンプレートファイルの関係・その1 ̃”øq•úßÔܾö”î è ù œ∼ùÚ”ä ö ßçô¹¾ w¶o ¡̊– default.php wQi©—¡
  14. 14. ページとページタイプ、テンプレートファイルの関係・その2 ×s default.php “¦|vä ö ßçô¹¾ w¶z–Ø úßÔܾö³Ł1¡−̃ 5 fi”úßÔ•ƒ©§©Èq÷áÝß«(³Qi¡−̃ w x—¡ fi—ß ä ö ßçô¹¾ »mz— à ¼”Ë1³¡−“¦¶” 1fi”ä ö ßçô ¹¾ ØúßÔܾö”c“¦åÒ¾ ”¾¶›¤úßÔ³¢−̃ w x—¡ oq̃ à ¼›–̇...
  15. 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. 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. 17. ÷áÝß )•Ì ßï à ¼w2fi à ¼w1fi Ÿ¾ ”Ï ä â )•Ã ¼w2 fi ôáÜß )•»Ã ¼wŁ1©–o—£µ
  18. 18. エリアとは? à ¼ »õ áË” ‾w x−Qjh ¶Ã ¼”̃ ¡ Ì ßï à ¼ » ä ö ßçô¹¾ •l¡|–m© úßÔܾö•94¶zÚý| —¡ fi—ß Ì ßï à ¼³Qj¡− Ì ßï à ¼wŁ1|–m−¡̊–”ä ö ßç ô¹¾ ”úßÔ³Nò|—¡ ÕÜáËØœ∼øq•³°©–o−¡̊–”úßÔ³Nò|—¡w ̃«œ»ä ö ßçô¹ ¾ •»œB|–o—£µ
  19. 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. 20. Ì ßï Ã ¼wDreamweaver ”ライブラリ Ã ¼wDreamweaver ”編集可能領域• ¡−øq¶cw¡−...
  21. 21. これだけは覚えよう! - オートナビ & ページリスト オートナビ・ブロックとページリスト・ブロック åÒ¾ ÇÕÜþ¾Ö³¡−ö ̃”2fi”õ áË»wo ¡ Åßçéò̂õ áË»ƒ”ù” ß Šø éòÎßÓ ºð z¢ Õç³¢{ úßÔ Õç̂õ áË» Ѿç”&ËŽpº−éÑfi¶∙³ Õç=™ ¢{|–z©—¡ Greek Yogurt » Header Nav à ¼•Åßçéò̂õ áË õ Ì”Main à ¼•úßÔ Õç̂õ á˳Ł1|–o—¡
  22. 22. サンプルサイトのオートナビ・ブロック
  23. 23. ̃”3y wÅßçéò̂õ áË ¡
  24. 24. :‚» Åßçéò̂õ áË”Ł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— Ł
  25. 25. サンプルサイトのページリスト・ブロック
  26. 26. ^&Žp” Õç −é”Ñfi³Úý¡− Õç |–Ł1|–o—¡ ̃«œØѾ Õçß å½ Ëç /concrete/blocks/page_list/view.phpÒ³¢− ÑŠì¾ «(”Ł1z¦¶∙ẅv©–o—¡” Ñ̃’fi•¶›–z“o
  27. 27. これは便利! - Manual Nav & Designer Content MANUAL NAV & DESIGNER CONTENT アドオン ̃”2fi» Ô ”õ áË »¶zþßÍáçö ¾Õ”¼èÅ ¡
  28. 28. Åßçéò̂õ áË»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—¡
  29. 29. サンプルサイトの MANUAL NAV ブロック Ł1»̇...
  30. 30. ̃µ¶•+”(^-^)
  31. 31. DESIGNER CONTENT を使おう! Ô ”õ áË »³oı>w∙o “vœ o›–Å Ôé ”õ á˳¢−”»îßè w o ƒµ¶ x•Designer Content » ›–ØUfl̈ +”•Š¢”õ á˳¢{ x—¡ í|o³oz»̀l³̨Ö|–z“o ¼èÅ ÍDesigner ContentΔ³ozÀï© UflÁ
  32. 32. こんな感じのオリジナルブロックが作れます。
  33. 33. カスタムテンプレートでデザインの実現を! カスタムテンプレートを理解すればどんなデザインでも大丈夫? Ô ”õ á˳Ł1|¤“¦ » Ê›¤øq¶åÒ¾ •»¶ß—£µ ×s ß̋∙”Manual Nav Ł1|¤ôáÜßéòÎßÓ » Ł1|¤“¦“ ̃”øq• ¶ß—¡ ̃”õ áË•ÇÕÜŠä ö ßç³Ł1¡− ...
  34. 34. ̃”øq•åÒ¾ wQi©¤ôáÜßéòÎßÓ •¶ß—¡
  35. 35. Ô ”ôáÜßéòÎßÓ ÇÕÜŠä ö ßç³Ł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>
  36. 36. ÇÕÜŠä ö ßç³Ł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>
  37. 37. fi—ß ÕçÀ ul Á”ł0•Õܾ ³Qi£−¤Ł•nav ÜÌ −›–o−“¦ ¡ ̃”øq• Ô ”õ áË”Ïßè”>³gsÇÕÜþ¾Ö¡−̃ •ø›– Ê›¤øq¶ åÒ¾ ³ ‚£−”wÇÕÜŠä ö ßç ¡
  38. 38. カスタムテンプレートの作り方 ÇÕÜŠä ö ß糶•¡−”•» —¢concrete5 ”å½ Ëç ö{³¶•¡−Èow mß—¡ ∙”øq¶å½ Ëç ö{•¶›–o−”v¢–Æ—|łq
  39. 39. ¾ Õçß |¤å½ Ëç concrete å½ Ëç ”ö{wí–o−...
  40. 40. ¾ Õçß |¤å½ Ëç wユーザー領域 ̃”å½ Ëç •m−ô¹¾ w=ß© –ÊÆ7—©—¡ ¾ Õçß |¤å½ Ëç ”concrete å½ Ëç wシステム(コア)領域 ¡ oq̃ »...
  41. 41. ×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— ¡
  42. 42. t•ô¹¾ ”ÏóߺÇÕÜŠä ö ß產{³|¶o °vßflœo Êo—¡w ̃”ö{³¶•¡− ÇÕÜŠä ö ß產{»õ|z¶o ¡
  43. 43. 基礎編は、ココまで。 後半は、サンプルサイトを見ながら解説します。 @nipper_onside design works onside inc.

×