グラフィCMSを使ってみましょう

Promographyサービスを申し込むと グラフィCMS を利用して、Webサイトを作成、公開することができます。
あらかじめ用意されているサンプル等を使って、グラフィCMS の使い方、Webページの作成の方法を簡単に説明していきす。
（この、グラフィCMSクイックガイドのWebサイトも、グラフィCMSによって作成、公開されています）

グラフィCMSの基本

ログインの方法

プロモグラフィサービスの契約を行っていただくと、グラフィCMS (Contents Management System) をご利用いただけます。最初にログインしていただく必要があります。以下のいずれかの方法で、ログインしてください。
方法 1
　グラフィ・ビジネスポータル (http://www.graphy.ne.jp) にログインし、会員マイページの「既存 Web 編集」をクリックする。
方法 2
　http://cms1.graphy.ne.jp にアクセスし、ログイン ID、パスワードを入力の上、ログインする。
いずれの場合も、ログイン ID は会員登録時またはアカウント追加時に指定した自分のメールアドレス、パスワード です。

グラフィCMSの画面構成

Default_cms.jpg

グラフィCMSへログインして表示される画面は、右図のように構成されています。
  • CMSメニュー
    • ここには、CMSで編集するためのコマンドのメニューなどが表示されています。
  • ツリービュー
    • ここには保存されているすべてのコンテンツが、階層 (ツリー構造) がわかるような形で表示されます。ページ名やファイル名を右クリックするとメニューが表示され、ファイルのコピー、削除といった操作を行うことができます。
  • コンテンツビュー
    • ここには、CMSで作成されたページの内容が表示されます。

コンテンツビュー（グラフィCMSで作成するページ）の構成

block.jpg

コンテンツビューに表示されている内容は、右図のように、
  • バナーエリア
  • グローバルナビ
  • ローカルナビ（左）
  • ローカルナビ（右）
  • コンテントボディ（本文）
  • フッタ
という6つの領域で構成されています。
これらのレイアウトやデザインはスタイルシートによって、ページ毎に変更することができます。

スタイルシートとは

スタイルシートとは、ページの内容（文章や構造）とは別に、レイアウトやデザインといった見え方を定義するという考え方に基づいたもので、グラフィCMSでは CSS(Cascading Style Sheets)という方法で実現しています。参考書や資料が多く出版されていますので、是非、ご一読くだされば、応用範囲も広がります。

CMSメニューの使い方

cms_menu.jpg

画面右上のCMSメニュー・エリアには、
１．コンテンツビューに表示されているコンテンツの名前とリビジョン情報
２．コンテンツビューに表示されているコンテンツに適用されているスタイルシート名とメニューバー名
３．ユーザのログイン情報
４．開いているコンテンツのリスト（履歴ナビ）
５．CMSコマンドボタン
が表示されています。
CMSコマンドには、以下の機能のボタンが並んでいます。
　ボタン　 　機能
cms_cmd_mypage.jpg 会員マイページへ戻る
cms_cmd_closeall.jpg 開いているコンテンツを全て閉じる
履歴ナビに表示されているコンテンツが全て閉じられます
cms_cmd_close.jpg コンテンツビューに表示されているコンテンツを閉じる
cms_cmd_edit.jpg コンテンツビューに表示されているページを編集
cms_cmd_pdf.jpg コンテンツビューに表示されているページをpdf化する
cms_cmd_publish.jpg コンテンツビューに表示されているページ以下をWeb公開する
cms_cmd_history.jpg コンテンツビューに表示されているページの“変更履歴画面”を開く
cms_cmd_property.jpg コンテンツビューに表示されているページのプロパティ画面を開く
cms_cmd_addwatchlist.jpg コンテンツビューに表示されているページをウオッチリストに追加する
cms_cmd_watchlist.jpg “ウオッチリストの管理画面”を開く
cms_cmd_updated.jpg “最近変更されたコンテンツリスト画面”を開く
cms_cmd_account.jpg “アカウント情報管理画面”を開く
cms_cmd_groupe.jpg “アカウント・グループ管理画面”を開く
cms_cmd_dWiz.jpg “デザイン作成ウイザード”を開く
cms_cmd_style.jpg スタイルシートの仮適用、又は“スタイルシート作成・管理画面”を開く
cms_cmd_menubar.jpg メニューバーの仮適用、又は“メニューバーの作成・管理画面”を開く
cms_cmd_help.jpg ヘルプ情報を表示させる
cms_cmd_logout.jpg グラフィCMSからログアウトする
cms_cmd_manual.jpg “グラフィCMS操作説明書画面”を開く
cms_cmd_cmsupdated.jpg “グラフィCMSの機能更新情報画面”を開く

あらかじめ用意されているページについて

default_tree.jpgグラフィCMSは、「まずコンテンツありき」ということから始まります。社内情報や、資料、画像、映像、そしてWebサイトとして公開しようとする原稿等々です。こういったコンテンツを集めて、整理し、管理し、取捨選択しつなぎあわせ、充分吟味されたものを公開できるようマネージメントすることが重要なポイントだと考えております。
プロモグラフィサービスを契約頂いたあと、一番最初にグラフィCMSへログインした状態では、画面右側のツリービューには、右のように表示されています。メインページ、社内連絡、Web sample page、PublicInfoの４つの項目が表示されています。
default_tree02.jpgメインページは、グラフィCMSへログインした時に最初に表示されるページで、削除することはできません。
それ以外のページは、
  • 社内連絡はグループ内での情報共有
  • Web sample pageは公開するWebサイトのサンプル
  • PublicInfoは、Webサイトで“お知らせ”を表示させるための特別なページ
という使い方を想定したサンプルです。
内容を参考にしていただき、使い方にあわせて自由に修正したり、不要であれば削除していただいてかまいません。
ツリービューの＋をクリックしていくとそれぞれの下位にページがある場合には表示されていきます。
以降、これらのサンプルの内容をもとに、どのようにページの表現方法を変更させるかを説明していきます。
"Web sample page/MyCorp"以下は、仮想の会社のWebサイトを想定したサンプルで構成されています。この内容は、実際にプロモグラフィCMSによるサンプルサイトで公開しておりますので、それぞれのページの原稿や設定とあわせて、ご確認ください。
"Web sample page/MyDiary"以下は、個人の日記風Webサイトを想定したサンプルで構成されています。こちらもプロモグラフィCMSによるサンプルサイト2で公開しております。

ツリービューの使い方

tree_menu.jpg

画面左側のツリービューで、特定のコンテンツ（ページ）の名前の上でマウスを右クリックすると、右のようなメニューが表示され、そのコンテンツに対する操作を選択することができます。
【開く】
コンテンツ（ページ）を開きます。コンテンツの名前をクリックするのと同じです。
【貼り付け】
コピー、又は切り取ったコンテンツをそのコンテンツの下に貼り付けます。
【コピー】
そのコンテンツ以下の内容をコピーします。
【切り取り】
そのコンテンツ以下の内容を切取ります。
【削除】
そのコンテンツ以下の内容を削除します。一旦、削除した内容は元に戻すことはできません。
【サムネール削除】
そのコンテンツで使用されているサムネール画像を削除します。サムネール画像は、そのコンテンツ（ページ）が次に開かれたときに新しく作成されます。
【名前の変更】
そのコンテンツ（ページ）の名前を変更します。他のページで参照している場合、その記述は変更されませんので注意してください。
【新規ページ】
そのコンテンツ（ページ）の下に新しくページを作成します。
【アップロード】
そのコンテンツ（ページ）の下に画像等をアップロードします。
【Webインポート】
そのコンテンツ（ページ）の下にWebをインポートします。
【公開】
そのページ以下をWebサイトとして公開します。
【プロパティ】
そのコンテンツ（ページ）のプロパティ画面を開きます。

新しくページを作ってみましょう

新規ページの作成

create_exampage01.jpg練習用のページをまずメインページなどと同じツリーの最上位に作成します。
画面左側のツリービューの【＋／】の部分で右マウスボタンをクリックします。
create_exampage02.jpgメニューが表示されますから、【新規ページ】を選択します。
create_exampage03.jpg新しく作成するページの名前を入力するダイアログが表示されますので、たとえば、“練習用ページ”とテキストボックスに入力し、【作成】ボタンをクリックします。
create_exampage04.jpgツリービューの表示が更新され、“練習用ページ”が作成されています。

ページの編集画面

create_exampage05.jpgまた、コンテンツビューには新しく作成された“練習用ページ”が表示されています。バナーエリアやローカルナビ等の設定は後で行うとして、まず、このページの内容を入力します。コンテンツビューに表示されているページの内容を編集するには、CMSコマンドの編集ボタンcmd_edit_s.jpgをクリックしてください。
create_exampage06.jpg画面の右側が編集画面に変わり、大きな編集ボックスと、書式コマンドが表示され、CMSコマンドの左側が以下のように変化します。
ボタン 　機能
cms_cmd_cancel.jpg 中止ボタン
編集を破棄して編集モードを終了する
cms_cmd_save.jpg 保存ボタン
編集内容を保存して編集モードを終了する
cms_cmd_preview.jpg プレビューボタン
現在の編集内容をプレビューエリアに表示させる
編集ボックスには、“練習用ページ”というページの名前を大見出しにした、数行の内容があらかじめ入力されています。
グラフィCMSでは、この編集ボックスに本文を入力していきます。編集ボックスへマウスカーソルを移動し、クリックすると編集ボックスの中に“｜”の形状のカーソルが表示され、ワードプロセッサと同じような感じで文字の入力、削除、コピーや貼り付けといった操作が行えます。キーによる主な機能は、以下の通りです。
キー 　機能
CTRL+A 編集ボックス内の文字を全て選択
CTRL+C 選択している内容をコピー
CTRL+X 選択している内容を切取り
CTRL+V コピー／切取りを行った内容を貼り付け
DELETE 選択している内容の削除。選択している内容がない場合には、カーソルの位置の次の文字を削除
BackSpace 選択している内容の削除。選択している内容がない場合には、カーソルの位置の前の文字を削除

本文の書き方

cms_edit_001.jpg“練習ページ”の編集ボックスの左上でマウスをクリックし、あらかじめ、入力されている文字を全て選択します。
【DELETE】キーを押して、一旦全てを削除し、下の文章を入力してください。
徒然日記

●本日の喜怒哀楽　2008/9/17（水）晴れ

時間差通勤で電車に乗ったら、「優先席」（以前はシルバーシートと呼んでいたが、いつから言い方が変わったのだろう?）が空いていたので、座った。座ったとたんに鞄の中に入れていた携帯が高らかに鳴った。「携帯の電源は切りましょう」の表示が同時に目に飛び込み、あたふたと携帯を切った……続きはこちら→

●猫のいる風景
猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
猫のページはこちら→

●手作りレシピ&お気に入り
たまにホームパーティなんかします。
おいしい!　と評判だった手作り料理です。
レシピも載せてます。
お料理レシピはこちら→
cms_edit_002.jpg
cms_edit_003.jpg入力したら、CMSコマンドの【プレビュー】ボタンをクリックします。入力された内容が、実際にどのようなイメージになるかが、プレビューエリア（編集画面の下側）に表示されます。
本文は、入力した文字がそのまま表示されますが、編集ボックスで改行していても、同じ段落の内容として、文字列は連続して表示されます。右図では、“●猫のいる風景猫を飼って……”、“●手作りレシピ&お気に入りたまにホーム……”のように、実際に改行したい部分でも、続けて表示されています。
この場合、下のように、“●猫のいる風景”と“猫を飼って……”の間、“●手作りレシピ&お気に入り”と“たまにホーム……”の間をそれぞれ１行あけてください。
●猫のいる風景

猫を飼ってます。猫の写真を載せてます。

●手作りレシピ&お気に入り

たまにホームパーティなんかします。
cms_edit_004.jpgこれで、それぞれが別の段落となり、改行されて表示されます。段落と段落との間のスペースは、そのページを表示するために指定しているスタイルシートによって異なります。（スタイルシートについては、後で説明します）
入力・編集した内容を保存するには、必ず【保存】ボタンをクリックしてください。
注：編集中にツリービューで他のページを開いてしまうと、それまでの編集内容が破棄されてしまいます。

特別な記号（タグ）について

特別な記号（タグ）を書き加えることによって、“見出し”や“リンク”、“箇条書き”といった機能を指定することができます。以下に簡単に説明します。
編集画面で、【ヘルプ】ボタンをクリックすると、それぞれの機能や書式の説明を表示させることができます。（※以下の内容とヘルプの説明で違いがある場合には、ヘルプの内容が正しいとお考えください。）

見出し

半角の“=”と“=”の間に文章を入れることで、見出しとなります。また、“＝”の数で見出しのレベルを変えることができます。“＝”は行の先頭から記述されていなければなりません。
書式：
=大見出し=
==中見出し==
===小見出し===
====極小見出し====
SEO（検索エンジン対策）として、見出しに適切な文字列を使用することは非常に有効です。本文の内容に適した検索されやすい、検索して欲しい文字列を使用しましょう。
“練習ページ”の内容を、
=徒然日記=

==●本日の喜怒哀楽　2008/9/17（水）晴れ==

時間差通勤で電車に乗ったら、「優先席」（以前はシルバーシートと呼んでいたが、いつから言い方が変わったのだろう?）が空いていたので、座った。座ったとたんに鞄の中に入れていた携帯が高らかに鳴った。「携帯の電源は切りましょう」の表示が同時に目に飛び込み、あたふたと携帯を切った……続きはこちら→

==●猫のいる風景==

猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
猫のページはこちら→

==●手作りレシピ&お気に入り==

たまにホームパーティなんかします。
おいしい!　と評判だった手作り料理です。
レシピも載せてます。
お料理レシピはこちら→
cms_format_001.jpgと“徒然日記”を大見出しに、“●本日の喜怒哀楽　2008/9/17（水）晴れ”、“●猫のいる風景”と“●手作りレシピ&お気に入り”を中見出しに指定します。
編集ボックスでキーボードから"="を入力しても構いませんが、右図のように見出しにする文字列“●本日の喜怒哀楽　2008/9/17（水）晴れ”を選択し、書式コマンドの【中見出し】をクリックすると、その文字列の前後に"=="が自動的に付加されます。
cms_tag_001.jpg修正を有効にするには、忘れずに【保存】ボタンをクリックしてください。見出しに指定した部分の文字の大きさが大きくなり、また太くなっています。
cms_tag_002.jpg見出しに指定した部分が、どのように表示されるかは、そのページの表示に使用しているスタイルシートによって変わります。（スタイルシートについては、後で説明します）
CMSコマンドの【スタイルシート】ボタンをクリックし、“Web-Sample-common”を試しに適用して、どの様に表示が変わるか見てみてください。
cms_tag_003.jpg見出しの部分に青色の罫線が付加されて表示されます。その他のスタイルシートでも試してみてください。

リンク（URL）

別のページ（コンテンツ）へのリンク

本文中に他のページへのリンクを埋め込むことができます。リンクをクリックすると指定したページへ移動します。
書式：
[[ページ名]]
[[ページ名|表示文字列]]
[[ページ名|Image:画像ファイル名]]
ページ名だけを指定した場合、その“ページ名”そのものが表示され、リンクになります。
“|”に続けて表示文字列を指定した場合には、“表示文字列”が表示され“ページ名”に対するリンクになります。
“|”に続けて“Image:画像ファイル名”という画像ファイルを指定した場合、画像が表示され、かつ画像が“ページ名”へのリンクとなります。
“練習ページ”の内容を、
=徒然日記=

==●本日の喜怒哀楽　2008/9/17（水）晴れ==

時間差通勤で電車に乗ったら、「優先席」（以前はシルバーシートと呼んでいたが、いつから言い方が変わったのだろう?）が空いていたので、座った。座ったとたんに鞄の中に入れていた携帯が高らかに鳴った。「携帯の電源は切りましょう」の表示が同時に目に飛び込み、あたふたと携帯を切った……[[:日記|続きはこちら→]]

==●猫のいる風景==

猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
[[:猫|猫のページはこちら→]]

==●手作りレシピ&お気に入り==

たまにホームパーティなんかします。
おいしい!　と評判だった手作り料理です。
レシピも載せてます。
[[:料理|お料理レシピはこちら→]]
cms_tag_004.jpgと修正して保存すると、“練習ページ”の下位にある“日記”、“猫”、“料理”という３つのページに対するリンクが埋め込まれ、表示も下線付きの青色になっています。

TIPS 新規ページの作成方法その2

cms_tag_005.jpgしかし、リンクを指定した“日記”、や“猫”、“料理”という３つのページはまだ作成されていません。ツリービューの“練習ページ”を右クリックして“新規ページ”で作成する方法は、すでに説明しましたが、もう一つ方法があります。
“練習ページ”にある“続きはこちら→”というリンクをクリックしてください。右のように内容が空のページが表示されます。まだ、実際に“日記”というページが作成されているわけではありません。
【編集】ボタンをクリックし、さらに【保存】ボタンをクリックすると実際にページが作成されます。

ページ名の指定のしかた

default_tree02.jpgリンクの指定や後で説明する画像の表示の指定でページや画像ファイルなどを指定する場合の規則を説明します。
  • ページ名
    • 単純にページ名を書いた場合、編集しているページと「同じ階層」にあるページや画像ファイルを表します。
      • 記述例：“メインページ”に“Web Sample Page”へのリンクを埋め込む場合。
      • 　［［Web Sample Page］］
  • ：ページ名
    • ページ名の前に半角の“：”を置いた場合、編集しているページの「下位」にあるページや画像ファイルを表します。
      • 記述例：“Web Sample Page”に“Web Sample Page/MyCorp”へのリンクを埋め込む場合。
      • 　［［:MyCorp］］
  • “/”で始まる絶対パス名
    • “/”から始めてフォルダ名を全部書くことで、 どの階層にあるページも指定可能です。
      • 記述例：“メインページ”に“Web Sample Page/MyCorp”へのリンクを埋め込む場合。
      • 　［［/Web Sample Page/MyCorp］］

別のWebサイトへのリンク

本文中に他のWebサイト(URL)へのリンクを埋め込むことができます。リンクをクリックすると指定したURLへ移動します。
書式：
[URL]
[URL 表示文字列]
[URL Image:画像ファイル名]
URLだけを指定した場合、その“URL”そのものが表示され、リンクになります。
半角のスペース“ ”に続けて表示文字列を指定した場合には、“表示文字列”が表示され“URL”に対するリンクになります。
半角のスペース“ ”に続けて“Image:画像ファイル名”という画像ファイルを指定した場合、画像が表示され、かつ画像が“URL”へのリンクとなります。
URLと表示文字列や表示画像名との間には、半角のスペース" "を入れてください。
記述例：“http://www.graphy.ne.jp”へのリンクを埋め込む場合、それぞれ以下のようになります。
[http://www.graphy.ne.jp]
[http://www.graphy.ne.jp グラフィ株式会社]
[http://www.graphy.ne.jp グラフィーバナー.jpg]

画像

本文中に、グラフィCMSへアップロードした画像ファイルを表示させることができます。表示できるのは、gif、jpeg、png という拡張子のついたブラウザで直接表示可能な画像ファイルです。

ファイルのアップロード

upload_001.jpgまず、“練習用ページ”の下位にパソコンに保存されている“猫1.jpg”という名前の画像ファイルをグラフィCMSへアップロードします。
画面左側のツリービューの“練習用ページ”のところで右クリックしメニューを表示させ、【アップロード】を選択します。
upload_002.jpgアップロード画面が表示されますので、アップロードするファイルを選択するために、【参照】ボタンをクリックします。
upload_003.jpg“ファイルの選択”ダイアログが表示されますので、アップロードしたいファイル（ここでは、“猫1.jpg”）を選択し、【開く】ボタンをクリックします。一度に複数のファイルをアップロードしたい場合には、この作業を繰り返してください。
upload_004.jpgアップロードするファイルの指定ができたら、【アップロード】ボタンをクリックします。
upload_005.jpgツリービューの表示が更新されますから、“練習ページ”の左側の“＋”ボタンをクリックしてください。
右のように、“練習ページ”の下位に“猫1.jpg”がアップロードされていることがわかります。

画像のインライン表示

本文中に、以下のような ［［ と ］］ で囲まれた書式で、 Image: に続けて画像ファイル名を埋め込んでください。ファイル名の指定のしかたは、「ページ名の指定のしかた」で説明したルールに従います。
書式例：
[[Image:画像ファイル名]]
[[Image:画像ファイル名|right]]
[[Image:画像ファイル名|left|代替文字列]]
画像ファイル名に“|”を続けて、"right"と記述すると画像が右寄せ、"left"と記述すると左寄せになります。さらに“|”に続けて画像が表示できない場合に代わりに表示させる“代替文字列”を指定することができます。その他にも機能があります。ヘルプの【書式 画像やメディアファイル】の【インライン画像】の項目を参照してください。
“練習用ページ”の内容の、
==●猫のいる風景==

猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
[[:猫|猫のページはこちら→]]
の部分に、
==●猫のいる風景==

[[Image::猫1.jpg]]
猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
[[:猫|猫のページはこちら→]]
cms_tag_006.jpgと追加します。“Image::猫1.jpg”と“:”が２つ続いていますが、これは、“Image:”で画像ファイルの表示、“:猫1.jpg”で“練習ページ”の下位にある“猫1.jpg”という画像を指定、という意味です。
【保存】または【プレビュー】ボタンをクリックすると、右のように表示されます。
画像の指定の後に、強制改行“＄＄”（半角の$を2つ）を付加して
==●猫のいる風景==

[[Image::猫1.jpg]]$$
猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
[[:猫|猫のページはこちら→]]
cms_tag_007.jpgとすると、右のように画像のところで改行し、下側に文字列が表示されます。

画像のサムネール表示

インライン表示では画像の実際の大きさで表示されますが、これを縮小して表示 (サムネール表示) することができます。この場合、サムネール表示されている画像をクリックすると、実際の大きさで表示されるページへのリンクが自動的に生成されます。
書式例：
[[Image:画像ファイル名|thumb|50px]]
[[Image:画像ファイル名|thumb|x50%]]
[[Image:画像ファイル名|thumb|代替文字列]]
画像ファイル名に“|”を続けて、"thumb"と記述するとサムネイル表示の指定になります。サムネイル表示では、必ずさらに“|”に続けて“縦x横”で表示させる大きさを指定します。
上の例の、"50px"と指定した場合、縦が50ピクセルになり横のサイズは元の大きさに併せて縮小されます。また、"x50%"とした場合、横を元の画像の半分（50%）に縮小する、という意味になります。その他にも機能がありますので、ヘルプの【書式 画像やメディアファイル】の【サムネイル画像】の項目を参照してください。
さきほどの“練習ページ”の画像の指定の部分を、
==●猫のいる風景==
[[Image::猫1.jpg|thumb|x80px|猫のいる風景]]
猫を飼ってます。猫の写真を載せてます。
はっきり言って、ねこ馬鹿です。
[[:猫|猫のページはこちら→]]
cms_tag_008.jpgのようにサムネイル表示の指定に変えると右のようになります。
cms_tag_009.jpgまた、サムネイル画像をクリックすると右のように実際の大きさで表示されます。

とにかく公開してみましょう

myPage_domain.jpg会員マイページの左側のローカルナビにある、ドメイン・サイト情報をクリックすると、公開するWebサイトのドメインに関する情報画面が開きます。
サンプルで公開している、http://sample.promography.jpの場合は、右のようにドメインとして"promography.jp"を登録しています。
Promographyサービスを契約したあとで、この画面からドメインの取得、登録を行ってください。
tree_publish.jpgサンプル"Web sample page/MyCorp"をトップページとしてWebサイトを登録する場合には、プロモグラフィCMS画面左側のツリービューの"Web sample page/MyCorp"の名前の上でマウスを右クリックし、表示されるメニューから“公開”を選択します。
web_publish01.jpg公開画面になります。公開URLの箇所の右側のテキストボックスには、登録しておいたドメイン名が入力されています。左側のボックスに"sample"と入力すると、
　http://sample.promography.jp
というURLで""Web sample page"以下が公開されることになります。
一般的には左側のテキストボックスに"www"と入力して
　http://www.promography.jp
というURLで公開することになります。
サイト名というテキストボックスには、公開された場合に、HTMLのTITLEタグに、
　＜title＞［グラフィ CMS サンプル］ HOME＜/title＞
のように出力され、ブラウザのタイトルバーに表示されるます。このタグの内容は、検索エンジンの検索対象として重要であるとともに、検索検索結果としても表示される場合が多いので、効果的なテキストを必ず入力するようにしましょう。
web_publish02.jpg【公開する】ボタンをクリックすると確認のダイアログが表示されますので、【OK】ボタンをクリックすれば終了です。これでWebサイトが公開されました。

専用のスタイルシート myStyle を作成してみましょう

グラフィCMSでは、いくつかのスタイルをあらかじめ提供していますが、ユーザ専用のスタイルシートを作成してみましょう。

手順

  1. sel_style.jpg画面上部のCMSメニューにある【スタイル】ボタンcmd_style_s.jpgをクリックすると、右のようなメニューが表示されますので、一番上の【スタイルの作成・管理】を選択します。
  2. create_newStyle01.jpgスタイルの作成・管理画面になりますから、この画面にある【新規スタイルの登録】で、"myStyle"と入力しボタンをクリックします。（この"myStyle"という名前のスタイルをこの説明では使用していきます。実際には、自由に名前をつけてください。）
  3. def_design.jpgmyStyleというスタイルシートが作成され、デフォルトのスタイルが定義されています。
  4. tree_001.jpg画面左側のツリービューの【メインページ】をクリックすると、CMSへログインした時に最初に表示される“メインページ”へ戻ります。次に画面上部のCMSメニューにある【プロパティ】ボタンcmd_prop_s.jpgをクリックすると、この“メインページ”のプロパティ（設定情報）画面が表示されます。
  5. prop.jpgプロパティ画面では、スタイルシート、メニューバーの指定、ページのアクセス許可や、グローバルナビ表示をする／しないなどを設定することができます。ここではスタイルの項目を【cms-default】から、作成した【myStyle】へ変更し、【保存】ボタンをクリックして下さい。（今の段階では、cms-defaultとmyStyleの内容は同じですので、ページの表示のされかたは変わりません）

プロパティ画面について

プロパティ画面に表示されている情報、設定は以下のような意味を持っています。
項目 意味
コンテンツID ページの管理番号。特に気にする必要はありません。
作成日時 ページが最初に作成された日時。
公開日時 ページが公開された場合にはその日時。
所有者 ページを作成したユーザ。
所属グループ ページを管理しているグループ。
アクセス許可 ページのアクセス権限の設定。
最終変更日時 最後に変更された日時。
最終変更者 最後に変更を行ったユーザ。
リビジョン 変更履歴番号。変更履歴は、CMSメニューの【変更履歴】ボタンをクリックすると表示されます。
ファイルサイズ ページのサイズ
タイプ ページの種類
グローバルナビ グローバルナビへの表示・非表示の設定と、表示するテキスト。
タグ・キーワード HTMLの"meta keyword"タグへ出力するキーワード文字列。検索エンジン対策として重要です。できるだけキーワードを設定するようにしてください。
要約 HTMLの"meta description"タグ、および、RSS のdescription 要素として配信される要約テキスト。
グローバルナビ表示 このページでグローバルナビを表示する・しない。
スタイル ページのスタイルシート
メニューバー ページで表示されるメニューバー
このコンテンツ以下すべてに適用する このプロパティの設定内容を下位のページへも適用させる場合に、チェックします。
保存 変更した内容を保存して、プロパティ画面を閉じます。
リセット プロパティ画面を開いた時の設定内容に戻します。
閉じる 変更した内容を破棄して、プロパティ画面を閉じます。
このコンテンツをウォッチしているユーザ 更新メールが送信されるユーザのリスト。
ウオッチリストへ追加 このページが変更された時に、変更履歴の内容をメールで送信するユーザを登録します。（※注：変更者自身へはメールは送信されません）

コンテンツ画面の開き方

cm_history_open.jpg画面左側のツリービューで確認・修正を行うコンテンツの名前の部分をクリックするほかに、画面上部のCMSコマンドエリアにある、履歴ナビに表示されているコンテンツの名前をクリックして開くこともできます。
ここには、グラフィCMSへログインしてから開いたコンテンツの履歴がナビボタンとして追加されていきます。

プロパティ画面の開き方

tree_prop.jpgプロパティの確認を行うコンテンツ（ページ）を開いたうえで、CMSメニューにある【プロパティ】ボタンcmd_prop_s.jpgをクリックするほかに、画面左側のツリービューでプロパティの確認を行うコンテンツの名前を右クリックして表示されるメニューから【プロパティ】を選択して開くこともできます。

スタイルの作成・管理画面の開き方

cm_history_style.jpgグラフィCMSへログインした後、一番最初は、画面上部のCMSメニューにある【スタイル】ボタンcmd_style_s.jpgをクリックして“スタイルの作成・管理画面”を開きますが、２度目からは、CMSコマンドエリアの履歴ナビの【*スタイル*】をクリックしても“スタイルの作成・管理画面”を開くことができます。

メニューバーの作成・管理画面の開き方

cm_history_menu.jpgグラフィCMSへログインした後、一番最初は、画面上部のCMSメニューにある【メニューバー】ボタンcmd_menu_s.jpgをクリックして“メニューバーの作成・管理画面”を開きますが、２度目からは、CMSコマンドエリアの履歴ナビの【*メニューバー*】をクリックしても“スタイルの作成・管理画面”を開くことができます。

スタイルシートによるレイアウトのバリエーション

作成したスタイルシートを使って、どの様にレイアウトを指定できるかを確認してみましょう。
そして、公開するWebサイトを、どのようなレイアウトにするかを決めてください。
もう一度、スタイルの作成・管理画面を開き、定義済みスタイルのリストから、"myStyle"を選びます。

デフォルト (myStyle) での設定

layout_001.jpg

これが、デフォルトのレイアウトで、設定は以下のようになっています。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
と記述されています。これは、"default.css"、"globalnavi_left.css"、"bothsidebarmenu.css"という3つのcssファイルを読み込んで（@import)、スタイルを定義する、という意味です。
  • 最初の"default.css"というのは、全体のレイアウトやデザインの基本を設定しているもので、必ず最初に読み込む必要があります。このcssで、バナーエリアやフッタの基本設定、コンテントボディの幅を可変にする、見出しやリンクの表示のさせ方のデフォルトを設定しています。
    • デフォルトでは、バナーエリアの高さは70px、左右のローカルナビの幅は200pxになっています。変更の方法は、後で説明します。
    • 文字の大きさは、ブラウザの［表示］－［文字のサイズ（拡大・縮小）］で相対的に変化します。Webサイトによっては、文字のサイズを固定している例も見受けられますが、Webサイトにおけるユニバーサルデザインを考慮し、文字のサイズが可変であることが望ましいと言われています。
  • 次の行の"globalnavi_left.css"で、グローバルナビを左寄せで表示させる設定をしています。
  • 最後の"bothsidebarmenu.css"では、ローカルナビを左右とも表示させる設定をしています。

バナーエリアを表示させない設定

バナーエリアを表示させないようにできます。即ち、以下のような設定です。
  • バナーエリアを非表示
  • グローバルナビを左寄せで表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleの、design.cssの定義の内容に、
@import url(/design/161/default.css);
@import url(/design/161/no_banner.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
layout_002.jpgと、１行追加します。そして【スタイルの修正】ボタンをクリックしてください。これで、スタイルシート"myStyle"で表示するように設定されているページは、すべてバナーエリアが非表示になります。
※注：公開されているページについても、スタイルシートの変更はすぐに反映されますので、修正は、充分に注意して行ってください。
実際に、“メインページ”へ戻り、右のように表示されていることを確認してください。
このように、スタイルの作成・管理画面でスタイルシートを修正し、“メインページ”へ戻ってその表示を確認する、という手順で、以降のレイアウトのバリエーションを試してみてください。

フッタを表示させない設定

layout_003.jpg

フッタを表示させないようにできます。即ち、以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビを左右とも表示
  • フッタを非表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/no_footer.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
と、記述します。

グローバルナビを右寄せで表示する設定

layout_004.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを右寄せで表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_right.css);
@import url(/design/161/bothsidebarmenu.css);
と、記述します。

グローバルナビを表示させない設定

layout_005.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを非表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/no_globalnavi.css);
@import url(/design/161/bothsidebarmenu.css);
と、記述します。

ローカルナビ（左）を表示させない設定

layout_006.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビ(右）だけを表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/rightsidebarmenu_right.css);
と、記述します。

ローカルナビ（右）を表示させない設定

layout_007.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビ(左）だけを表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/leftsidebarmenu_left.css);
と、記述します。

ローカルナビを左右とも表示させない設定

layout_008.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビを両方とも非表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/no_sidebarmenu.css);
と、記述します。

ローカルナビ（左）を右側に表示させる設定

layout_009.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビ(左）を右側に表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/leftsidebarmenu_right.css);
と、記述します。

グローバルナビを左側に表示し、ローカルナビ(右）を右側に表示させる設定

layout_010.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左側に縦に表示
  • ローカルナビ(右）を右側に表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalandrightsidebarmenu_leftright.css);
と、記述します。

グローバルナビを左側に表示し、ローカルナビ(左）を右側に表示させる設定

layout_011.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左側に縦に表示
  • ローカルナビ(左）を右側に表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalandleftsidebarmenu_leftright.css);
と、記述します。

グローバルナビを左側に表示し、ローカルナビ(左）ローカルナビ(右）表示しない設定

layout_012.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左側に縦に表示
  • ローカルナビ(左）ローカルナビ(右）をいずれも非表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalandnosidebarmenu.css);
と、記述します。

全体の幅を特定のピクセル数で固定する設定

パソコンの画面は多様化しており、ホームページもブラウザの画面の幅に併せて表示される方がよいのですが、デザイン等の都合から、どうしても画面の幅を固定にしたい場合、たとえば、デフォルトのレイアウトで800ピクセルに固定するならば、上記のimportの設定の後に、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);

#contentFrame {
   width:800px;
}
と記述を追加してください。800pxよりブラウザの画面が広い場合には、全体が左寄せで表示されます。
ブラウザの画面の中でセンタリング（中央揃え）したい場合には、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);

#contentFrame {
   width:800px;
   margin:0 auto;
}
と記述してください。

バナーエリアのカスタマイズ

tree_002.jpg

ここからは、あらかじめ用意されているサンプルページをもとにして、説明を進めていきます。CMS画面左側のツリービューの "Web sample page/MyCorp"の部分をクリックしてください。
"Web sample page/MyCorp"以下は、仮想の会社のWebサイトを想定したサンプルで構成されています。この内容は、実際にプロモグラフィCMSによるサンプルサイトで公開しておりますので、ご覧になってください。

バナーエリアの構成

Custom_banner001.jpg

バナーエリアは、大きくわけると、
  • ロゴマークの画像
  • キャッチコピーなどのテキスト
  • 背景画像
から構成されています。
これらのうち、ロゴマークの画像と、テキストは、“メニューバー”で定義されています。
背景画像については、“スタイルシート”で指定されています。
また、それぞれがどのように表示されるかについても“スタイルシート”で指定されています。
ロゴマーク画像には、公開した時にそのWebサイトのトップメージへのリンクが貼られます。
まず、“メニューバー”でバナーエリアについてどのように定義するのかについて説明します。

メニューバーの定義内容（バナーエリア）

"Web sample page"では、メニューバーとして"web-Sample"が指定されています。（"Web sample page"のプロパティ画面で確認してみてください）
この"web-Sample"でどのように定義しているか説明します。

手順

  1. sel_menu.jpg画面上部のCMSメニューにある【メニュー】ボタンcmd_menu_s.jpgをクリックすると、右のようなメニューが表示されますので、一番上の【メニューバーの作成・管理】を選択します。
  2. sel_menu02.jpgメニューバーの作成・管理画面になりますから、この画面にある【登録済みメニューバー】のなかから、"web-Sample"をクリックしてください。“メニューバー web-Sample の定義”が表示されます。

定義の内容について

定義の内容は以下のようになっています。
*banner
TEXT=豊かな暮らしと未来に向けて
logo=logo_sample.jpg
*left
recentupdate
*right
TEXT=こちらもご覧ください。
link=http://www.graphy.co.jp,Image:banner001.jpg
link=http://www.graphy.co.jp,Image:banner002.jpg
link=http://www.graphy.co.jp,Image:banner003.jpg
link=http://www.graphy.ne.jp,Image:GraphyBanner.png
Google
*footer
LINK=/Web sample page/MyCorp/プライバシーポリシー,プライバシーポリシー
LINK=/Web sample page/MyCorp/サイト利用規定,サイト利用規定
LINK=/Web sample page/MyCorp/サイトマップ,サイトマップ
TEXT=Copyright © 2008 All rights reserved.
TEXT=《無断転載・引用等はお断わりいたします》
メニューバーでは"*banner"、"*left"、"*right"、"*footer"のタグによりそれぞれ、バナーエリア、ローカルナビ（左）、ローカルナビ（右）、フッタの領域の内容をそれぞれ定義しています。
つまり、バナーエリアについての定義は、
*banner
TEXT=豊かな暮らしと未来に向けて
logo=logo_sample.jpg
の3行ということになります。
見ておわかりのように、バナーエリアに表示されている“豊かな暮らしと未来に向けて”というテキストと、ロゴ画像として"logo_sample.jpg"というファイルが指定されています。テキストの色やそれぞれの表示位置などについては、“スタイルシート”で指定されています。

専用のメニューバーを作成し、バナーエリアをカスタマイズする

それでは、新しく"myMenu"というメニューバーを作成してみましょう。

手順

  1. 画面上部のCMSメニューにある【メニューバー】ボタン cmd_menu_s.jpgをクリックし、一番上の【メニューバーの作成・管理】を選択します。
  2. create_newMenu01.jpgメニューバーの作成・管理画面になりますから、この画面にある【新規メニューバーの登録】で、"myMenu"と入力しボタンをクリックします。（この"myMenu"という名前のメニューバーをこの説明では使用していきます。実際には、自由に名前をつけてください。）
  3. def_menu.jpgmyMenuというメニューバーが作成され、デフォルトの内容が定義されています。

ロゴ画像とテキストの変更

myLogo.jpg右のようなロゴ画像（以下の説明では"myLogo.jpg"という画像ファイルがパソコン上に用意されているものとします）に変更し、バナーエリアに表示される文字列を“世界に平和を！”という文章に変更してみます。ロゴ画像は幅371ピクセル、高さ63ピクセルの大きさです。

手順

  1. 一旦、myMenuの定義を全て削除し、下の3行を新しく記述します。
    *banner
TEXT=世界に平和を！
logo=myLogo.jpg
  2. 【メニューバーの修正】ボタンをクリックすると、修正した内容に更新されます。何か変更を加えた時には、このボタンをクリックすることを忘れないでください。
  3. sel_logoimg.jpgメニューバーの作成・管理画面にある【参照】ボタンをクリックすると、“ファイルの選択”ダイアログが表示されますので、ロゴ画像が保存されているフォルダへ移動し、"myLogo.jpg"を選択して【開く】ボタンをクリックします。
  4. メニューバーの作成・管理画面の【新しい素材をアップロード】ボタンをクリックすると、パソコンからグラフィCMSへ、ロゴ画像がアップロードされます。
  5. up_logoimg.jpgアップロードが完了すると、“このメニューバーに関連するファイル”として"myLogo.jpg"が登録されていることが表示されます。

新しいバナーエリアの確認

変更したバナーエリアの設定を、"Web Sample page/MyCorp"に適応してどのように表示されるかを確認します。

手順

  1. web_sample.jpg左側のツリービューの"Web Sample page/MyCorp"をクリックしてページを表示させます。このページのスタイルシートは"web-Sample-Top"が指定されており、グローバルメニューを左側に、ローカルナビ（右）を右側に表示させています。
  2. 【プロパティ】ボタンcmd_prop_s.jpgをクリックしプロパティ画面を表示させ、メニューバーの設定を"web-Sample"から"myMenu"へ変更します。
  3. ブラウザの設定のよって画面のキャッシュが残っていると、変更が反映されない場合がありますので、もう一度左側のツリービューの"Web Sample page"をクリックしてページを再表示させます。
  4. web_sample_myMenu.jpgロゴ画像とテキストが更新されました。"myMenu"には、ローカルナビやフッタの定義をまだ行っていませんので、右側の部分に余白ができていますし、フッタも表示されていません。また、myLogo.jpgが大きいため、下側のエリアへはみ出して表示されています。まずスタイルシートを修正してロゴ画像が綺麗に表示されるようにしましょう。

スタイルシートの修正

手順

  1. copy_org_style.jpgこのページに、いま指定されているスタイルシート"web-Sample-Top"をもとにして、新しく"myWeb-Top"というスタイルシートを作成します。
  2. 最初に【スタイル】ボタンcmd_style_s.jpgをクリックし、“スタイルの作成・管理”画面を開き、定義済みスタイルのリストの"web-Sample-Top"をクリックします。
  3. copy_org_style02.jpg次に、 新規スタイル名:のテキストボックスに"myWeb-Top"と入力し、【表示中のスタイルをコピー】ボタンをクリックします。
  4. myWeb-top01.jpgこれで、スタイルシート"web-Sample-Top"をもとに、新しい"myWeb-Top"というスタイルシートが作成されました。ここで、一度、【スタイルの修正】をクリックしておきましょう。この定義では、コンテントボディの"H1"タグ（見出し）に関する定義も行っていますが、この定義については、“見出しのデザイン”のところで説明します。
  5. デフォルトの定義では、バナーエリアの高さが70ピクセル、ロゴ画像は、画面の左5ピクセル、上25ピクセルの位置から表示するように定義されています。これを、画面の上3ピクセルの位置から表示させるように変更します。
  6. 以下の3行を定義の最後に追加し、【スタイルの修正】ボタンをクリックして下さい。
    #contentBanner img.logoImage {
    top:3px;
}
  7. web_sample_myMenu02.jpg左側のツリービューの"Web Sample page/MyCorp"をクリックしてページを表示させます。

Tips: バナー画像にpngを使用する場合

説明で使用したロゴ画像は白地の上にロゴが描かれていますが、透過GIFや透過PNG画像を使用して文字やマークの周囲を透明にしたい場合があります。この場合、透過GIFおよび8bitの透過PNGの場合には、全てのブラウザで表示されますが、24bitの透過PNGを使用する場合、MicrosoftのIE6 (Internet Explorer 6)では、透明な部分が灰色で描画されてしまいます。

バナーエリアの高さや背景を変更する

高さを調節する

バナーエリアの高さを100pxへ変更してみます。スタイルシート"myWeb-Top"に以下の定義を追加します。
#contentBanner {
    height:100px;
}
トップページでは、グローバルナビを左側へ表示するレイアウトを指定います。この場合には、さらに、以下の定義を追加します。グローバルナビをバナーエリアの下側へ左寄せ、或いは右寄せで表示させるレイアウトを使用している場合には、この定義は書かないでください。
#globalNavi {
    top:100px;
}
web_sample_myMenu03.jpg"Web Sample page/MyCorp"の表示を更新し、変更した結果が反映されていることを確認して下さい。

背景画像、文字のサイズ・色を変更する

banner_back01.jpgサンプルでは、背景画像に青色が右側から左へだんだん白へと変化している画像を使用しています。これを、右の布地肌の画像をバナーエリアに敷き詰める定義に変更します。画像は"banner_back01.jpg"というファイル名でパソコン上に用意されているものとして説明いたします。また、文字の大きさを大きくし、色もクリーム色に変更します。

手順

  1. myWeb-top02.jpgまず、背景となる画像をグラフィCMSへアップロードします。そのために“スタイルの作成・管理”画面へ移動し、定義済みスタイルから"myWeb-Top"をクリックします。
  2. メニューでロゴ画像をアップロードしたのと同様に、【参照】ボタンをクリックし、ファイルの選択ダイアログで、背景画像を指定し、【新しい素材をアップロード】ボタンをクリックして下さい。
  3. 右の画面の、“このスタイルに関連するファイルは、"/design/170" ディレクトリに配置されます。”という表示に注目して下さい。ここの"170"というのは、スタイルシートを新しく作成した際に付与されるID（管理番号）です。この説明では、"170"になっていますが、この値は新しく作成する毎に異なっています。以下の説明で出てくる"170"という部分を、実際に表示されている番号に置き換えて修正を行ってください。（※注：スタイルシートの冒頭でインポートしている部分の"161"という番号は変更しないでください）
  4. 以下のように、#contentBannerの部分に、背景画像に関する定義を3行と、新しくバナーエリアの文字に関する4行の定義を追加し、【スタイルの修正】ボタンをクリックしてください。
    #contentBanner {
    height:100px;
    background-image:url(/design/170/banner_back01.jpg);
    background-position:left top;
    background-repeat:repeat;
}

#contentBanner p {
    font-size:240%;
    color:#fcfcce;
}
web_sample_myMenu04.jpg"Web Sample page/MyCorp"の表示を更新し、変更した結果が反映されていることを確認して下さい。

背景色を工夫する

適当な背景画像が準備できない場合には、背景色を指定することで対応します。この場合には、下記のように、背景画像を使用しない定義にし、文字のサイズや色を定義します。また、ロゴエリアの高さが広がったので、ロゴ画像の表示される位置もずらしてみます。
#contentBanner {
    height:100px;
    background-color:#cc0000;
    background-image:none;
}

#contentBanner p {
    font-size:240%;
    color:#fcfcce;
}

#contentBanner img.logoImage {
    top:30px;
}
web_sample_myMenu05.jpgこの場合の背景の色は、ロゴ画像の周囲の色を指定していますが、ロゴの色、文字の色などとのバランスを考慮して自由に指定してください。

ロゴ画像と文字の配置を逆にする

ロゴ画像を右側に、文字をもう少し大きくして左側に配置してみます。
#contentBanner p {
    float:left;
    font-size:300%;
    color:#fcfcce;
}

#contentBanner img.logoImage {
    top:30px;
    left:auto;
    right:20px;
}
web_sample_myMenu06.jpg上のように、"#contentBanner p" のブロックと"#contentBanner img.logoImage"のブロックを修正してください。

ローカルナビの表示を調整する

ローカルナビの設定をしていませんので、先頭のimportの部分の、
@import url(/design/161/globalandrightsidebarmenu_leftright.css);
の1行を、
@import url(/design/161/globalandnosidebarmenu.css);
web_sample_myMenu07.jpgと修正してください。

グローバルナビの設定とデザイン

global_org.jpgここからは、あらかじめ用意されているサンプルページのなかから、"Web sample page/MyCorp/会社案内"のページをもとにして、説明を進めていきます。
グローバルナビは、公開するホームページの中でも、特に重要なページへのリンクを、常にメニューのように表示しておくエリアです。グローバルナビとして表示させるかどうかは、各ページのプロパティで設定します。

グローバルナビへの表示設定

prop_corp.jpgグローバルナビへ表示させる場合には、ページのプロパティ画面の“グローバルナビ”の項目にチェックを入れ、グローバルナビで表示させる文字列を入力します。
グローバルナビでは、表示させる文字列を文字コードでソートして表示させるようになっています。そのため、文字コードとは関係なく並び順を指定したい場合には、右図のように"05:会社案内"と文字列の先頭に"05:"という数字を付加し5番目に表示されるように指定しています。この"05:"という部分は並び順を指定するために使われ、グローバルナビでは表示されません。
サンプルの"Web sample page/MyCorp"以下では、
ページ 設定文字列
Web sample page/MyCorp 01:HOME
事業案内 02:事業案内
News一覧 03:News
プレスリリース 04:プレスリリース
会社案内 05:会社案内
問合せ 06:問合せ
と、それぞれのページのプロパティで指定されており、上の図のような順序でグローバルナビエリアへ表示されます。
※注：グローバルナビを右寄せで表示させるようにスタイルシートで設定した場合には、右から順に表示されますので、見た目では逆になります。

グローバルナビのデザインの変更

最初に、グローバルナビと次に説明するローカルナビの設定・カスタマイズのために、スタイルシートとメニューバーを専用に作成しておきます。

準備の手順

  1. バナーエリアを変更した時と同じように、スタイルシート"web-Sample-corp"をもとに、新しく"myWeb-Corp"というスタイルシートをコピーして作成しておいてください。この定義では、コンテントボディの要素に関する定義も行っていますが、この定義については、“コンテントボディの設定”のところで説明します。
  2. バナーエリアのカスタマイズの項で、カスタマイズしたバナーエリアのデザインと統一をはかるために、下の内容をimportの後ろに追加しておいて下さい。
    #contentBanner {
    height:100px;
    background-color:#cc0000;
    background-image:none;
}

#contentBanner p {
    float:left;
    font-size:300%;
    color:#fcfcce;
}

#contentBanner img.logoImage {
    top:30px;
    left:auto;
    right:20px;
}
  3. また、メニューバーも、スタイルシートと同様に、メニューバー"web-Sample-corp"をもとにして、"myMenu-Corp"という名前でコピーして作成してください。そして、*bannerの部分を"myWeb-Top"と同じ内容にし、その他の部分を下のように修正してください。
    *banner
TEXT=世界に平和を！
logo=myLogo.jpg
*left
TEXT=会社案内
LINK=/Web sample page/MyCorp/会社案内,会社概要
LINK=/Web sample page/MyCorp/会社案内/メッセージ,メッセージ
LINK=/Web sample page/MyCorp/会社案内/沿革,沿革
LINK=/Web sample page/MyCorp/会社案内/アクセスマップ,アクセスマップ
LINK=/Web sample page/MyCorp/会社案内/採用情報,採用情報
TEXT=お知らせ
publicinfo=sample,200,200
*right
Google
*footer
LINK=/Web sample page/MyCorp/プライバシーポリシー,プライバシーポリシー
LINK=/Web sample page/MyCorp/サイト利用規定,サイト利用規定
LINK=/Web sample page/MyCorp/サイトマップ,サイトマップ
TEXT=Copyright © 2008- All rights reserved.
TEXT=《無断転載・引用等はお断わりいたします》
  4. また、"myMenu"でアップロードしたロゴ画像"myLogo.jpg"をこのメニューバー"myMenu-Corp"に対してもアップロードしてください。
  5. chg_prop_corp.jpg最後に、"Web sample page/MyCorp/会社案内"のページのプロパティ画面を開き、スタイルシートを"myWeb-Corp"に、メニューバーを"myMenu-Corp"へ変更してください。そして、“このコンテンツ以下すべてに適用する”にチェックをし、【保存】ボタンをクリックしてください。これで、"Web sample page/会社案内"の下位にある“アクセスマップ”、“メッセージ”、“採用情報”、“沿革”のページも同じ設定になります。
  6. web_sample_myCorp01.jpg"Web sample page/MyCorp/会社案内"のページの描画を更新すると、右のように表示されることを確認してください。

グローバルナビのデザインの変更

バナーエリアの色に合わせて、グローバルナビの色などを変更します。
デフォルトでは青色のグラデーションの背景の上に文字が黒色、区切りの縦線が濃い青色になっていますが、これを、背景をバナーエリアと同じ色、文字を白色、区切りを白の点線にします。また、マウスがナビの上に重なった時には、ナビの背景が白色、文字を濃い赤色に変化させます。
#globalNavi {
    border-top:solid 1px #ffffff;
    background-image:none;
    background-color:#cc0000;
}

#globalNavi ul li {
    border-right:dotted 1px #ffffff;
}

#globalNavi ul li a {
    color:#ffffff;
}

#globalNavi ul li a:hover {
    color:#880000;
    background-image:none;
    background-color:#ffffff;
}
上の定義を、スタイルシート"myWeb-Corp"に追加します。全体では、下のようになります。
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);

#contentBanner {
    height:100px;
    background-color:#cc0000;
    background-image:none;
}

#contentBanner p {
    float:left;
    font-size:300%;
    color:#fcfcce;
}

#contentBanner img.logoImage {
    top:30px;
    left:auto;
    right:20px;
}

#globalNavi {
    border-top:solid 1px #ffffff;
    background-image:none;
    background-color:#cc0000;
}

#globalNavi ul li {
    border-right:dotted 1px #ffffff;
}

#globalNavi ul li a {
    color:#ffffff;
}

#globalNavi ul li a:hover {
    color:#880000;
    background-image:none;
    background-color:#ffffff;
}

#contentBody .fontRed {
    color:#ff0000;
    font-weight:bold;
}

#contentBody .fontBold {
    font-size:110%;
}

#contentBody .fontStrike {
    color:#cccccc;
    font-weight:normal;
}

#contentLocalNavi1 p {
    color:#ffffff;
    font-size:110%;
    line-height:1.5;
    background-color:#192f60;
}

#contentLocalNavi1 a {
    color:#ffffff;
    padding:0 0 0 30px;
    margin:0 0 0 0;
    text-align:left;
    font-size:100%;
    line-height:2;
    background-image:none;
    background-color:#28a3a3;
    border-left: solid 20px #192f60;
    border-bottom: solid 1px #ffffff;
}
web_sample_myCorp02.jpgこの内容で、スタイルシートを修正し、。"Web sample page/MyCorp/会社案内"のページが、右のように表示されることを確認してください。

ローカルナビの設定とデザイン

表示項目の変更

いま、メニューバー"myMenu-Corp"の内容は下記のようになっています。
*banner
TEXT=世界に平和を！
logo=myLogo.jpg
*left
TEXT=会社案内
LINK=/Web sample page/MyCorp/会社案内,会社概要
LINK=/Web sample page/MyCorp/会社案内/メッセージ,メッセージ
LINK=/Web sample page/MyCorp/会社案内/沿革,沿革
LINK=/Web sample page/MyCorp/会社案内/アクセスマップ,アクセスマップ
LINK=/Web sample page/MyCorp/会社案内/採用情報,採用情報
TEXT=お知らせ
publicinfo=sample,200,200
*right
Google
*footer
LINK=/Web sample page/MyCorp/プライバシーポリシー,プライバシーポリシー
LINK=/Web sample page/MyCorp/サイト利用規定,サイト利用規定
LINK=/Web sample page/MyCorp/サイトマップ,サイトマップ
TEXT=Copyright © 2008- All rights reserved.
TEXT=《無断転載・引用等はお断わりいたします》
myLogo02.jpgこれを、フッタに表示している、プライバシーポリシー等を"会社案内"以下のページでは、ローカルナビ（左）へ表示させるように変更します。また、ローカルナビ（右）へは、グループ会社への右の画像（"myLogo02.jpg"）を使って、バナーリンクを貼ります。そのために"myLogo02.jpg"をアップロードしておきます。
*banner
TEXT=世界に平和を！
logo=myLogo.jpg
*left
TEXT=会社案内
LINK=/Web sample page/MyCorp/会社案内,会社概要
LINK=/Web sample page/MyCorp/会社案内/メッセージ,メッセージ
LINK=/Web sample page/MyCorp/会社案内/沿革,沿革
LINK=/Web sample page/MyCorp/会社案内/アクセスマップ,アクセスマップ
LINK=/Web sample page/MyCorp/会社案内/採用情報,採用情報
TEXT=サイト案内
LINK=/Web sample page/MyCorp/プライバシーポリシー,プライバシーポリシー
LINK=/Web sample page/MyCorp/サイト利用規定,サイト利用規定
LINK=/Web sample page/MyCorp/サイトマップ,サイトマップ
TEXT=お知らせ
publicinfo=sample,200,200
*right
TEXT=グループ会社
LINK=http://www.graphy.ne.jp,Image:myLogo02.jpg
Google
*footer
TEXT=Copyright © 2008- All rights reserved.
TEXT=《無断転載・引用等はお断わりいたします》
web_sample_myCorp03.jpg上記のように、変更します。:"LINK="で指定されているアドレスは、公開されているWebサイトへの場合には、
"http://www.graphy.ne.jp,Image:myLogo02.jpg"
のように、URLを指定します。グラフィCMSで作成している公開予定のページの場合には、
"LINK=/Web sample page/MyCorp/会社案内,会社概要"
のようにグラフィCMS内部でのページ名規則に従ってページ名を記述してください。
",会社概要"のように","に続けて文字列を指定した場合には、その文字列にリンクが貼られ、
",Image:myLogo02.jpg"のように画像ファイルを指定した場合には、その画像に対してリンクが貼られます。

色の変更

バナーエリアの色に合わせて、ローカルナビ（左）の色を変更するため、下記のように修正します。
#contentLocalNavi1 {
    border:solid 1px #ff8888;
}

#contentLocalNavi1 p {
    color:#000000;
    font-size:110%;
    line-height:1.5;
    background-color:#ffeeee;
}

#contentLocalNavi1 a {
    color:#ffffff;
    padding:0 0 0 30px;
    margin:0 0 0 0;
    text-align:left;
    font-size:100%;
    line-height:2;
    background-image:none;
    background-color:#cc0000;
    border-left: solid 20px #cc4444;
    border-bottom: solid 1px #cc4444;
}

#contentLocalNavi1 a:hover {
    color:#ffff00;
}
web_sample_myCorp04.jpgローカルナビ（右）の外枠を黒色から、#ff8888という薄い赤色へ、また、"TEXT="で表示する文字列の色を白から黒へ、背景色を#ffeeeeという薄いピンク色、"LINK="で表示されるリンクの背景をバナーエリアと同じ#cc0000という赤色へ変更します。
また、リンクにマウスカーソルが重なった時に変化する色を紫から黄色へ変更します。

特殊なキーワードについて

メニューバーの定義で使用できる、あらかじめ特定の機能をサポートしたキーワードがあります。現在、以下のキーワードが用意されています。

publicinfo

こちらは、Webサイトで簡単に“ニュース”や“お知らせ”を表示させるための機能です。
メニューバー"webSample-Corp"や、カスタマイズした"myWeb-Corp"で使用しています。
publicinfo=sample,200,200
この記述の意味は、
  • ページ"/PublicInfo/sample"に記述されている内容を表示
  • 表示する高さを200ピクセル、幅を200ピクセルにする
という意味です。
"/PublicInfo"の下に、"main"、"support"、"sale"などのページを作成しておいて、社内用、サポートページ用、商品情報用などに使いわけることもできます。
※注：一般のページの内容は、【公開】という手順によってWebサイトで公開されますが、この機能を使用して表示される"/PublicInfo"以下のページの内容は、【公開】という手順とは全く関係なく、常に最新の内容がWebサイトで表示されますので、その内容については充分ご注意ください。
また、この機能では、簡単なメッセージを表示することを主眼においており、一般のページで表示される画像や、テーブル等は正しく表示されません。見出しと本文で構成してください。

google

Google社の検索エンジンを利用した検索用ガジェットです。ローカルナビ（右）、ローカルナビ（左）で使用することを想定しています。
google
と記述してください。メニューバー"webSample"や、カスタマイズした"myWeb"などで使用しています。

recentupdate

グラフィCMSで、新しく作成、編集されたコンテンツの直近のもの20件が表示されます。基本的には、社内用の情報としてローカルナビ（右）、ローカルナビ（左）に表示させるためのもので、Webサイトで公開した場合には、何も表示されません。
recentupdate
と記述してください。メニューバー"cms-Default"で使用していますので、参考にしてください。

フッタの設定とデザイン

フッタは、その性格上、シンプルなデザインが多いようです。ここでは、バナーエリアを同じ色を背景色にし、文字の色を白色に指定します。スタイルの作成・管理画面で、スタイルシート"myWeb-Corp"に、以下のブロックを追加してください。
#contentFooter {
    color:#ffffff;
    background-color:#cc0000;
}

#contentFooter a {
    color:#ffffff;
    border-left: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
}
web_sample_myCorp05.jpgメニューバー"MyMenu-Corp"では、いまのところリンクは貼られていませんが、定義された場合のために、リンクの文字の色等も定義しています。

全体の背景色・背景画像の変更

frame_back01.jpg全体が白地に赤色で、若干ハデな感じになっています。右のような金属地の画像を背景に敷き詰め、調子を整えてみます。画像は"frame_back01.jpg"というファイル名でパソコン上に用意されているものとして説明いたします。
スタイルシートの作成・管理画面で、スタイルシート"myWeb-Corp"を開き、"frame_back01.jpg"を新しい素材としてアップロードします。そして、
#contentFrame {
    background-color:#aaaaaa;
    background-image:url(/design/171/frame_back01.jpg);
    background-repeat:repeat;
}
web_sample_myCorp07.jpgと記述してください。上記の"171"は、“バナーエリアの高さや背景を変更する”でも説明したように、スタイルシートの管理番号です。スタイルシートの作成・管理画面に実際に表示されている数字を記述してください。
背景画像ではなく、背景色を指定する場合には、やはり、スタイルシートの作成・管理画面でスタイルシート"myWeb-Corp"を開き、
#contentFrame {
    background-color:#aaaaaa;
}
web_sample_myCorp06.jpgの3行を追加修正してください。これで、バナーエリア、グローバルナビ、ローカルナビ、コンテントボデイ以外の部分が、落ち着いたグレーになります。

Webサイト全体の確認と調整

さて、ここまでトップページ、会社概要のページを参考に、メニューバーやスタイルを変更してきました。
しかし、その他のページはまだ以前のままです。
ページ名 メニューバー スタイルシート
MyCorp myMenu myWeb-Top
サイトマップ web-Sample web-Sample-common
サイト利用規定 web-Sample web-Sample-common
プライバシーポリシー web-Sample web-Sample-common
プレスリリース web-Sample web-Sample-common
事業案内 web-Sample web-Sample-common
事業案内/サービス web-Sample web-Sample-common
事業案内/商品事例 web-Sample web-Sample-product
事業案内/商品事例/商品詳細 web-Sample web-Sample-common
事業案内/業務実績 web-Sample web-Sample-common
事業案内/業務実績2 web-Sample web-Sample-common
会社案内 myMenu-Corp myWeb-Corp
会社案内/アクセスマップ myMenu-Corp myWeb-Corp
会社案内/メッセージ myMenu-Corp myWeb-Corp
会社案内/採用情報 myMenu-Corp myWeb-Corp
会社案内/沿革 myMenu-Corp myWeb-Corp
問合せ web-Sample web-Sample-common
News一覧 web-Sample web-Sample-common
最初に、メニューバー"myMenu"にはまだバナーの情報しか定義されていませんので、メニューバーの作成・管理画面で、"myMenu"にローカルナビ（右）とフッタの情報を追加します。画像"myLogo02.jpg"も忘れずにアップロードしておいてください。
*banner
TEXT=世界に平和を！
logo=myLogo.jpg
*left
*right
TEXT=グループ会社
LINK=http://www.graphy.ne.jp,Image:myLogo02.jpg
Google
*footer
LINK=/Web sample page/MyCorp/プライバシーポリシー,プライバシーポリシー
LINK=/Web sample page/MyCorp/サイト利用規定,サイト利用規定
LINK=/Web sample page/MyCorp/サイトマップ,サイトマップ
TEXT=Copyright © 2008- All rights reserved.
TEXT=《無断転載・引用等はお断わりいたします》
次に、スタイルの作成・管理画面で、"myWeb-Top"を開き、左側に表示されているグローバルナビの色も変更しておきましょう。バナーエリアの高さを変更した部分に、以下の項目を追加します。
#globalNavi {
    top:100px;
    border-top:solid 1px #444444;
    background-image:none;
    background-color:#cc0000;
    background-color:transparent;
}

#globalNavi ul li {
    background-image:none;
    background-color:#cc0000;
    border:double 3px #ffffff;
}

#globalNavi ul li a {
    color:#ffffff;
}

#globalNavi ul li a:hover {
    color:#880000;
    background-image:none;
    background-color:#ffffff;
}
web_sample_myMenu08.jpgこれで、赤地（#cc0000）に白色でリンク文字が表示され、それぞれは白色の二重線で囲まれます。また、マウスカーソルがリンクに重なったときの文字の色は暗い赤（#880000）になり、"Web sample page/MyCorp"は右のように表示されます。
さらに、スタイルシートの作成・管理画面で、会社概要のページで行ったフッタの変更と背景の変更を、スタイルシート"myWeb-Top"にも定義しなければなりません。
しかし、これらの定義や、この後で説明するコンテントボディに関する定義などは、まだ変更を行っていないページに対しても同じように定義しなければなりません。それぞれに同じ内容のものを定義していっても良いのですが、少し色を変更しただけで複数のスタイルシートを変更しなければならなくなり、効率もわるく、修正洩れが発生したりであまりよいとはいえません。
そこで、全てに対して共通な部分だけを集めたスタイルシートを１つ作成し、それをそれぞれでimportすることにします。そうすれば、共通な部分だけを集めた１つのスタイルシートを変更すれば、全てのページのデザインの修正が終ることになります。
create_newStyle02.jpgスタイルの作成・管理画面で、新しく"myWeb-library"という名前のスタイルシートを作成し、その定義を以下のようにします。（【スタイルの修正】ボタンをクリックすることを忘れないでください。）
#contentFrame {
    background-color:#aaaaaa;
}

#contentBanner {
    height:100px;
    background-color:#cc0000;
    background-image:none;
}

#contentBanner p {
    float:left;
    font-size:300%;
    color:#fcfcce;
}

#contentBanner img.logoImage {
    top:30px;
    left:auto;
    right:5px;
}
#globalNavi {
    border-top:solid 1px #ffffff;
    background-image:none;
    background-color:#cc0000;
}

#globalNavi ul li {
    border-right:dotted 1px #ffffff;
}

#globalNavi ul li a {
    color:#ffffff;
}

#globalNavi ul li a:hover {
    color:#880000;
    background-image:none;
    background-color:#ffffff;
}

#contentFooter {
    color:#ffffff;
    background-color:#cc0000;
}

#contentFooter a {
    color:#ffffff;
    border-left: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
}

#contentBody .fontRed {
    color:#ff0000;
    font-weight:bold;
}

#contentBody .fontBold {
    font-size:110%;
}

#contentBody .fontStrike {
    color:#cccccc;
    font-weight:normal;
}
style_library.jpgこれは、全てのページで共通のバナーエリアの設定、フッタの設定、背景の設定と、後で説明するコンテントボディの文字修飾に関する設定です。また、トップページ以外で共通に表示させるグローバルナビの設定も記述しておきます。これまで使用してきたimportに関する部分がないことに注意してください。
右の画面では、"/design/194/design.css"と表示されています。これがこの説明で作成したスタイルシートの定義が記録されているファイル名です。importでは、このファイル名を使用します。この説明を読みながらスタイルシートを作成された場合に、スタイルシートの作成・管理画面に実際に表示されているファイル名をメモしておいてください。
スタイルの作成・管理画面で、"myWeb-Top"を開き、その内容を以下の内容にします。
以前、追加したバナーエリアの設定を削除し、新たに、importの最後の部分に今作成したスタイルシートを読み込む設定を追加しています。
※注："@import url(/design/194/design.css)"のファイル名の部分は、先程メモしておいたファイル名に変更してください。
@import url(/design/161/default.css);
@import url(/design/161/globalandnosidebarmenu.css);
@import url(/design/161/list_li_2box.css);
@import url(/design/194/design.css);

#globalNavi {
    top:100px;
}

#globalNavi {
    border-top:solid 1px #aaaaaa;
    background-image:none;
    background-color:#cc0000;
    background-color:transparent;
}

#globalNavi ul li {
    background-image:none;
    background-color:#cc0000;
    border:double 3px #ffffff;
}

#globalNavi ul li a {
    color:#ffffff;
}

#globalNavi ul li a:hover {
    color:#880000;
    background-image:none;
    background-color:#ffffff;
}

#contentBody h1 {
    color:#ffffff;
    border: none;
    background-color:transparent;
    background-image:url(/design/162/sample_top.jpg);
    background-position: center center;


    background-repeat: no-repeat;
    height:290px;
    text-align:center;
    font-style: normal;
    font-weight: normal;
    font-size:180%;
    line-height:1.5;
    vertical-align:bottom;
    margin:0px 0px 0px 0px;
    padding:0 .5em 0 .5em;
    clear:both;
}
#contentBody h2, h3, h4, h5 {
    border-color:#000000;
}
スタイルシートの先頭で、
@import url(/design/161/default.css);
@import url(/design/161/globalandnosidebarmenu.css);
@import url(/design/161/list_li_2box.css);
と指定しています。これは“あらかじめ、グラフィCMSで用意されている基本的なレイアウトやデザインが定義されたファイルを読み込んで使う”という意味です。
これに、
@import url(/design/194/design.css);
の1行を追加しました。これは、新しく貴方が"myWeb-library"で定義した、バナーエリアのレイアウトや、グローバルナビの色などを共通のデザインとして使用するために読み込んで使いますという意味になります。
web_sample_myMenu09.jpgこれで、"Web sample page/MyCorp"ページは右のようにバナーエリア、フッタ、背景の共通のデザインが適用されて表示されます。
同様に、スタイルの作成・管理画面で、"myWeb-Corp"を開き、定義の内容を以下のようにします。共通の定義を読み込むことにより、このスタイルでは、左側に表示するローカルナビ（左）に関するものだけになります。
※注："@import url(/design/194/design.css)"のファイル名の部分は、先程メモしておいたファイル名に変更してください。
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
@import url(/design/194/design.css);

#contentLocalNavi1 {
    border:solid 1px #ff8888;
}

#contentLocalNavi1 p {
    color:#000000;
    font-size:110%;
    line-height:1.5;
    background-color:#192f60;
    background-color:#ffeeee;
}

#contentLocalNavi1 a {
    color:#ffffff;
    padding:0 0 0 30px;
    margin:0 0 0 0;
    text-align:left;
    font-size:100%;
    line-height:2;
    background-image:none;
    background-color:#28a3a3;
    background-color:#cc0000;
    border-left: solid 20px #192f60;
    border-left: solid 20px #cc4444;
    border-bottom: solid 1px #cc4444;
}

#contentLocalNavi1 a:hover {
    color:#ffff00;
}
ここで、残りのページのためのスタイルシート"myWeb-common"を新規に作成しておきましょう。レイアウトとして、ローカルナビ(右）を右側に表示させるようになっていますので、3行目の内容を変更し、4行目を追加して、【スタイルの修正】ボタンをクリックしてください。
※注："@import url(/design/194/design.css)"のファイル名の部分は、先程メモしておいたファイル名に変更してください。
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/rightsidebarmenu_right.css);
@import url(/design/194/design.css);
web_sample_sitemap01.jpg"サイトマップ"のページの設定を変更してみましょう。
prop_sitemap.jpg"サイトマップ"のページのプロパティ画面を表示し、スタイルシートを"myWeb-common"へ、メニューを"myMenu"に変更し、【保存】ボタンをクリックします。
web_sample_sitemap02.jpg"サイトマップ"のページを再描画させると、右のようにスタイルとメニューバーが新しいものへ変更されたことがわかります。
同様にプロパティ画面からそれぞれのページのスタイルとメニューバーを変更して下さい。“このコンテンツ以下すべてに適用する”というチェックボックスを上手に使えば、それほど時間はかかりません。
ページ名 メニューバー スタイルシート
MyCorp myMenu myWeb-Top
サイトマップ myMenu myWeb-Common
サイト利用規定 myMenu myWeb-Common
プライバシーポリシー myMenu myWeb-Common
プレスリリース myMenu myWeb-Common
事業案内 myMenu myWeb-Common
事業案内/サービス myMenu myWeb-Common
事業案内/商品事例 myMenu myWeb-Common
事業案内/商品事例/商品詳細 myMenu myWeb-Common
事業案内/業務実績 myMenu myWeb-Common
事業案内/業務実績2 myMenu myWeb-Common
会社案内 myMenu-Corp myWeb-Corp
会社案内/アクセスマップ myMenu-Corp myWeb-Corp
会社案内/メッセージ myMenu-Corp myWeb-Corp
会社案内/採用情報 myMenu-Corp myWeb-Corp
会社案内/沿革 myMenu-Corp myWeb-Corp
問合せ myMenu myWeb-Common
News一覧 myMenu myWeb-Common

コンテントボディの設定とデザイン

スタイルシート"Web-Sample-common"など、スタイルシートで
@import url(/design/161/default.css);
とデフォルトのスタイルをimportしているスタイルを適用した場合のデザインと、その変更方法について説明していきます。

見出しのデザイン

グラフィCMSで、ページの原稿に
=大見出しのサンプル=
==中見出しのサンプル==
===小見出しのサンプル===
と記述すると、

大見出しのサンプル

中見出しのサンプル

小見出しのサンプル

と表示されます。
全体を赤色基調のページになってきましたので、現在の見出しの色を青色から黒色へ変更します。
スタイルの作成・管理画面で、"myWeb-library"を開き、
#contentBody h1 {
    border-color:#000000;
    border-right:solid 15px #000000;
    border-top:solid 1px #000000;
}
#contentBody h2 {
    border-color:#000000;
}
#contentBody h3 {
    border-color:#000000;
}
#contentBody h4 {
    border-color:#000000;
}
#contentBody h5 {
    border-color:#000000;
}
web_sample_library01.jpgという記述を追加してください。これで、全てのページの見出しのボーダー（周囲の飾り枠）の色が黒色になります。また、大見出しは、左側と下側だけだったボーダーを右側と上側にも追加しています。

見出しの特殊な使い方

edit_cms.jpg"Web sample page/MyCorp"を開き、画面上部のCMSメニューにある【編集】ボタンcmd_edit_s.jpgをクリックすると、このトップページの原稿（ソース）を編集する画面になります。
cms_edit_mode.jpgグラフィCMS画面のコンテントビューの部分が右のように変わります。
ページの原稿（ソース）を編集する編集ボックスと、下側にその原稿のプレビューエリアになります。編集ボックスの上部には、選択した文字列の書式を変更するための書式コマンドが表示されています。
また、CMSコマンドの部分も、原稿の【保存】、【プレビュー】などに変化します。
edit_cms_01.jpg編集ボックスに表示されている、原稿の最初の行に注目してください。大見出しで“株式会社○○○は、地球と人々の豊かな暮らしと未来にむけてチャレンジをし続けます”と書かれていて、次に中見出しで“事業・サービス案内”と書かれています。
プレビュー画面を見てみると、通常の大見出しのボックスはなく、画像が表示され、その上に重なるように白色で文字が表示されていますが、画像の指定はありません。
この部分については、スタイルシートで定義されているのです。
スタイル作成・管理画面で、"myWeb-Top"を開いてみてください。その最後のところで、以下のように大見出しについての定義がされています。
文字を白色（#ffffff）にし、画像の周囲の枠をなくし、スタイルシート"web-sample-top"の定義にアップロードしてある"/design/162/sample_top.jpg"という画像を見出しの背景画像として上下左右の中央に表示させています。見出しの高さは290ピクセルに固定し、文字も中央揃えで表示させています。
#contentBody h1 {
    color:#ffffff;
    border: none;
    background-color:transparent;
    background-image:url(/design/162/sample_top.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    height:290px;
    text-align:center;
    font-size:180%;
    line-height:1.5;
    margin:0px 0px 0px 0px;
    padding:0 .5em 0 .5em;
}
myWeb_top.jpg右のような画像（"myWeb_top.jpg"）を背景に設定してみます。この画像は、ブラウザが横に広くなっていても対応できるように、幅が1200ピクセルあります。また、全体の背景画像で使用した画像のように連続して表示しても繋がるような画像を使う方法もあります。
スタイルの作成・管理画面で"myWeb-Top"を開いた状態で、背景画像をアップロードし、
    background-image:url(/design/xxx/myWeb_top.jpg);
と変更します。"xxx"の部分は、スタイルの作成・管理画面で実際に表示されている番号に変えてください。
    height:200px;
web_sample_myMenu10.jpgと見出しの高さも調整すると、トップページ"Web sample page/MyCorp"は右のようになります。
一般的にWebサイトのトップページでは、このような画像の上に文字を重ねてアイ・キャッチにしている例があります。
その場合、文字をデザインして画像として表示させることによってより美しく見せようとします。しかしSEO（検索エンジン対策）としては、良いとはいえません。
一番重要なキャッチコピーを大見出しで表示させることによって、検索されやすくなり、また、検索結果の表示内容がよりよくなります。
このような使い方は非常に特殊ですので多用することはお勧めしませんが、デザイン等でどうしてもこのような表現を実現したい場合に、ご参考にしてください。

文字修飾のデザイン

グラフィCMSでは、原稿の文字列に対して、強調、斜体、取消線、赤字とういう文字修飾を施すことができます。
“全体の確認と調整”の説明のところで作成したスタイルシート"myWeb-library"では、
#contentBody .fontRed {
    color:#ff0000;
    font-weight:bold;
}

#contentBody .fontBold {
    font-size:110%;
}

#contentBody .fontStrike {
    color:#cccccc;
    font-weight:normal;
}
web_sample_library02.jpgと、記述することによって、
  • 赤字は、さらに文字を太く（bold）
  • 強調はさらに文字の大きさを大きく（110%）
  • 取消線では、文字の色をグレー（#cccccc）
にしています。
右の画像は、"Web sample page/MyCorp/事業案内/商品事例/商品詳細"の画面ですが、“ねこ・バーミーズ”の部分が“強調”、“原産地（製造元）”の“製造元”の部分が“打消線”、“〈アドバイス〉”以降が“赤字”になっています。
スタイルの作成・管理画面で"myWeb-library"を開き、赤字の定義と打消線の定義を少し変えてみます。
#contentBody .fontRed {
    color:#eb6101;
    font-weight:bold;
}

#contentBody .fontBold {
    font-size:110%;
}

#contentBody .fontStrike {
    color:#ff0000;
    font-weight:normal;
}
web_sample_library03.jpg赤字は、朱色（#eb6101)へ、打消線の文字の色を赤色（#ff0000）へ、それぞれ変更しました。“製造元”を削除し価格の“21万円”に打消線を指定すると、右のようになります。

リンク（URL）のデザイン

スタイルシート"Web-Sample-common"など、スタイルシートで
@import url(/design/161/default.css);
とデフォルトのスタイルをimportしているスタイルを適用した場合、リンクのデザインは以下のようになっています。
必要に応じて、書式を選んで使用してください。

【標準】

グラフィCMSで、
[http://www.graphy.ne.jp プロモグラフィ]
と記述すると、
プロモグラフィ
のように表示されます。

【斜体】

グラフィCMSで、
''[http://www.graphy.ne.jp プロモグラフィ]''
と記述すると、
プロモグラフィ
のように、グラデーションのかかった背景画像の上にリンクの文字が表示されます。また、マウスカーソルがリンクに重なったときは赤味がかった背景画像に変わります。

【赤字】

グラフィCMSで、
'''''[http://www.graphy.ne.jp プロモグラフィ]'''''
と記述すると、
プロモグラフィ
のように"NEW"という画像が表示されます。マウスカーソルがリンクに重なったときは影のないフラットな画像に変わります。

デザインの変更

web_sample_library07.jpg標準のリンクで下線があると見にくくなる場合があるため、下線を表示しないようにし、その変わりに文字を太くします。
斜体の場合の背景画像をやめ、標準より強調ということで、文字をバナーの背景と同じ赤色（#cc0000）にし、マウスカーソルが重なった場合には、反転させるようにしてみます。
赤字の場合にも、他のリンクと同様に文字を太くしておきます。
スタイルの作成・管理画面で"myWeb-library"を開き、下記の定義を追加してください。
#contentBody a {
    font-weight:bold;
    text-decoration:none;
}

#contentBody a:hover {
    color:#cc0000;
}

#contentBody i a {
    color:#cc0000;
    background-image: none;
    font-weight:bold;
    background-color:#ffffff;
    padding:0 .5em 0 .5em;
}

#contentBody i a:hover {
    color:#ffffff;
    background-image: none;
    background-color:#cc0000;
}

#contentBody .fontRed a {
    font-weight:bold;
}
web_sample_library08.jpg右のようにデザインが変更されます。

テーブルのデザイン

グラフィCMSで、原稿に以下のように記述すると、
{|class="wikitable"
!項目名１!項目名2
|-
|奇数行項目1|奇数行項目2
|-
|偶数行項目1|偶数行項目2
|-
|奇数行項目1|奇数行項目2
|-
|偶数行項目1|偶数行項目2
|}
このような表を作成することができます。
項目名１ 項目名2
奇数行項目1 奇数行項目2
偶数行項目1 偶数行項目2
奇数行項目1 奇数行項目2
偶数行項目1 偶数行項目2
スタイルシートで定義を行うことで、枠や項目名の背景の色、さらに奇数行、偶数行での異なった定義を行うことができます。
スタイル作成・管理画面で、"myWeb-library"を開き、下記の内容を追加してください。
#contentBody .tableBox {
    border: double 3px #000000;
}

#contentBody .tableHeader th {
    color: #ffffff;
    background-color: #000044;
    border-bottom: solid 1px #000000;
}

#contentBody .tableRow1 td {
    color: #000000;
    background-color: #ffffff;
    border-right: dotted 1px #000000;
    border-bottom: solid 1px #000000;
}

#contentBody .tableRow2 td {
    color: #000000;
    background-color: #ddffff;
    border-right: dotted 1px #000000;
    border-bottom: solid 1px #000000;
}
web_sample_library04.jpg罫線を黒（#000000）、見出しの背景色を、暗い青（#000044）に、奇数行の背景色を白（#ffffff）、偶数行の背景色を薄い水色（#ddffff）へ変更しています。この設定で"Web sample page/MyCorp/会社案内/採用情報"のページを見ると右のようになります。

箇条書による段組のデザイン

グラフィCMSでは3種類の箇条書きが用意されています。

単純な箇条書

グラフィCMSで、ページの原稿に
*レベル１
**レベル２
***レベル３
****レベル４
と記述すると、
  • レベル１
    • レベル２
      • レベル３
        • レベル４
のように表示されます。

番号付き箇条書

グラフィCMSで、ページの原稿に
#レベル１
##レベル２
###レベル３
###レベル３
##レベル２
###レベル３
####レベル４
####レベル４
#レベル１
##レベル２
###レベル３
####レベル４
と記述すると、
  1. レベル１
    1. レベル２
      1. レベル３
      2. レベル３
    2. レベル２
      1. レベル３
        1. レベル４
        2. レベル４
  2. レベル１
    1. レベル２
      1. レベル３
        1. レベル４
のように表示されます。

タイトル付き箇条書

グラフィCMSで、ページの原稿に
;タイトル
:説明文
;タイトル
:説明文
と記述すると、
タイトル
説明文
タイトル
説明文
のように表示されます。

箇条書による段組

web_sample_library05.jpgこの箇条書を使ってカタログページで使われるような段組を表現してみます。
"Web sample page/MyCorp/事業案内/商品事例"のページを見てください。このページは元はスタイルシート"web-Sample-product"が設定されていましたが、“全体の確認と調整”のところで、"myWeb-common"を適用するようにしました。従って、右のように商品の案内が箇条書で縦に長く表示されています。
スタイルの作成・管理画面で、新しいスタイルシート"myWeb-product"を作成し、その内容を以下のように記述してください。
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/rightsidebarmenu_right.css);
@import url(/design/161/list_li_nbox.css);
@import url(/design/161/list_ol_2box.css);
@import url(/design/194/design.css);
※注："@import url(/design/194/design.css)"のファイル名の部分は、スタイルシート"myWeb-library"を作成したときにメモしておいたファイル名に変更してください。
"@import url(/design/161/list_li_nbox.css);"で読み込んでいる定義では、
*[[Image::s-neko2.jpg]]
**ねこ
**(種類:バーミーズ)
**\210,000(税込)
**''[[:商品詳細|>>> 詳細]]''
のように“単純な箇条書”で書かれている原稿の内容を、幅180ピクセル、高さ300ピクセルのボックスの中に表示し、ブラウザの幅に応じて横に並べていきます。
"@import url(/design/161/list_ol_2box.css);"で読み込んでいる定義では、
#ねこ
##[[Image::s-neko1.jpg]]
##(種類:バーミーズ)
##\210,000(税込)
##説明テキスト説明テキスト説明テキスト説明テキスト
##''[[:商品詳細|>>> 詳細はこちら]]''
のように“番号付き箇条書”で書かれている原稿の内容を、幅がコンテントボディの約半分、高さが180ピクセルのボックスの中に表示していきます。従って、こちらはブラウザの幅に関係なく、２つずつ表示されることになります。１つのボックスの中では画像とテキストがそれぞれ半分の幅を占めますので、ブラウザの幅が狭くなると、画像と文字が重なる場合があります。
web_sample_library06.jpg"Web sample page/MyCorp/事業案内/商品事例"を開き、そのプロパティ画面で、スタイルを"myWeb-common"から"myWeb-producct"に変更し、画面を再描画してください。右のように、段組表示されます。

Copyright © 2008- All rights reserved.

《無断転載・引用等はお断わりいたします》