e コミグループウェア

テーマのカスタマイズとページ作成の応用（ユーザー編）
バナーを変えるだけでオリジナルなサイトに！！
カラムの幅を変更することはもちろん、カラム数を変更することもできます。
また、トップメニュー（ナビゲーション）をつけるだけで Web サイト⾵の作りに⾒せることもできます。
その他、トップページとサブページでテーマを使い分けることで、より Web サイトらしいページを作成する⽅法もご紹介します。
難しい知識は必要ありません。
ぜひトライしてみてください！

2015 年 11 ⽉
国⽴研究開発法⼈ 防災科学技術研究所

目次
1

2

3

4

テーマのカスタマイズ ............................................................................................. 2
1-1

テーマのカスタマイズとは................................................................................... 2

1-2

テーマのカスタマイズでできること.......................................................................... 2

1-3

テーマのカスタマイズ例 ..................................................................................... 2①バナーの変更 ............................................................................................. 2②パーツタイトルのデザインの変更 ........................................................................ 3③カラム幅の変更 ........................................................................................... 3④カラム数の変更 ........................................................................................... 3

1-4

テーマのカスタマイズの前に（基本のおさらい） ........................................................... 4

1-5テーマのカスタマイズをしてみよう ......................................................................... 5①バナーを変更してみよう .................................................................................. 5②パーツタイトルのデザインを変更してみよう ............................................................ 6③カラム幅を変更してみよう ............................................................................... 10④カラム数を変更してみよう ............................................................................... 12

トップメニューの作成 ............................................................................................. 132-1

トップメニューとは？ ........................................................................................ 132-2

トップメニューの設置例 .................................................................................... 132-3

トップメニューの設定の仕方 ............................................................................... 14

トップページとサブページでのテーマの使い分け .............................................................. 16①

トップページ用テーマとサブページ用テーマの違い ................................................... 16②

テーマを使い分けたサイトの例 ......................................................................... 17③

テーマ使い分けの設定方法 ............................................................................ 18

グループページの作成例........................................................................................ 20
4-1

階層構造を持たないグループページの作成例 .......................................................... 20

4-2

階層構造を持つグループページの作成例 ............................................................... 21

5

応用編（よりよいページ作り） .................................................................................... 22

6

まとめ ............................................................................................................. 23※このマニュアルは、基本的に、「システム管理者」「サイト管理者」の権限を持たないユーザーを対象に作成しています。そのため、e コミ上部メニューにある「ページ設定」の部分から設定できる内容に限っています。

11 テーマのカスタマイズ
1-1 テーマのカスタマイズとは既存のテーマ（数十種類）から、好みのテーマを自由に選択することができますが、テーマをカスタマイズすることでより自分好みのオリジナルなページにすることができます。まず一番おすすめなのは、バナー画像を変更することです。バナー画像を変更するだけで簡単に自分だけのオリジナルなグループページになります。その他にもいくつかカスタマイズできる点がありますのでご紹介します。

1-2 テーマのカスタマイズでできること
テーマのカスタマイズでできることは主に次の 4 点です。
① バナーの変更② パーツタイトルのデザインの変更③ カラム幅の変更④ カラム数の変更

1-3 テーマのカスタマイズ例①

バナーの変 更一番簡単にサイトのイメージを変更することができるのはバナー画像の変更です。バナー画像を変更しただけで、下記のように独自性のあるグループページになります。
バナー変更例

元のテーマ（元のテーマ）2

②

パーツタイトルのデザインの変 更各パーツのテキストの色、背景の色、背景画像などを変更することができます。

文字色と背景色を変更

背景画像を変更③カラム幅 の変 更

カラムの幅も自由に変更することができます。

デフォルトカラム幅
変更後④

カラム数 の変 更

１カラムから３カラムの範囲内でカラム数を変更することができます。

例）２カラムから３カラムに変更

3

1-4 テーマのカスタマイズの前 に（基 本 のおさらい）
テーマのカスタマイズの前に、まずは基本のおさらいをしてみましょう。
今設定されているテーマから別のテーマに切り替えてみます。
＜基本のおさらい（テーマの変更方法を確認してみよう）＞

1
1. 「ページ設定」をクリック

3

2

3. 好きなテーマを選択し、下部にある「保存する」をクリック

2. 「テーマ変更」をクリック

5

4

4. 「ページを表示」をクリック

テーマが切り替わりました

基本のおさらいもできましたので、次からいよいよテーマのカスタマイズをしていきましょう！

4

1-5 テーマのカスタマイズをしてみよう①

バナーを変 更 してみよう

バナー画像を変更するだけで、オリジナルなサイトになります。バナー画像さえ準備すれば、e コミ上では簡単な操作だけでバナー画像を変更することができます。

2

1
1. 「ページ設定」をクリック

3

2. 「ヘッダー画像変更」
をクリック

画像の大きさを確認し、それと同サイズの画像を用意します。
（大きさが違ってもアップはできますが、縦横比の比率がおかしくなったり、画像が荒くなったりします）

3.ファイルを選択する

5

4

4.「保存する」をクリック

これで、バナーを変更することができました。

5

②

パーツタイトルのデザインを変 更 してみよう

パーツタイトルのデザインは、全パーツ一括で変更することもできますし、カラムごと、パーツごとのように部分的に変更することもできます。

 （パターン１）パーツタイトルの背景色と文字色を変更してみよう

1
1. 「ページ設定」をクリック

3

2

2. 「パーツタイトル変更」をクリック

3. 「適用範囲」を選択 （ここでは「全パーツ一括」を選択）

4
4. 背景色の欄をクリックすると、色選択画面が出てくるので、好みの色を選択

655. 同様に文字色も選択

66. 「プレビュー」をクリック「プレビュー中」と表示されている

7

7. 確認したらこのページを閉じる

8
8. 「保存する」をクリック

9
パーツの背景色と文字色が実際のページにも変更されました。

今回の例では、全パーツ一括で変更しましたが、カラムごと、パーツごとのように部分的に変更することもできます。

7 （パターン２）パーツタイトルの背景画像を変更してみよう
まず、パーツタイトルの背景画像を適した大きさで用意しておくことが必要です。大きさによっては、パーツタイトル内にうまく全部入りきらなかったり、位置調整が必要な場合がありますので、適用してみて、調整が必要な場合は背景画像の大きさや位置を修正します。

1
PNG、JPG、GIF などの形式で背景画像を準備しておきます。
1.背景画像を準備

2
2. 「ページ設定」をクリック

34

4. 適用範囲を選択（今回は「カラム毎一括」を選択）

3. 「パーツタイトル変更」をクリック

55. ファイルを選択

8

6

6. 「プレビュー」をクリック「プレビュー中」と表示されている

7

7. 確認したらこのページを閉じる
重なってみえるが、ログアウトするときちんと表示される

8

8. 「保存する」をクリック

9

実際のページに反映されました。
（ログアウトしたときの表示）9③

カラム幅 を変 更 してみよう

カラム幅も自由に変更することができます。メインカラムとサイドカラムの幅を変更する、もしくは、メインカラムとサイドカラムの位置を入れ替える、というようなことが可能です。
＜カラムについての基礎知識＞
左から順番に「カラム１」

カラム 1「カラム２」と呼びます。こカラム２

れはすべてのテーマで共通です。

 カラム幅を変更する。
まずは左右のカラム幅を変更してみましょう。例えば、サイドカラムの幅を広げたいときは、サイドカラムの幅を広げた分だけメインカラムの幅を縮めます。

1
1. 「ページ設定」をクリック

2

3

数字を変更すると「使用可能幅」の数値が変わるので、それを参考に値を入力する。

2. 「テーマ変更」をクリック

3. 数字を変更

44. 「プレビュー」
をクリック

5「プレビュー中」と表示

10

5. 確認したらこのページを閉じて保存すると、カラム幅が保存されます。

 メインカラムを左右で入れ替える
メインカラムとは、ブログの編集画面や、ブログの個別記事などが表示されるカラムのことをいいます。そのため、広いカラムにメインカラムを指定します。デフォルトテーマでは基本的に一番幅が広いカラムをメインカラムとしていますが、カラム幅を変更して、一番広いカラムの位置を変更した場合、メインカラムの場所を指定し直す必要があります。

1
1. 「ページ設定」をクリック

3
2
3 メインカラムの位置を入れ替える
入れ替えた状態

2. 「テーマ変更」をクリック
4. 数字を入れ替える

4

5. 「保存する」をクリック

カラム入れ替え前

カラム入れ替え後

メインカラム：2 カラム目

メインカラム：1 カラム目

左右のカラム幅の大きさが入れ替わり、メインカラムの位置も入れ替わりました。
パーツを移動して、見せたい表示に修正しましょう。

11

④

カラム数 を変 更 してみようカラム数は１カラムから３カラムの範囲内で、自由に変更することができます。カラム数を減らす場合には１点注意事項があります。例えば、３カラムを２カラムにする場合、一番右のカラム（カラム３）が見えなくなりますので、事前にカラム３のパーツをカラム１か２へ移動しておいてください。

＜例：２カラムのテーマを３カラムに変更する＞
1

1. 「ページ設定」をクリック

3

2「カラム 3」の幅を指定する欄が表示されます。

2. 「3 カラム」を選択

45
3. 幅を調整し、プレビューで確認して OK だったら保存する

3 カラムで表示された同様に、「２カラム→１カラム」「３カラム→２カラム」など、1 カラムから 3 カラムの範囲でカラム数を変更することができます。カラム数を変更したときは、メインカラムの位置に注意しましょう。必要があれば、メインカラムの位置を変更します。

12

2 トップメニューの作 成
2-1 トップメニューとは？
複数ページのサイトを作成するときに利用するもので、全ページに共通に設置する案内メニューのことを指します（別名「グローバルナビゲーション」と言います）。ユーザーを目的のコンテンツページへ導き、サイト全体のコンテンツ構成を分かりやすくする目的もあります。e コミでは、簡単にトップメニューを設定することができます。

トップメニュー
デフォルト

トップメニュー設定後デフォルトではトップメニューは設置されていません。

2-2 トップメニューの設 置 例
トップメニューを設置した例です。どのページにもすべて同じトップメニューが設置されているので、お互いのページへの行き来がしやすくなります。
トップページ

サブページ

トップメニュー
サイトマップ

お問い合わせ概要
インフォメーション13

2-3 トップメニューの設 定 の仕 方トップメニューを設定してみましょう。e コミでは、トップメニューを最大８つまで設定することができます。

1
1. 「ページ設定」をクリック

2

2. 「トップメニュー設定」をクリック

34

3. リンク先を選択。ここでは「サブサイトからグループページを選択」を選択
トップメニューの設定は、最大８つまで可能です。

14

5
4.関連するページが表示されるので、どれかを選択

関連するページとは、現在設定中のページ、親ページ、子ページなどです。親ページ、子ページについては別マニュアルをご覧ください。わからない方は「４」で、「URL直接入力」から入力してください。

6

6. 作成したいすべてのメニューでこれらを設定し、「保存する」をクリック
5. メニュー名を記載

7
トップメニューが設定されました

リンク付けしたすべてのページに対してこれと同じ作業をすれば完成です。
サイト管理者・システム管理者の場合、トップメニューをテンプレートで設定することができるので効率的です。つまりテンプレートでトップメニューを設定しておけば、そのテンプレートを利用しているすべてのグループページで同じトップメニューを利用することができます。詳しくは、「テンプレート・デザインマニュアル（管理者編）」をご覧ください。

これでだいぶＷｅｂサイトらしくなってきましたね！

15

3 トップページとサブページでのテーマの使い分 け
トップページとサブページでテーマを使い分けてみましょう。テーマを使い分けることで、よりWeb サイトらしい作りに見せることができます。

①

トップページ用 テーマとサブページ用 テーマの違 い

トップページ用のテーマにはバナーがあり、サブページにはありません。また、トップページ用テーマには「パンくずリスト」がありませんが、サブページ用のテーマにはあります。
トップページ

サブページ

パンくずリストバナー

このように「トップページ用」と「サブページ用」のテーマがあるものから選択します。

バナー画像

パンくずリスト

トップページ○×

サブページ×○16

②

テーマを使 い分 けたサイトの例

トップページとサブページでテーマを使い分けた例です。トップメニューを追加したことで、関連する各ページへの行き来がしやすくなり、ユーザーにサイト全体のコンテンツ構成を分かりやすく明示することができます。

トップページ

サブページ

トップメニュー

サイトマップ

お問い合わせインフォメーション

概要＜トップページとサブページの階層構造について＞補足

左図のパンくずリストをみるとわかるように、「親ページ（トップページ） > 子ページ（サブページ）」と表示されています。このような階層構造にするためには、グループページを作る際に階層構造まで考えてから作成する必要があります。

パンくずリスト

グループページ新規作成画面
グループページ作成の際にサブページとして作成するときには、親ページ（トップページ）を指定します

後から階層構造を変更するには、「システム管理者」「サイト管理者」の権限が必要になります。階層構造を後から変更したいときは、この権限を持つユーザーに相談してください。
このような制約があるため、グループページを作成する時点で、階層構造まで考えて作成することをおすすめします。

17

③

テーマ使 い分 けの設 定 方 法

テーマ使い分けの方法といっても難しいことはありません。トップページにはトップページ用のテーマを、サブページにはサブページ用のテーマを選択するだけです。
1. トップページのテーマを変更する

1
1. 「ページ設定」をクリック

23

このように「トップページ用」と「サブページ用」のテーマがあるものから選択します2. 「テーマ変更」をクリック
3. トップページ用テーマを選択

5

4

4. バナーを変更

テーマが変更されました

せっかくなので、オリジナルのバナーに変更しておきましょう

18

2.サブページのテーマを変更する

1
1. 「ページ設定」をクリック

2

3

3. サブページ用テーマを選択

2. 「テーマ変更」をクリック

4

関連するすべてのサブページでこちらのテーマに設定すれば完了です。

テーマが変更されました

19

4 グループページの作 成 例
4-1 階 層 構 造 を持 たないグループページの作 成 例単ページとして作成する場合の作成例です。「ブログパーツ」をメインに、「イベントカレンダーパーツ」、「掲示板パーツ」を設置することで、自治会メンバー同士の交流がはかれるようになっています。パーツごとに公開範囲をうまく使い分けるといいでしょう。

20

4-2 階 層 構 造 を持 つグループページの作 成 例
関連するページをもつ Web サイト風のページの例です。トップメニューから各ページへいくことができます。ポイントは、トップページには「ブログパーツ」を置かずに、「ワッツニューパーツ」を置いているところです。インフォメーションのページで「ブログパーツ」を使って情報を投稿し、それがトップページの「ワッツニューパーツ」で表示されるようになっています。このようにすることで、トップページがすっきりとしますし、最新の投稿には「New」マークが表示されるようになります。
トップページサブページ

ワッツニューパーツ

サイトマップ

お問い合わせインフォメーション
インフォメーション
ブログパーツ概要

21

5 応 用 編 （よりよいページ作 り）
html ソースがわかる方は、見出し、箇条書き等のタグを使い、より見やすくわかりやすいページを作成してみてください。見出しや、箇条書き等を使い、きちんとした階層構造でソースを書くことで、より見やすく、伝わりやすいページになります。また、正しい構文で書くことが、検索されやすいページ作りへとつながります。

<h1>見出し 1</h1><h2>見出し 2</h2><h3>見出し 3</h3>・・・<ul class="sideMenu"><li><a href="#">トップページ</a></li><li><a href="#">お知らせ</a></li><li><a href="#">お問い合わせ</a></li><li><a href="#">サイトマップ/a></a></li></ul><div class="btn_entry"><a href="http://xxx/">お問い合わせ</a></div>

e コミのデフォルトスキンは、上記の class に対応していますので、html や CSS が分かる方はぜひ活用してみてください！
22

6 まとめページを作成し、テーマを適用し、必要なパーツを追加するだけでグループページは出来上がりますが、そこから少し手を加えるだけで、より見た目に伝わりやすい、より使い勝手のいいページになります。最後に、今までの情報を踏まえて、グループページを作成する際のフローの例を簡単にご紹介します。こちらを参考に、ぜひグループページを作成してみてください。

①

グループページの構成を練る

グループページを作成する際は、単ページにするか、階層構造を持つページにするかをあらかじめ考えておきましょう。そのとき、設置したいパーツについても考えておきます。

②

グループページを作成する

単ページの場合は 1 ページだけグループページを作成すれば OK です。階層構造を持つサイトを作成する場合は、必要な数だけグループページを作成します。サブページ作成の際は、「親ページの指定」に注意してください（P17 の補足をご覧ください）。

③

必要なパーツを追加し、いらないパーツを削除する

グループページに配置したいパーツを追加し、適切な場所に移動します。その際にパーツタイトルや公開範囲、基本設定などもしてしまいましょう。いらないパーツは削除します。

④

必要があれば、テーマをカスタマイズしましょう

デフォルトのバナーから、そのグループページに適したバナーに変更します。カラム数、カラム幅などを変更したり、パーツタイトルのデザインを変更し、より自分の見せたいページに近づくようにしてみましょう。

⑤

階層構造を持つページの場合はトップメニューを追加しましょう

関連するグループページの分だけトップメニューを設定します。

⑥

中身を充実させましょう

グループページは作成しただけではただの入れ物です。中身を充実させることが大切です。
ブログを投稿したり、掲示板で意見を交わしたり、イベントカレンダーでさまざまなイベント情報を告知して、多くの人に見てもらい参加してもらえるようなページ作りを目指しましょう。

皆さんもぜひオリジナリティのある中身の充実したページを作ってみてくださいね！

23

24

テーマのカスタマイズとページ作成の応用（ユーザー編）発

⾏

日：平成２７年１０⽉

制作・著作：国⽴研究開発法⼈ 防災科学技術研究所
http://risk.bosai.go.jp
e コミ公式サイト
http://ecom-plat.jp/25