自作テンプレートの道5 下準備3 Concrete5（Ver5.6.3.1）

下準備の記事で3回も書くことになるとは思わなかったけど何とか今回で終わりたい。

前回の記事でいろいろと工夫してHTMLを書くという事でひとまず組み終わったHTMLがコレ。
http://concrete.dsm.jp/_themeHTML/ver1/

メインビジュアルが無いのは、これはConcrete5に標準で入ってるブロック「Flex Slider」を使う予定なのでコーディングする必要が無いって事。一応このスライドショーが入る為のブロック要素だけコーディングしている状態。最初から言い続けてるけれど、このテンプレート作成は「プログラミングスキルがほとんど無いWEBデザイナーでも、オリジナルデザインで更新しやすいCMSを構築する事」が目的なので、難しい事はほとんどしない。ほぼHTMLとCSSだけで組んでみたい。



使用したスクリプトは
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript
を参考にスムーズにページ内スクロールするモノのみ。

jQuery読み込んで、スクリプトを貼り付けるだけだから、これなら自分でも分かる。


作成したHTMLに使用している画像は、汎用に使っている画像（ヘッダー部分や、タイトルの背景などページ間で共通に使うもの＝更新する事がほぼ無いと思うもの）と、そのページだけで使っている画像（Concrete5上で編集したり更新したりするもの）とで、ディレクトリを分けておいた方が整理がし易いかも。

ここでもう一度、Concrete5テンプレートの特長でもあるエリアについて


エリア内に置くブロックは基本的に完結している

自作テンプレートの道2　デザイン作成とテンプレート作成時の考え方　Concrete5（Ver5.6.3.1）
でも少しだけエリアに触れたけど、Concrete5というのは、「エリア」と呼ばれる中に、いろんな種類の「ブロク」を積み重ねるように配置していくことでページのコンテンツを作っていく。
そして、自作テンプレートの道4　下準備2　Concrete5（Ver5.6.3.1）で触れたように、予めいろんな要素を組み合わせた自作のブロックを作る事も出来る。


イメージとしては
ブロックを一つ一つ一つ、組み上げていく事も出来るし
数個のブロックを予め一つの大きな箱に入れといて、それを組み上げてく事も出来る
っていう感じ。

だけど、一つだけ注意点があって
ブロックを自由に出し入れ出来る箱を自由に配置する事は出来ない。
（という認識ですが、もしもそうじゃないって場合は訂正しますので、ご意見ください。）

だから、HTMLをコーディングする時に
１）配置を変える可能性
２）コンテンツが増える・減る可能性
がある場合には

<!--まるまるエリアにしたい部分-->


<div>
 <div>コンテンツ1<div>
 <div>コンテンツ2<div>
 <div>コンテンツ3<div>
 <div>コンテンツ4<div>
</div>

<div>
 <div>コンテンツ5<div>
 <div>コンテンツ6<div>
 <div>コンテンツ7<div>
 <div>コンテンツ8<div>
</div>
<!--/まるまるエリアにしたい部分-->

みたいなレイアウトをしてしまうとテンプレートに変換した時にうまくいかない。

厳密にいうとこのソースでも出来ない事は無いんだけど、このテンプレートの目的は「HTMLが全く分からなくても、きちんとレイアウトされたWEBサイト更新が出来る事」だから、例えば[コンテンツ8]を[コンテンツ3]の前に移動させてもレイアウトが崩れないようなものにしたい。

なので出来るだけ、特定のコンテンツ群を包括するようなボックス要素は使わないようにする。

<div>コンテンツ1<div>
<div>コンテンツ2<div>
<div>コンテンツ3<div>
<div>コンテンツ4<div>
<div>コンテンツ5<div>
<div>コンテンツ6<div>
<div>コンテンツ7<div>
<div>コンテンツ8<div>

上記のようにコーディングして、レイアウトはCSSで何とかする。
こんな感じの事に留意しながらHTMLを作成して、次回はこれをテンプレートに変換する所を書いていく。




自作テンプレートの道5　下準備3
自作テンプレートの道4　下準備2
自作テンプレートの道3　下準備1
自作テンプレートの道2　デザイン作成とテンプレート作成時の考え方
自作テンプレートの道1　ファイル構成