狠狠撸

狠狠撸Share a Scribd company logo
第1回 多摩con活
テーマ作成
「concrete5 は PortlandLabs および、
コンクリートファイブジャパン株式会社の登録商標です」
基本的には公式ガイドブックの手順を踏襲します。
(4章オリジナルサイトのデザインを作る)
この他、日本語公式サイトに掲載されている
「テーマの仕組みとデザインの仕方」
http://concrete5-japan.org/help/design/
には、動画などを用いて、
テーマ作成手順などが掲載されています。
テーマ作成の流れ
concrete5の管理画面
->システムと設定
->キャッシュとスピード設定
と遷移し、?
キャッシュをオフにします。
テーマ作成の準備(1/4)
作業用ディレクトリを用意します。
テーマ作成の準備(2/4)
generation
?┣?css
?┣?elements
?┣?images
?┗?js
作業用ディレクトリを用意します。
テーマ作成の準備(2/4)
generation
?┣?css
?┣?elements
?┣?images
?┗?js
テーマ作成後、
concrete5の設置ディレクトリ直下にある
themesディレクトリ配下にコピーしますので、
この段階では、どこに作成しても大丈夫です。
テーマ作成の準備(3/4)
テーマに必要なファイルを用意します。
cssとjsファイルを用意します。
今回は、公式ガイドブックのサンプルサイトデータを借用します。
generation
?┣?css
?┣?elements
?┣?images
?┣?is
?┣?main.css
?┗?main.js
https://github.com/concrete5japan/concrete5_japanese_book
管理画面で必要となるファイルを用意します。
generation
?┣?css
?┣?elements
?┣?images
?┣?is
?┣?main.css
?┣?main.js
?┣?description.txt
?┗?thumbnail.png
テーマ作成の準備(4/4)
管理画面で必要となるファイルを用意します。
generation
?┣?css
?┣?elements
?┣?images
?┣?is
?┣?main.css
?┣?main.js
?┣?description.txt
?┗?thumbnail.png
テーマ作成の準備(4/4)
description.txt
1行目:テーマ名
2行目:テーマの説明文
文字コードはUTF?8
改行はLF
で保存
管理画面で必要となるファイルを用意します。
generation
?┣?css
?┣?elements
?┣?images
?┣?is
?┣?main.css
?┣?main.js
?┣?description.txt
?┗?thumbnail.png
テーマ作成の準備(4/4) thumbnail.png
横120px
縦90px
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
ヘッダーエリア
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
メインエリア
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
テーマ作成?はじめの一歩
concrete5のテーマはページタイプが基本
ページタイプとは???
ページのレイアウト構造
フッターエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
ヘッダーエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
メインエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
フッターエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
ヘッダーエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
メインエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
フッターエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
ヘッダーエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
メインエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
フッターエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
全部一緒
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
メインエリア
メインエリア
メインエリア
メインエリア
home.php default.php
対象とするサイトのデザインを確認
テーマ作成?はじめの一歩
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
フッターエリア
フッターエリア
フッターエリア
フッターエリア
ヘッダーエリア ヘッダーエリア ヘッダーエリア ヘッダーエリア
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
フッターエリア
フッターエリア
フッターエリア
フッターエリア
ヘッダーエリア ヘッダーエリア ヘッダーエリア ヘッダーエリア
共通部品
テーマ作成?はじめの一歩
対象とするサイトのデザインを確認
フッターエリア
フッターエリア
フッターエリア
フッターエリア
ヘッダーエリア ヘッダーエリア ヘッダーエリア ヘッダーエリア
element(s)
作業用ディレクトリを用意します。
テーマ作成の準備(2/4)
generation
?┣?css
?┣?elements
?┣?images
?┗?js
テーマ作成?共通部品(header.php)
部品となるheader.phpを元のhtmlから作ります。
index.html
header.php
index.html
header.php
先頭に
<?php de?ned('C5_EXECUTE') or die("Access Denied."); ?>
を記述する。
index.html
header.php
index.html
header.php
<html>に
lang="<?php echo LANGUAGE?>”>
を追記する。
index.html
header.php
index.html
header.php
metaタグやtitleタグなど、head部の主要タグを削除し、
<?php Loader::element('header_required'); ?>?
を追記する。
index.html
header.php
index.html
header.php
スタイルシートの参照パスに
<?php echo $this->getThemePath(); ?>
を追記する。
index.html
header.php
元のhtmlが参照していた、外部スタイルシートファイルは、
作業ディレクトリ内に配置しておきます。
テーマ作成?共通部品(header.php)
部品となるheader.phpを元のhtmlから作ります。
header.php
header.php
サイト名称やナビゲーション部分を書き換える。
共通部品なので、
<?php
$a = new GlobalArea('Site Name');
$a->display();
?>
テーマ作成?共通部品(header.php)
部品の名称をheader.phpとして
elementsディレクトリに保存します。
テーマ作成?共通部品(footer.php)
部品となるfooter.phpを元のhtmlから作ります。
footer.php
footer.php
先頭に
<?php de?ned('C5_EXECUTE') or die("Access Denied."); ?>
を記述する。
footer.php
footer.php
フッター部分を書き換える。
共通部品なので、
<?php
$a = new GlobalArea('Footer');
$a->display();
?>
footer.php
footer.php
</body>の直前に
<?php Loader::element('footer_required'); ?>
を記述する。
テーマ作成?共通部品(footer.php)
部品の名称をfooter.phpとして
elementsディレクトリに保存します。
テーマ作成?テーマ本体(default.php)
default.phpとは、
ページタイプに一致するハンドルが見つからない
場合に使用される、標準テンプレート
テーマ作成?テーマ本体(default.php)
default.phpとは、
ページタイプに一致するハンドルが見つからない
場合に使用される、標準テンプレート
default.php
default.php
先頭に
<?php de?ned('C5_EXECUTE') or die("Access Denied."); ?>
を記述する。
default.php
default.php
先ほど、作成した部品が呼び出されています。
default.php
default.php
メインエリアに成りそうな記述があります。
<?php
$a = new Area('Main');
$a->display($c);
?>
テーマ作成?テーマ本体(home.php)
home.phpとは、
サイトのトップページで使われる、
専用のテンプレート
テーマ作成?テーマ本体(home.php)
home.phpとは、
サイトのトップページで使われる、
専用のテンプレート
ただし、弊社のサイトでは、トップページも
下層ページと同じレイアウト構成の為、
default.phpをコピーして
ファイル名をhome.phpとしました。
テーマ作成?テーマ本体(view.php)
view.phpとは、
サイト閲覧者に参照される事は原則なく、
ログイン画面、存在しないURLへのアクセス時に
適用されるテンプレートファイル
テーマ作成?テーマのインストール
作成したテーマフォルダを
concrete5をインストールした直下の
themesフォルダに配置し、管理画面のテーマから
テーマのインストールを行う。

More Related Content

concrete5 勉強会 20150117_テーマ作成