いつものように、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-->
こんな感じ。
細かい事を端折って端折って言えば、今回作るテンプレートの下準備としては、実はこれでもう完成と言っても良い。だって目指す所は「（ほぼ）全ての場所をHTMLの知識が無くても更新できるテンプレート」だから。今書いたタグの中が全て「エリア」になるんだから、極端に言えば後はConcrete5に任せちゃえば良いって話になる。
でも、そこに加えてオリジナルデザインでっていう条件もあるから、まぁひとまずHTMLとCSSで組んでいく。
HTMLで組む時に注意した方が良いこと
例えば下のようなコンテンツを組みたい場合について。
html5って事を考えてa要素の中にdivを入れられるから、普通に
<a href="hoge">
<div class="link1">
<h3>タイトル</h3>
<p>ボディコピー</p>
</div>
</a>
WYSIWYGエディタで出来るじゃないか！って言われるかも知れないけど、それで出来るのってブログ記事みたいに、タイトルあってー文章あってーたまに写真あって、その写真は左寄せとか右寄せとか出来てー。。。。
そこにデザイン性はあるのかい？
WordPressに対して抵抗があるのはココ。
そりゃリンクとかも入れられるけど、ちょっと複雑な構造になってるHTMLソースなんかは、作れねーじゃないですか。
ああ、また話逸れた。
けど、せっかくCMSなんだから、こうゆう事がしたい。
ほら、なんかすんごい便利で簡単な感じ、しない？
これを、クライアントの目の前でやったら、多分感動すると思う。結論言うとConcrete5なら、これ、可能。
ちょっと一つだけプラグイン入れないといけないんだけど、フリーのモノだしインストールもクリック作業だけで出来るから、Concrete5使うなら必須にしても良いプラグイン。
Designer Content
http://concrete5-japan.org/help/editing/designercontent/
このプラグインは後々詳しく説明する。というかコレ説明しないとこのテンプレート作れない（笑）
という訳で、コレを実現する為にはHTMLのタグの書き方に一工夫が要る。
あとあと説明するんだけど、Designer Contentってヤツは、要するに「編集したい部分と、固定で挿入したいHTMLタグを複数個、予め組んだ状態のブロックにする事が出来る」プラグイン。
これの威力が絶大過ぎて半端ない。
ココが、制作側としてクライアントに勧めたいと思える一番大きな部分かもしれない。
使いこなせばいろんなブロックが自作出来るんだけど、今回は
<a href="hoge">
<div class="link1">
<h3>タイトル</h3>
<p>ボディコピー</p>
</div>
</a>
さっきのソースで言うと、ココで編集したいのは
・a要素のhrefの中
・divの背景
・タイトル
・ボディコピー
の4つ。
だから考え方として、編集したい所以外を固定で挿入してしまえばDesigner Contentで望み通りの自作ブロックに出来るんじゃないか、と閃くんだけど、というか僕自身、最初はそう思ってやってみた。
けど、結果としてうまくいかない所が出てきた。
それは
・a要素のhrefの中
を直接書かないといけないって事。
<a href=" //固定
hoge //編集可能部分
"> //固定
<div class="link1"> //固定
<h3> //固定
タイトル //編集可能部分
</h3> //固定
<p> //固定
ボディコピー //編集可能部分
</p> //固定
</div> //固定
</a> //固定
背景はブロック自体のデザイン設定でそうゆうのがあるし、イケルと思った。
それの何がいけないかって、サイト内へのリンクはCMSなんだから、サイトマップ見ながらポチって選びたい。ねぇ？そうでしょ？
となるとこのブロックの作り方じゃ駄目だ。
************************************************************
ちょっとだけDesigner Contentについて詳しく
この記事の内容は基本的にDesigner Contentがどんな事をしてくれるか分かってないといけないので、一旦ココで少しだけ詳しく説明しておく。
Designer Contentというのは以下の一覧にある要素を順番に並べて、それをひとまとめにしたブロックを自作のブロックとしてConcrete5内に登録できるプラグイン。
[Static HTML] （固定で入るHTMLソース）
[Text Box] （テキストを入れられる編集可能領域）
[テキストエリア（複数行）] （テキストを入れられる編集可能領域）
[画像] （画像の挿入・差し替え・削除ができる編集可能領域）
[File Download] （まだ使ってないから不明だけど、多分ダウンロードできるんだろうね）
[Page Link] （サイト内のページへのリンクが貼れる編集可能領域）
[外部URL] （外部サイトへのリンクが貼れる編集可能領域）
[Date Picker] （ごめん試してないから分からない）
[Dropdown List] （ごめん試してないから分からない）
[WYSIWYG Editor] （WYSIWYGエディターで編集できる領域）
この要素を好きな順番に並べて、それをひとまとめにしたブロックとして登録できる。
イメージがしにくいかも知れないので、さっきの失敗したブロックを実際に作ってた画面がコレ。
こんな感じで、下にある「Add Field」って所から並べたい要素を選んで並べて登録する。
で、触ってみて気がついたんだけどStatic HTML以外（たぶんね）の要素には
ただし、要素をネストする事は出来ない。ココがHTML作る時に工夫が要るよっていう原因ね。
************************************************************
じゃあ話を元に戻してDesigner Contentの特性を頭に入れた上で、あのコンテンツをどうコーディングすれば良いか。
出来るだけ入れ子にしないで並列でタグを並べていく。
つまりこうゆう事ですね。
<div>
<img src="hogehoge">
<h3>タイトル</h3>
<p>ボディコピー</p>
<a href="hoge"></a>
</div>
HTML的に背景は背景で指定した方が良いのかも知れないし、実を言うとConcrete5上でもブロックの「デザイン」っていうタブから背景指定ができるんだけど、編集画面とは違う所にいかないといけないから、更新する側からすれば、少しだけハードルが上がっちゃう。
なので背景はimgタグで普通に置いて、その上にpositionでテキストやリンクを止めてしまえば、一つの編集画面で全ての更新ができる。
（もしも、「それ邪道！」とか「いやもっと合理的な方法あるのに」って感じられたら、お手数ですがお伝え下さい。この記事も訂正します。）
という訳でそうゆう部分で少し工夫をしながらHTMLにしていく。
具体的にはこうゆうデザインにしてみた。
やっぱり終わらないなー。
次回でHTML作成終了までいきたいなーと思う。
自作テンプレートの道5 下準備3
自作テンプレートの道4 下準備2
自作テンプレートの道3 下準備1
自作テンプレートの道2 デザイン作成とテンプレート作成時の考え方
自作テンプレートの道1 ファイル構成
0 件のコメント:
コメントを投稿