ModifiableWeb レイアウトデザインガイド
１．基本構成ModifiableWeb を使用したWebサイトの基本構成は以下のようになっています。
ModifiableWeb iframe の外側の Page Header、Page Footer 及び、全体の背景は普通のWebサ イト同様、自由にデザインすることができます。
ModifiableWeb iframe 部の幅はデザインの要件に合わせて自由に決めることができます。高さ は、ModifiableWeb コンテンツの量に応じて動的に変化します。
ModifiableWeb iframe は、html のページ一つに対して、一つだけ埋め込むことが可能です。 ModifiableWeb には、ModifiableWeb iframe 内に新規ページを追加する機能があるので、Page Header、Page Footer 及び背景を一組用意することで、ModifiableWeb を使ったWebサイトの テンプレートデザインとして使用することができます。 また、Page Header 内に、ページ切り替えのタブ、そして各タブのリンク先に相当するページ を用意することで、異なったデザインのページテンプレートを用意し、それぞれのテンプレ ートに ModifiableWeb iframe を埋め込んで使用することも可能です。 ModifiableWeb を使用したページでは、iframe の外側と内側それぞれにCSSファイルを用意 して別々にデザインの指定をします。外側のCSS ファイルは通常通りHTMLファイル内か らlinkタグで指定します。内側のCSSファイルは、ModifiableWeb にログイン後、Advanced Setting の項目から指定します。
例) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは、タブ先のページごとにヘッダー部に使 用する写真を変化させている例です。またこのサイト では、トップページには ModifiableWeb iframe を使 用せず、HTMLのみで、ModifiableWeb のレイアウト の制約を超えた自由なデザインをしています。
例) Chinese Grocery ( http://www.chinesegrocerypei.com/ )
このサイトは、タブ先のページでデザインの変化は無 く、サイトのコンテンツの種類分けのために、複数ペ ージを用意している例です。
例３) Homestay in PEI ( http://www.homestayinpei.com/ )
このサイトはタブを使用せず、一組のテンプレートで サイト全体を運用している例です。
２．ModifiableWeb iframe 内のレイアウト ModifiableWeb iframe 内のレイアウトは、大まかに言うと、「メニュー」一つと「コンテン ツ」一つから構成されます。メニューをコンテンツの左に置くことも、右に置くことも、CSS の float で指定する事が可能です。 また、両側にメニューを配置するデザインも以下のようにして可能ですが、ModifiableWeb の 機能で動的に変化するメニューは、ページ内に一つだけとなります。 上図は、左側にModifiableWebの動的に変化するメニュー、右側にデザイン時に決定される HTMLの静的なメニューを配置した例です。
2.1 ModifiableWeb iframe 内レイアウトの詳細
それでは、ModifiableWeb iframe 内のレイアウトの詳細を見てみましょう。iframe 内のレイア ウトは以下の図のようになっています。混乱しやすいのが、今までメニューと読んできた部分 は、HTMLではdiv#menu、コンテンツと読んできた部分は、div#display と定義されている点で す。今までコンテンツと読んできた部分と、div#content は異なる位置を参照するので、注意し て下さい。以下、各パーツの呼び名は全てHTMLのdiv#xxx もしくは、div.xxx で参照します。
ModifiableWeb で生成されるメニューは全て div#menu の中に div.menu-category として、コ ンテンツは div#mw_contents の中にコンテンツの種類 ( Title, Text, Youtube 等 )に応じた要素 として生成されます。
３つのヘッダ、div#content-header, div#menu-header そして、div#display-header は、デザイ ンの便宜のための要素です。デフォルトでは、display:none (非表示)となっていますが、必要 に応じて、display:block と再定義して、デザインを与えることができます。
div.menu-category は、ModifiableWeb で生成されたページの数だけ縦に並ぶ、増減する要素で す。
また、div.menu-category は、dl 要素によって囲まれています。 2.2 div.menu-category の構成 それぞれの div.menu-category は、以下の図のように、dt タグ一つと、複数の dd タグから構 成されます。dd タグはサイトの構成によって一つもないこともあります。 dt タグには、ModifiableWeb で作成された ページ名がリンクとして表示されます。 dd タグには、ModifiableWeb で作成された ページ内の Title または、Subtitle が ( その Title/Subtile のアンカーへの ) リンクとして 表示されます。 ページ内に複数の Title/Subtitle が挿入され ると、その数だけ、dd タグがメニューに表 示されます。 また、ModifiableWebでは Title/Subtitle を メニューに表示するか否かを、Title/Subtitle ごとに指定する事ができるます。ですの で、サイトデザインの要件によって、dd を 使う構成にするかどうかを決める必要があ ります。 例1. ) dd を使用しない例
B&B Brighton House ( http://www.bbbrightonhouse.com/reservation.html )
div#menu 内、「予約方法について」がページ名としてdtで表示されています。div#display 内、「予約方法について」「宿泊料金」等は Subtitle ですが、メニューには表示されていませ ん。
例2. ) dd を使用した例
ModifiableWeb demo サイト ( http://demo.modifiableweb.com/cricket.html )
div#menu 内、「Top」がページ名として表示されており、その下、「PEI Crickete Association ( Title )」「 History ( Subtitle )」「Origin of Cricket ( Subtitle )」が それぞれ、dd として表示さ れています。
dd を表示するデザイン要件にした際に、div.menu-category の hight を指定してしまうと高さ が固定になってしまい、Title/Subtitle を追加した際に、レイアウトが崩れてしまう ( dd が、 div.menu-category の枠を超えて飛び出してしまう ) 点にご注意下さい。 2.3 div#mw_contents 内の構成 div#mw_contents 内には、ModifiableWeb で追加した全てのコンテンツが含まれます。 コンテンツは今のところ、以下の10種類のコンテンツが存ります。 ● Title 大見出し ● Subtitle 小見出し ● SimpleText 本文 ● Picture 写真 ● Table 表 ● List一覧リスト ● Youtube ● Google Map ● Photo Caption 写真の一行説明文 ● Inquiry 問い合わせフォーム この中で主にデザインに関係してくるのは Title / Subtitle でしょう。それ以外のコンテンツも CSS で指定することで自由にデザインを与える事ができますが、ここでは、Title / Subtitle に ついて説明します。
Title と Subtitle はHTML的には全く同じ構造をしていて、単に class 属性が違うだけです。つ まり、二種類の異なったデザインのタイトルを用意するために、Title と Subtitle が有ると考え て差し支えありません。デフォルトでは、Subtitle は、フォントサイズの小さい Title です。
Title は以下の構成になっています。
<div id=”content_xxx” class=”title mw_content”> <a name=”xxx”></a>
<div class=”mw_title”>Title1</div> </div>
Subtitle は、以下の構成になっています。
<div id=”content_xxx” class=”subtitle mw_content”> <a name=”xxx”></a>
<div class=”mw_subtitle”>Subtitle1</div> </div>
のHTMLの違いは、青で記した class 属性と、見出し文字列だけです。 Title/Subtitle 以外のコンテンツも含めて、全てのコンテンツは、div.mw_content に含まれま す。上記 HTML では、外側の div がそれに相当します。デザインはこのdiv に対して以下のよ うにCSSで指定して下さい。 例1 ) 左ボーダーを水色で指定する。( http://demo.modifiableweb.com/cricket.html より) div.title.mw_content { padding-left: 10px; border-left : 4px solid
#66CCCC
;
} 結果サンプル: CSS のセレクタ部で div.title ではなくて、div.title.mw_content としているのは、コンテンツ 以外の場所でも div.title という名前が付けられている可能性を考慮してです。全てのコンテン ツには、必ず mw_content クラス属性が付加されているので、div.title.mw_content とすること で、ModifiableWeb コンテンツの見出しのみを選択することができます。 例2) 画像を入れる ( http://www.chinesegrocerypei.com/ より) div.title.mw_content { padding-left: 62px;background-image: url(http://www.chinesegrocerypei.com/images/ leaf_icon.jpg); background-repeat: no-repeat; min-height: 50px; } background-image で画像を指定することで、画像をタイトルに配置することができます。画 像のサイズに合わせて padding-left 指定して、画像とタイトル文字が重ならないようにしてい ます。また、min-height で、画像の高さを指定して、画像の下が切れないようにしています。 画像の高さを指定する時は、hight ではなくて、min-height を使用するようにしてください。 このように、タイトルで使用する画像とタイトル文字の位置を自由に指定できるため、柔軟に タイトルを装飾することができます。例えば、以下のような見出しも作ることができます。(
http://www.kamikochi-shimizuya.com/cuisine/ )
2.4 個別のコンテンツにデザインを施す 2.3 での解説では、Title 全て、もしくは Subtitle 全てに特定のデザインを適用する方法を解説 しました。ModifiableWeb では、特定のコンテンツに対してデザインを施すことも可能です。 ModifiableWeb でコンテンツを編集する際、各コンテンツに対して、以下のようにClass 属性 を自由に付加することができます。 Advanced... をクリックすると・・・、 Class 指定することができるようになる。 例えば、ここでClass に “top_titile” というクラス名を指定したとすると、このタイトルに対し て、CSS で以下のようにデザインを付与することができます。 div.top_title.mw_content{ ... } また、ModifiableWeb では画像をアップロードしてページ内に配置することができるため、画 像でタイトルを作成してしまって、それをタイトルとして用いるという方法も可能です。 ただし当然のことですが、ModifiableWeb では画像内の文字を変更する事ができないので、全 てのタイトルに適用する目的で、全タイトルを画像で作成してしまうと、Webサイトオーナ ーが新規タイトルを追加した際に、同じような画像つきタイトルを作成することができない ので、その場合は、2.3 で説明したように、タイトル背景の画像を用意し CSS でタイトルの background-image を指定するという方法をとって下さい。
