どうも、ふるしょうです。現在、農場日記のblogを発展させたWebサービスを計画中です。
さて、SOYCMSの使い方、第4回をお送りいたします。
今回はSOYCMSを使ってサイトを構築するときに、HTML・CSS・JSのコーディングで気をつけなければならないことを説明していきます。
SOYCMSのテンプレートはHTMLほとんどそのままです。MT等では慣れてくるとモックから（普通のHTMLを作らずに）いきなりMTのテンプレートを作る、なんて話も聞きますが、SOYCMSでは一旦HTMLでコーディングしても無駄な手間はかかりません（というか、いきなりテンプレートを起こす場合でもやることは同じになります）。
さて、そこで気になるのがHTMLを作るときの注意点です。
SOYCMSのテンプレート用HTML作成時の注意点
普通CMSのテンプレートにするためのデザインを作成するときには、ある程度CMSの知識が必要になります。もしそのCMSに詳しくない人がデザインやHTML・CSSコーディングを担当したなら、それをCMSのテンプレートにする人は苦労すると思います。
SOYCMSの場合、注意しなければならないのは下記の3点です。
- 読みやすいように書く
- 繰返し場所をはっきりさせる
- パスは絶対パスにする
それぞれの点をもうすこし詳しくみていきますね。
「読みやすいように書く」
結局最終的にテンプレートに加工する時にはソースを読んで行わなければならないので、対応するタグがどれとどれか、など、できるだけ人が読みやすいソースを書いた方がいい、ということです。
「繰返し場所をはっきりさせる」
SOYCMSでは、記事の情報をページに表示する場合、記事につけるラベルを指定して、そのラベルのついた記事のm件目～n件目までを表示、というように設定を行います。そのとき、どの部分が記事の内容に置き換えられるのか、またどこからどこまでが記事の数だけ繰り返されるのかをわかりやすくしておく必要があります。もちろんテンプレートを作成する人がわかれば十分なのですが、位置を間違えると色々な問題が発生してしまいます。
「パスは絶対パスで書く」
これはSOYCMSに限ったお話ではないのですが、CMSが導入されていてダイナミックにサイトの構造が変化する場合、各種のパスは絶対パスで書くことが望ましいです。を相対パスで書いているとリンク切れの原因になります。
全般的に他のCMSを利用する場合や静的HTMLでサイトを制作する場合にも当たり前に心がけておいた方がいいことばかりですね。
サンプルの公開
前回までに考えたサンプルのサイトのコーディングを行ったものを下記に公開しておきます。（お問合せと採用情報は作っていません）
http://recreatorsdemo.soycms.net/realfile.html
デザイナーではなく、マークアップエンジニアでもなく、プログラマーでさえない僕がお盆の間に作ったサイトなので細かなことはいいっこ無しにしてください笑
あと、現在はFirefoxでしか見ることができない（IEだとぐちゃぐちゃになる）のですが、次回以降のお話のためにわざとそうしています。
次回はいよいよSOYCMSの使い方について具体的な操作を交えて説明します。