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

2013.09.07

design works onside inc.

自己紹介

ÌC»1Ñ / Shin'ichi Nakane

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

アジェンダQïQ�u�\£–o¤“z�»...

1. テーマのテンプレートとページタイプって？

2. エリアを設定してデザイン・レイアウトを実現しよう

3. これだけは覚えよう！ - オートナビ & ページリスト

4. これは便利！ - Manual Nav & Designer Content

5. カスタムテンプレートでデザインの実現を！åÒ¾éß�É�u�|—¡”��z∼O¶�»¡›œ�|—¡�

QïQ”m�»...

µ¶Ñ¾ç³¢›–Æ—¡�

テーマのテンプレートファイルとページタイプって？concrete5 ”äßþv¢ÀåÒ¾�ÇÕÜþ¾ÖÁ³u¶qö�wo¶”w�ä�ö�ßçô¹

¾��úßÔܾö�

ä�ö�ßçô¹¾�”ö{»õ|z¶o�Êo—¡w�úßÔܾöw«ł›�°vßflœo

vØ...

�oq���—¢»ä�ö�ßçô¹¾�•fio–�

デフォルトテーマ GREEK YOGURT の構成はどうなってるの？

Greek Yogurt ”ä�ö�ßçô¹¾�»”øq•¶›–o—¡�

”q«�ÈK¶”»...

これだけ！

o¤›–Ó�ö��

GREEK YOGURT のページタイプはどうなってるの？

Greek Yogurt ”úßÔܾö»”øq•¶›–o—¡�

ä�ö�ßçô¹¾��m°£–Æ−�...

header.php � footer.php »�ƒ©§©”ô¹¾�•¾�Ë�ßè|–o—¡�Àblog_header.php

›–�³›–−Á

ページのレイアウトとテンプレートファイル、ページタイプの関係

mz—��¾¼Áç�”94¶”��エリア�»Èo—¡ø�

Ã�¼“õ�áË�úßÔܾö��ł|–x–�ºº|o�¡ø„�

úßÔܾö”î�è�ù�ä�ö�ßçô¹¾�ù³œ∼•¡−�ƒ”ô¹¾�wúßÔܾ

ö•Qi\©—¡�

ƒ©ıł”þ »�¡– default.php wQi\©—¡�

fi—ß�レイアウトwœ∼��エリアØœ∼�m©��úßÔܾö³ozfi¢›–Ø

default.php “¦�ZD¡−�w�x—¡”��ä�ö�ßçô¹¾�³¢−Èowmß—£

µ�

ページとページタイプ、テンプレートファイルの関係・その1

”øq•úßÔܾö”î�è�ù�œ∼ùÚ”ä�ö�ßçô¹¾�w¶o��¡–

default.php wQi\©—¡�

ページとページタイプ、テンプレートファイルの関係・その2

×s� default.php “¦|vä�ö�ßçô¹¾�w¶z–Ø�úßÔܾö³Ł1¡−��5

fi”úßÔ•ƒ©§©Èq÷áÝß«(³Qi¡−�w�x—¡�

fi—ß�ä�ö�ßçô¹¾�»mz—�Ã�¼”Ë1³¡−“¦¶”��1fi”ä�ö�ßçô

¹¾��ØúßÔܾö”c“¦åÒ¾�”¾¶›¤úßÔ³¢−�w�x—¡�

�oq���Ã�¼›–...

エリアを設定してデザイン・レイアウトを実現しようエリア設定ってどうなってるの？

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'); ?>

�¾¼Áç�Ã�¼�”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>

</div>

÷áÝß�)•Ì�ßï�Ã�¼w2fi�Ã�¼w1fi�Ÿ¾�”Ï�ä�â�)•Ã�¼w2

fi�ôáÜß�)•»Ã�¼wŁ1\©–o—£µ�

エリアとは？

Ã�¼�»õ�áË”�‾w�x−Qjh�¶Ã�¼”��¡�

Ì�ßï�Ã�¼�»�ä�ö�ßçô¹¾�•l¡|–m©�úßÔܾö•94¶zÚý|

—¡�

fi—ß�Ì�ßï�Ã�¼³Qj¡−�Ì�ßï�Ã�¼wŁ1|–m−¡–”ä�ö�ßç

ô¹¾�”úßÔ³Nò|—¡�

ÕÜáËØœ∼øq•³°©–o−¡–”úßÔ³Nò|—¡w�«œ»ä�ö�ßçô¹

¾�•»œB|–o—£µ�

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">

<p>Main</p>

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

これだけは覚えよう！ - オートナビ & ページリストオートナビ・ブロックとページリスト・ブロック

åÒ¾�ÇÕÜþ¾Ö³¡−ö��”2fi”õ�áË»wo�¡�

Åßçéòõ�áË»ƒ”ù”�ß�Šø�éòÎßÓ��ºð�z¢�Õç³¢{�úßÔ

�Õçõ�áË»�Ѿç”&ËŽpº−éÑfi¶∙³�Õç=™�¢{|–z©—¡�

Greek Yogurt �»�Header Nav Ã�¼•Åßçéòõ�áË�õ�Ì” Main Ã�¼•úßÔ

�Õçõ�á˳Ł1|–o—¡�

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

”3y�wÅßçéòõ�áË�¡�

:‚»�Åßçéòõ�áË”Ł1«�”ºû»Œx—¡w�

•Ł1z¦wí|zv©–o—¡”���•|–z“\o�

m��Ѿ�Õçß�å½�Ëç�/concrete/blocks/autonav/view.phpÒ³¢−��ł�Ł1z¦

ºÅöÓ��¶∙”ÏŸ�çwv©–o—¡”��Ñ’fi•¶−�³uÏŁ|—¡�À

PHP w°vœ¶z–Ø∙µ¶ÅöÓ��wm−”v»°v−�Êo—¡øÁ

Åßçéòõ�áË”³oz

concrete5Åßçéòõ�áË”³oz—�Ł

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

^&Žp”�Õç�−é”Ñfi³Úý¡−�Õç�|–Ł1|–o—¡�

«œØѾ�Õçß�å½�Ëç�/concrete/blocks/page_list/view.phpÒ³¢−�ÑŠì¾�

«(”Ł1z¦¶∙wv©–o—¡”��Ñ’fi•¶›–z“\o�

これは便利！ - Manual Nav & Designer ContentMANUAL NAV & DESIGNER CONTENT アドオン

”2fi»�Ô�”õ�áË�»¶zþßÍáçö�¾Õ”¼èÅ��¡�

Åßçéòõ�áË»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—¡�

サンプルサイトの MANUAL NAV ブロック

Ł1»...

µ¶•+” (^-^)

DESIGNER CONTENT を使おう！

Ô�”õ�áË�»³oı>w∙o�“vœ�o›–Å�Ôé�”õ�á˳¢−”»îßè�

w�o�

ƒµ¶�x• Designer Content »�›–ØUfl

+”•Š¢”õ�á˳¢{�x—¡�

í|o³oz»l³Ö|–z“\o�

¼èÅ�ÍDesigner ContentΔ³ozÀï©�UflÁ

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

カスタムテンプレートでデザインの実現を！カスタムテンプレートを理解すればどんなデザインでも大丈夫？

Ô�”õ�á˳Ł1|¤“¦�»�Ê›¤øq¶åÒ¾�•»¶ß—£µ�

×s�ß∙” Manual Nav �Ł1|¤ôáÜßéòÎßÓ��»�Ł1|¤“¦“�”øq•

¶ß—¡�

”õ�áË•ÇÕÜŠä�ö�ßç³Ł1¡−�...

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

Ô�”ôáÜßéòÎßÓ���ÇÕÜŠä�ö�ßç³Ł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>

</li>

ÇÕÜŠä�ö�ßç³Ł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>

<!--?php endforeach; ?-->

fi—ß��ÕçÀ ul Á”ł0•Õܾ�³Qi\£−¤Ł• nav ÜÌ�−›–o−“¦�¡�

”øq•�Ô�”õ�áË”Ïßè”>³gsÇÕÜþ¾Ö¡−�•ø›–�Ê›¤øq¶

åÒ¾�³�‚\£−”wÇÕÜŠä�ö�ßç�¡�

カスタムテンプレートの作り方

ÇÕÜŠä�ö�ß糶•¡−”•»�—¢ concrete5 ”å½�Ëç�ö{³¶•¡−Èow

mß—¡�

∙”øq¶å½�Ëç�ö{•¶›–o−”v¢–Æ—|łq�

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

¾�Õçß�|¤å½�Ëç�wユーザー領域��”å½�Ëç�•m−ô¹¾�w=ß\©

–ÊÆ7—©—¡�

¾�Õçß�|¤å½�Ëç�” concrete å½�Ëç�wシステム（コア）領域�¡�

�oq�»...

×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—

¡�

�t•ô¹¾�”ÏóߺÇÕÜŠä�ö�ß產{³|¶o�°vßflœo�Êo—¡w�

”ö{³¶•¡−�ÇÕÜŠä�ö�ß產{»õ|z¶o�¡�

基礎編は、ココまで。後半は、サンプルサイトを見ながら解説します。

@nipper_onside

design works onside inc.