ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 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/ ) このサイトは タブ 先 のページでデザインの 変 化 は 無 く サイトのコンテンツの 種 類 分 けのために 複 数 ペ ージを 用 意 している 例 です 例 3) Homestay in PEI ( http://www.homestayinpei.com/ ) このサイトはタブを 使 用 せず 一 組 のテンプレートで サイト 全 体 を 運 用 している 例 です
2.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 等 )に 応 じた 要 素 として 生 成 されます 3つのヘッダ 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> 各 コンテンツには 固 有 のIDが 振 られます 上 の xxx には その ID が 入 ります Title / Subtitle
の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 を 指 定 するという 方 法 をとって 下 さい