SOY CMS2を使ってのサイト作成時のメモ その1

  • 投稿日:
  • by
  • カテゴリ:

2010年12月に正式リリースされたSOY CMS2ですが、SOY CMS2を使って現在、サイトの作成中です。そこでSOY CMS2でサイト作成時のメモとして表記します。何かもご参考になれば幸いです。ここではすでにWebサイトのデザイン(HTML、CSS含む)ができているということで書いています。

今回すること

  • ライブラリを作成
  • テンプレートを作成
  • ディレクトリを作成
  • テンプレートを適用
  • ページの編集

ライブラリを作成

SOY CMS2では、ヘッダー、グローバルナビゲーション、フッターなど全ページ共通となるパーツは、ライブラリとして管理します。そのため、全ページ共通となるパーツはライブラリを作成します。

ライブラリの作成は、 [テンプレートの管理] → [ライブラリを作成] で、行うことができます。標準テンプレートを選択している場合は、フッターやグロナビなどのライブラリがすでにあるので、そのまま上書きできる分には上書きで良いと思います。必要なライブラリは新規で作成をします。

テンプレートを作成

WordPressでいうとテーマ作成ということになると思うのですが、各ページに適用していくテンプレートを作成していきます。

テンプレートを作成時に、テンプレート種類を選ばなければならないのですが、テンプレート種類には下記の5つがあります。

  • 通常ページ
  • 記事ディレクトリ
  • 一覧
  • 検索
  • アプリ

基本的には、トップページや固定ページには『一覧』、記事には『記事ディレクトリ』を選びます。(今回は、トップページや固定ページの作成です。)

そして、HTMLが完成されている場合は、そのHTMLに必要なテンプレートタグを埋め込んでいきます。

テンプレートタグ一覧はこちら

ライブラリをテンプレートに埋め込む

作成したライブラリをテンプレートに適用するためには、下記のようにテンプレートタグを埋め込んでいきます。

<!-- cms:include="ライブラリID" -->
<!-- /cms:include="ライブラリID" -->

メインコンテンツを表示

各ページのメインコンテンツを表示させるために、下記のようにテンプレートタグを埋め込んでおくと良いです。

メインコンテンツの作成は『ページの編集』で行うのですが、メインコンテンツを表示させるためには、テンプレートタグがないと表示されませんので、メインコンテンツを表示させる場所に必要に応じた形で埋め込んでください。

コンテンツの中身表示

<!-- block:id="entry">
<!-- cms:id="content"> ここに表示されます。 <!-- /cms:id="content">
<!-- /block:id="entry">

p要素を使う場合

<!-- block:id="entry">
<p cms:id="content"> ここに表示されます。 </p>
<!-- /block:id="entry">

HTML5でsection要素を使う場合

<!-- block:id="entry">
<section cms:id="content"> ここに表示されます。 </section>
<!-- /block:id="entry">
ヘッダー・グローバルナビゲーション・サブメニュー・フッターを全ページ共通にしたテンプレートタグを埋め込んだ固定ページのレイアウトは、下記図のようになります。 layout.gif

これをコードで表すと下記のような感じになります(HTML5での場合)。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<meta cms:id="meta_keyword" content="">
<meta cms:id="meta_description" content="">
<title>サイトタイトル</title>
<link rel="accessibility" href="/accessibility/" type="text/html">
<link rel="start" href="/dummy/" title="dummy">
<link rel="stylesheet" href="/dummy/css/style.css">
<link rel="shortcut icon" cms:id="link_shortcut_icon">
<link rel="icon" cms:id="link_icon">
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script src="/dummy/themes/default/js/design.js"></script>
<!--[if IE]>
<script src="/dummy/js/html5forie.js"></script>
<![endif]-->
<!-- cms:id="site_feed" --><!-- サイト全体のフィード --><!-- /cms:id="site_feed" -->
<!-- cms:id="directory_feed" --><!-- ディレクトリのフィード --><!-- /cms:id="directory_feed" -->
</head>


<body class="##BODY_CLASS##" role="document">
<p id="blockskip"><a href="#main">本文へ</a></p>

<div id="wrapper">
<div id="dynamic-edit" cms:id="dynamic_edit_navi">
<p><a cms:id="dynamic_edit_link"><strong>ダイナミック編集</strong></a></p>
</div>

//ヘッダー
<!-- cms:include="header" -->
<!-- /cms:include="header" -->

//グローバルナビゲーション
<!-- cms:include="globalnavi" -->
<!-- /cms:include="globalnavi" -->

<div id="main" role="main">	

//メインコンテンツの中身を表示
<!-- block:id="entry">
<!-- cms:id="content"><!-- /cms:id="content">
<!-- /block:id="entry">

</div><!-- // #contents -->

//サブメニュー
<!-- cms:include="submenu" -->
<!-- /cms:include="submenu" -->

//フッター
<!-- cms:include="footer" -->
<!-- /cms:include="footer" -->

</div><!-- //#wrapper -->
	
</body>
</html>

ディレクトリを作成

SOY CMS2の管理画面トップに『サイトマップ』が表示されています。

ここから、下層ページ等のディレクトリを作成していきます。

テンプレートを適用

作成したディレクトリの下に、index.htmlのページが出来上がります。(ここからそのディレクトリの各ページを作成していきます。)その各ページにテンプレートを適用しています。

[設定] → [テンプレートの設定]で [テンプレート設定]のタブをクリックします。

適用したいテンプレートを選択します。

タイトルタグの設定

タイトルタグの設定をオススメします。タイトルタグはページタイトルの設定になるのですが、デフォルトだと、

ページ名 - ディレクトリ名 - サイト名

のような表示になります。ディレクトリ名とページ名が仮に同じだった場合、同じ名前が連続して表示されます。ですので、どちらかを表示しないように僕は設定をしています。『基本設定』のタブをクリックするとタイトルタグの設定する箇所がありますので、そこからタイトルタグの設定を行ってください。

変更前
#PageName# - #DirName# - #SiteName#
変更後
#PageName# - #SiteName#

ページの編集

ディレクトリとテンプレートが適用できればメインコンテンツを表示していくために、『ページの編集』を行っていきます。

サイトマップから [設定] → [ページの編集]

SOY CMS2のWYSIWYGエディタでメインコンテンツを記述していきます。エディタではビジュアルとHTMLのどちらかで記述できますので、記述しやすいほうでメインコンテンツを記述していきます。(僕はHTMLタグを直接入力していくほうに切り替えて記述していっています。)

おわりに

以上のことで、固定ページの作成はできあがります。トップページ以外の固定ページは、テンプレートタグは上記のことだけであまり記述することがないので、すぐに作成できるかと思います。 あとは記事ディレクトリや検索などテンプレートタグを多数使うであろうページの作成です。あと、パンくすずリストも....。これは、また『その2』として公開したいと思います。それまでしばらくお待ちください。

また今回は、模索しながら作成していっているので、分からないことがまだまだ多いです。今回記述したこと以外にも効率の良い作成方法があれば教えていただければ幸いです。また、SOY CMS2で作成したサイトを早く公開できるようにしていきます。