concrete5のオリジナルテーマの作成準備

オリジナルのテーマを作成する方法を説明します。

オリジナルテーマの作成方法はhtmlやCSSの知識があればとても簡単です。ファイル名こそphpとなっていますが、中身はhtmlの記述になっているところがほとんどなので、どこをどう触ったらどうなるかわかりやすいと思います。
僕自身、phpなどわかりません。なんとなく雰囲気で書いてあることがわかるところもある程度の知識です。それでも自分のイメージしたデザインのオリジナルテーマを作ることができます。
怖がらずに一歩踏み出しましょう☆

オリジナルテーマを作成するにあたって

concrete5はひとつのサイトにいくつものテーマを読み込み、表示することができます。
トップページのみ違うデザイン、企業グループでドメインを取り各会社・各支店ページで違うデザイン、メインとなるコンテンツページのみ違うデザインなど、いろいろな事ができます。
あれこれやり過ぎると管理が大変になりますが、そういったところはちゃんと計算をした上で行ないましょう。

手順は以下のような感じになります。

  • ◆ デザインを作成
    ↓
  • ◆ デザインをhtmlで制作
    ↓
  • ◆ オリジナルテーマを制作

オリジナルテーマはのファイルはこちら
以下ではこのファイルを作成する手順を載せてあります。

オリジナルテーマのデザインの作成

今回のここでのデザインは横幅800px、左側にメニューを170pxで、ページの内容が書かれるコンテンツ部分を600pxでシンプルな感じのもので作成しました。イメージは以下

オリジナルテーマのデモデザイン

そしてテーマとして作成する部分は以下のイメージ内の赤線で囲ってある部分になります。

デモ用オリジナルテーマの作成範囲

オリジナルテーマのデザインをhtmlで作成

オリジナルテーマをhtmlで作成をします。
作成をしたソースコードは以下になります。
ソースコードは簡単なものにしてあります。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  6. <meta http-equiv="Content-Style-Type" content="text/css" />
  7. <meta http-equiv="Imagetoolbar" content="no" />
  8. <meta name="description" content="" />
  9. <meta name="keywords" content="" />
  10. <meta name="copyright" content="" />
  11. <meta name="author" content="" />
  12. <meta name="robots" content="index follow" />
  13. <title></title>
  14. <link rel="stylesheet" href="common/css/style.css" type="text/css" media="all" />
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18. <div id="header">
  19. <h1 id="p0">株式会社 □□□□□</h1>
  20. </div>
  21. <hr />
  22. <div id="container">
  23. <div id="content">
  24. </div>
  25. <hr />
  26. <div id="naviLeft">
  27. <ul>
  28. <li><a href="./">会社概要</a></li>
  29. <li><a href="./">製品案内</a></li>
  30. <li><a href="./">アクセス</a></li>
  31. <li><a href="./">お問い合せ</a></li>
  32. <li><a href="./">トップページ</a></li>
  33. </ul>
  34. </div>
  35. <p class="goToPagetop"><a href="./#p0">▲ ページトップへ戻る</a></p>
  36. </div>
  37. </div>
  38. <hr />
  39. <div id="footer">
  40. <address>copyright © □□□□□ all rights reserved.</address>
  41. </div>
  42. </body>
  43. </html>

▲ページのトップへ

concrete5のオリジナルテーマの作成

ここから本格的にオリジナルテーマの作成を行ないます。

concrete5のテーマのファイル構成

/theme/にアップロードをするフォルダを作成します。(ここでは"thme_demo")
その中に

  • elements(フォルダ)
    > header.php
    > footer.php
  • images(フォルダ)
    > bg_header.gif
    > bg_navi.gif
  • default.php
  • view.php
  • reset.css
  • base.css
  • main.css
  • typography.css
  • description.txt
  • thumbnail.png

を用意します。各フォルダやファイルの階層は上記の通りで、elementsフォルダの中にはheader.phpとfooter.phpが入っており、imagesフォルダの中にはテーマで使用する画像が入っています。
※ ページ内容のコンテンツ部分で使用する画像はテーマが出来上がってから、コンテンツ部分の作成をする際にアップロードをして貼りつけていくのでimagesフォルダの中にはあくまでもテーマとして表示する部分で使用する画像のみとなります。

通常一般の方が見られるのに影響をするファイルはelementsフォルダ内のheader.php、footer.phpとimagesフォルダ内の画像ファイル、defalt.php、reset.css、base.css、main.cssとなります。
3つのCSSファイルは私個人的な理由で分けてあるだけなので、ご自身のいつも作業をされているように1ファイルにまとめていただいてもお好きなようにカスタマイズしていただいて大丈夫です。CSSの中身は前行程でhtmlを作成した時のものをそのまま使用します。背景画像などのリンクは再度確認をしてください。

各ファイルの内容

● header.php

header.phpにはほとんど変更をすることのないDOCTYPE宣言からbodyまでを記述します。
ソースコードすべてをdefault.phpに書いてしまえばheader.phpは必要ないですが、このように振り分けた場合、ソースコードを変更する部分はほとんどがdefault.phpになるため更新がしやすくなる利点があります。

  1. <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.         "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
  4. <html lang="ja">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <meta http-equiv="Imagetoolbar" content="no" />
  10. <meta name="description" content="" />
  11. <meta name="keywords" content="" />
  12. <meta name="copyright" content="" />
  13. <meta name="author" content="" />
  14. <meta name="robots" content="index follow" />
  15. <?php Loader::element('header_required'); ?>
  16. <!-- Site Header Content //-->
  17. <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
  18. <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('reset.css')?>";</style>
  19. <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('base.css')?>";</style>
  20. <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
  21. </head>
  22. <body>

● default.php

default.phpにはメニュー部分やページ内容が入るコンテンツ部分を書きます。

  1. <?php 
  2. defined('C5_EXECUTE') or die(_("Access Denied."));
  3. $this->inc('elements/header.php'); 
  4. ?>
  5. <div id="wrapper">
  6. <div id="header">
  7. <h1 id="p0">株式会社&nbsp;□□□□□</h1>
  8. </div><!-- end #header -->
  9. <hr />
  10. <div id="container">
  11. <div id="content">
  12. <?php
  13. $a = new Area('Main');
  14. $a->display($c);		
  15. ?>
  16. </div><!-- end #content -->
  17. <hr />
  18. <div id="naviLeft">
  19. <ul>
  20. <li><a href="./">会社概要</a></li>
  21. <li><a href="./">製品案内</a></li>
  22. <li><a href="./">アクセス</a></li>
  23. <li><a href="./">お問い合せ</a></li>
  24. <li><a href="./">トップページ</a></li>
  25. </ul>
  26. <?php
  27. $a = new Area('naviLeft');
  28. $a->display($c);		
  29. ?>
  30. </div><!-- end #naviLeft -->
  31. <p class="goToPagetop"><a href="./#p0">▲&nbsp;ページトップへ戻る</a></p>
  32. </div><!-- end #container -->
  33. </div><!-- end #wrapper -->
  34. <hr />
  35. <?php
  36. $this->inc('elements/footer.php'); 
  37. ?>

1行目～4行目でheader.phpを読み込みます。

12行目から15行目がconcrete5の編集可能領域の指定をしています。
new Area('Main');　のMainを変更することでconcrete5の編集可能領域をいつくも設置することができます。

左側のメニュー部分ですが、基本的にそれほど変更する頻度は少ないと考えメニューはテーマ内に書き込みました。
ですが、バナーを貼ったり何か書き込む事ができるようにメニュー部分の下に編集可能領域を設けてみました。
26行目～29行目にあるように、ここでは編集可能領域をnew Area('naviLeft'); としました。

35行目～37行目でfooter.phpを読み込みます。

● footer.php

  1. <?php
  2. defined('C5_EXECUTE') or die(_("Access Denied."));
  3. require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php');
  4. ?>
  5. <div id="footer">
  6. <address>copyright&nbsp;&copy;&nbsp;□□□□□&nbsp;all&nbsp;rights&nbsp;reserved.</address>
  7. </div><!-- end #footer -->
  8. </div><!-- end #wrapper -->
  9. </body>
  10. </html>

と残りを書きます。
これでページの表示部分は出来ました。

次にテーマをインストールし、使用できるように有効化するのに必要なファイルなどの説明をします。

● typography.css

このファイルで指定したものが記事ブロック内のスタイルに追加されるようになります。

● description.txt

このファイルには管理画面でテーマを選択・有効化する際に表示されるテーマの簡単な説明文を書いておきます。
UTF-8形式で文章を書かなければいけません。

● thumbnail.png

管理画面でテーマを選択・有効化する場合にテーマのキャプチャーを表示します。
png形式で保存します。

● images(フォルダ)

テーマ内で使用するphpファイルやCSSファイルで指定する画像を入れておくフォルダです。
記事内容を書き込むときに使用する画像は記事ブロック内や管理画面内のファイルマネージャーでアップロードをして貼りつけます。

▲ページのトップへ