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

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

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

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

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

そしたら前回の記事で用意したHTMLに作成したいデザインを組み込んでいく。
いつものように、HTMLとCSSしかまともな知識が無いってレベル向けの話なので、間違いやおかしい所があれば、都度都度訂正していきたい。

ひとまず作ったデザインを下のように分けてみた。

<!--header START-->
<header>
 <div id="headerIn">
 </div>
 <nav>
 </nav>
</header>
<!--header END-->

<!--contents START-->
<div id="contents">
 <div id="mainVisual">
 </div>
 <div id="contentsIn">
  <div id="mainColumn">
  </div>
  <div id="sideColumn">
  </div>
 </div>
</div>
<!--contents END-->

<!--footer START-->
<footer>
</footer>
<!--footer END-->

こんな感じ。

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

デザインは決まった。
エリアにする所も決めた。

じゃあいよいよテンプレートを作っていく。
任意のフォルダを作って、以下のような構成にした。

css、images、jsフォルダは、読んで字の如し。
elementsフォルダは、サイト全体に『共通パーツ』としてインクルードさせるエリアのファイルを格納する場所、と思ってもらえれば良い。ヘッダーとかフッターとか、全ページに共通する、あるいは特定のディレクトリに共通するエリアの事。

自作テンプレートの道2 デザイン作成とテンプレート作成時の考え方 Concrete5（Ver5.6.3.1）

Concrete5（Ver5.6.3.1）のインストールも終わって、さぁオリジナルデザインのテンプレートを作ってみようというお話の2回目。

1回目はファイル構成の事に触れたけど、ここから読み進めても多分大丈夫な気がする。前提として、HTMLとCSSくらいしかまともな知識が無いっていう初心者向けの話なので、間違ってるよ！って意見があれば教えてください。訂正します。

何はともあれデザイン

当たり前の話だけど、デザイン作んなきゃ始まんない。そして、こうゆうのってやっぱりクライアント向けに展開する事も多いから、コーポレートサイトを前提に作ろうと思う。
こうゆう感じでデザインしてみた。

非プログラマー系でも素敵なサイトが作れる！Concrete5

とある場所で、WeebyがWordPressの代替になる云々という記事に対して、やり取りしてたんだけど、じゃあConcrete5だって代替って言えるじゃないか。と思った訳です。

でも、基本的に自分所のサーバーにインストールするオープンソース系のWordpressやConcrete5、MovableTypeとかと、ストレージもついてて完全にクラウドなWeebyとかだと、タイプが違うものになるんじゃないかと、知識の無い頭で思いました。

でオープンソース系だとWordPressってもう独壇場といっても良いくらいメジャーなんですけどね。
敷居がね、高いんですよ。
そりゃ今どきレンタルサーバーの中では簡単インストールサービスなんかもあったりして、導入そのものには難しさは減ってきてますけど、自由にやりたいー！なんて思った途端に裸眼で夜の街を歩くような不安に襲われます。
それに固定ページって結局中身はHTMLだから、普通にコーディングしてんのと変わんないし、ブログ部分だけじゃないですかね、スキル無くても更新できるのは。

自作テンプレートの道1 ファイル構成 Concrete5（Ver5.6.3.1）

久しぶりにConcrete5を触ってみた。
おそらく3年ぶり。

当時に比べると比較にならないくらい便利で使いやすくなってるという話を聞いて、CMSとは言えど高度なPHP、Javascriptスキルが無いと、どうにもならないWordpressから、新しい手段を一つ持っておくのも悪くはないと思った。

という訳で、自分に対する忘備録としてあれこれ書いていこうと思う。

CMSって最近、本当に流行ってるというかスタンダードになりつつあるんだけど、便利に使おうとか、かっこ良くしようと思うと、スキルが低かったらどうにもならない。
自分と同じように初心者向け、HTMLとCSSはある程度分かるけど、「jQueryとか知らん」「PHPって健康食品？」くらいのレベル向けにいろいろ書いていけたらと思う。

まずはテンプレートファイルの構造から。

作ったテンプレートファイル一式をフォルダごとtheme/以下にアップロードするのはまぁ分かるとして、どんなファイルが居るの？って事がhttp://concrete5-japan.org/help/design/step_by_step/に載ってるんだけども、ここから既に少しハードル高し。

そして多分3年前と内容変わってない気がする。

いろんなファイルとフォルダがあって、一応意味は分かるんだけど素人からすると、必須なのかどうかって所だと思う。