e コミグループウェア

テンプレート・デザイン（管理者編）
システム管理者とサイト管理者が設定することのできる「テンプレート」と「テーマ（デザイン）」についてご紹介します。
テンプレートは理解するのに少し難しい部分があるかもしれませんが、使いこなせるようになると⼤変便利な機能ですので、ぜひ使いこなしてみてください。

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

目次
1「テンプレート」と「テーマ」について ............................................................................................................................................ 22

テンプレート ......................................................................................................................................................................................... 3

3

42-1

テンプレートの使いどころ .................................................................................................................................................... 3①

同じようなページを複数作りたい。 .............................................................................................................................. 3②

Web サイト風ページを作りたい。 .................................................................................................................................. 4③

複数のグループページでデザインや機能を統一したり制約を設けたい。 .................................................. 4

2-2

テンプレートの作成方法 ....................................................................................................................................................... 5①

テンプレートの作成方法（１）－ページから作成－ ................................................................................................ 6②

テンプレートの作成方法（２）－新規作成－........................................................................................................... 10③

テンプレートの作成方法（３）－複製－ .................................................................................................................... 112-3

テンプレートをグループページに適用する .................................................................................................................. 12①

新規グループページ作成時にテンプレートを適用する..................................................................................... 12②すでにあるグループページに後からテンプレートを適用する。...................................................................... 13

2-4

テンプレートをグループページから切り離す .............................................................................................................. 14

2-5

テンプレートを適用したグループページのパーツ設定を変更する .................................................................... 15

2-6

テンプレートを編集する ...................................................................................................................................................... 17

2-7

テンプレートを削除する ...................................................................................................................................................... 18

テーマ................................................................................................................................................................................................... 19
3-1

テーマとは ................................................................................................................................................................................ 19

3-2

テーマの構成要素 ................................................................................................................................................................ 19

3-3

テーマの編集画面 ................................................................................................................................................................ 20

3-4

テーマを作成する .................................................................................................................................................................. 21①

テーマをダウンロードする ............................................................................................................................................. 21②

ファイルを編集する .......................................................................................................................................................... 21

3-5

テーマを e コミに組み込む ................................................................................................................................................ 25①

FTP を使ってテーマをアップロードして適用する ................................................................................................. 25②

FTP を利用せず、zip 形式に圧縮したテーマを e コミに適用する ................................................................. 26

3-6

e コミ上でテーマを複製、編集して新しいテーマとして登録する......................................................................... 27

3-7

テーマを編集する .................................................................................................................................................................. 28

3-8

テーマを削除する .................................................................................................................................................................. 28

共通 CSS ............................................................................................................................................................................................ 29
4-1

共通 CSS とは ........................................................................................................................................................................ 29

4-2

共通 CSS の編集方法 ........................................................................................................................................................ 29

1

1 「テンプレート」と「テーマ」について「テーマ」はデザインの部分で、テンプレートは、「テーマ（デザイン）」と「パーツ（機能）」を組み合わせて用意しておく雛形のことです。グループページを作成する際、この雛形を適用することで、同様なデザインと機能をもつグループページを簡単に作成することができます。

テンプレートパーツ（機能）の配置と設定
ブロック HTMLブログ

掲示板

検索RSS・・・

テンプレート B

テンプレート A

テーマ A

テーマ B

テーマ（デザイン）の設定

グループページ
A-1

グループページ
B-1

グループページ
A-2

グループページ
B-2

グループページ
A-3

テンプレートのデザインと機能が反映されます

2

グループページ2 テンプレート
2-1

テンプレートの使 いどころ

テンプレートの使いどころは次の 3 つです。
① 同じようなページを複数作りたい。
② Web サイト風ページを作りたい。
③ 複数のグループページでデザインや機能を統一したり制約を設けたい。
それでは、テンプレートの使いどころを順番に見ていってみましょう。

① 同 じようなページを複 数 作 りたい。
一つのテンプレートから複数のグループページを簡単に作成することができます。同じような構成からなるグループページを作成する際に便利です。また、後から複数のグループページを一度に修正する際にも、テンプレートから一括変更することができます。

同じような構成からなる自治会の例（グループページ）

テンプレート＜利点＞
 テンプレート側でデフォルトテーマを設定しておくことができるので、グループページを作るたびにテーマを設定する必要がない。
 テンプレート側で配置するパーツをあらかじめ設定しておくことができるので、グループページを作るたびにパーツを配置する必要がない。
 トップメニューをテンプレート側で一括して設定しておくことができる。
 複数ページで共有する「ブロック HTML パーツ」の中身をテンプレート側で一括して入れておくことができ、変更も一括で行うことができる。

3

② Web サイト風 ページを作 りたい。
Web サイト風ページで、サイドカラムに置くパーツはすべてのページで統一し、テーマもサブページで統一した場合などにもテンプレートを利用すると便利です。また、トップメニューもテンプレートから統一することができます。利点については、「① 同じようなページを複数作りたい」と同じです。

サブページ

トップページ

すべてのページでトップメニューを統一しています。

サイトマップ

すべてのページでサイドカラムのメニューを統一しています。
お問い合わせ概要

インフォメーション③ 複 数 のグループページでデザインや機 能 を統 一 したり制 約 を設 けたい。

＜利点＞
 テーマ（デザイン）をグループページ側で変更できないようにすることができる。
 パーツやパーツの中身自体を複数のグループページで共有することができる。
 削除されたくないパーツをグループページから削除できないように設定できる。
 グループページ側でパーツの設定、名称、公開範囲の変更ができないようにすることができる。
 カラムを固定化することで、グループページ側でパーツの移動ができないようにすることができる。

4

2-2

テンプレートの作 成 方 法

テンプレートの作成方法は次の３種類があります。
① ページから作成

まずグループページを作成し、後からそのグループページをもとにしてテンプレートを作成する方法② 新規作成１からテンプレートを作成する方法③ 複製

すでにあるテンプレートを複製して作成する方法

イメージをつかみながら作成したい場合は、「ページから作成」がおすすめです。

それではさっそく、もっとも作成しやすい「ページから作成」という方法で、テンプレートを作っていきましょう！

5

①

テンプレートの作 成 方 法 （１）－ページから作 成 －まずはグループページを作成し、そのページをもとにしてテンプレートを作成します。テンプレート編

集画面で一から作成するより、ビジュアル的にイメージしやすいでしょう。

1. グループページを準備する
複数ページで同じテーマ（デザイン）、パーツ（機能）を利用することを想定しながらグループページを作成します。以下の 3 点を設定しておきましょう。
1. テーマ
2. 必要なパーツを追加し、不要なパーツを削除
3. パーツのタイトルと公開権限の設定

上記の３点に加え、テンプレートを参照する全てのグループページに表示させたい文言、リンク集などがある場合は、ブロック HTML パーツに記載しておくと便利です。グループページの段階で準備すると見栄えを確認することができます。トップメニューについてはここでは設定しません。

2. テンプレート化する「サイト・システム管理設定」から「グループページのテンプレート」を開きます。

[ページから作成]をクリック①②① テンプレートのタイトルを入力② テンプレートのもとになるグループページを選択（ここでは、先ほど作ったグループページ）③ 「利用制限」は「制限なし」か「管理者のみ」のどちらかを選択。「管理者のみ」の場合、システム管理者かサイト管理者だけがこのテンプレートを選択することができるようになります。

③④⑤④ 「参照する」にチェックを入れると、元にしたグループページもこのテンプレートを参照します。
⑤ 設定が完了したら「作成する」をクリックすることで、テンプレートが作成されます。
※②以外は、後からでも変更可能です。

6

3. テンプレートを編集する[編集]をクリック

テンプレートの編集画面
テーマを変更したり、パーツの追加・削除・移動、カラムの固定化によるパーツ位置の指定、トップメニューの設定等をすることができます。
パーツを追加することができます。

トップメニューを設定できます。
パーツを移動・削除することができます。

パーツをグループページ側で移動されたくない場合、「このカラムを固定」にチェックを入れます。
各グループページで個別にパーツを追加した際には、これらのパーツの下にパーツが追加され、固定パーツ内や上には移動することができません。

7

このテンプレートを参照したグ
ループページの管理者に、テーマ設定の変更を許可しない場合には「許可しない」にチェックを入れます。

4. それぞれのパーツの「表示設定」から詳細を設定する

1 プルダウンリストから「表示設定」を選択

①

②
③
④

2 「登録」をクリック① 「パーツの名前」にチェックを入れるとこのテンプレートを参照するグループページ側で「パーツタイトル」を変更できなくなります。
② 「パーツの公開権限」にチェックを入れるとこのテンプレートを参照するグループページ側で「パーツの公開範囲」を変更できなくなります。
③ 「パーツ固有の設定」にチェックを入れると、このテンプレートを参照するグループページ側でパーツ固有の設定ができなくなります。例えば、ブログパーツや掲示板パーツなら基本設定の変更、ブロック HTML パーツなら記事内容の変更等ができなくなります。
④ 「削除禁止」にチェックを入れると、このテンプレートを参照するグループページ側でこのパーツを削除することができなくなります。

8

5. 必要であれば「トップメニュー」を設定する

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

注1

2 設定するトップメニューが設定されました。

注 1）「ページ管理者にトップメニューの設定の変更を許可しない」にチェックを入れると、このテンプレートを引き継ぐすべてのグループページで、強制的にこのトップメニューが設定されます。チェックを入れないと、グループページ側の選択制になります。

9

② テンプレートの作 成 方 法 （２）－新 規 作 成 －続いて、テンプレート編集画面で、1 からテンプレートを作成する方法です。
まずは、「サイト・システム管理設定」から「グループページのテンプレート」を開きます。

1 [新規作成]をクリック

2 設定する3 [作成する]をクリックすると、テンプレートが追加される

この後は、「テンプレートの作4 [編集]をクリック成方法（１）」と同様に編集して、テンプレートを完成させてください。

補足＜テンプレートの管理画面＞① デフォルトテンプレート② サイト独自のテンプレート

テンプレートの管理画面からテンプレートの一覧を確認することができます。テンプレートは、もともと組み込まれているものと、サイト独自で作成したものの２種類があります。

①

デフォルトテンプレート（「標準２カラム」「標準３カラム」）

ｅコミに共通で入っているデフォルトのテンプレートで、編集、削除することができません。こちらは、テーマ（デザイン）やパーツにおいて制約がありませんので、グループ管理者が自由にグ
ループページの作成・編集、パーツの移動・削除、テーマの変更をすることができます。

②

サイト独自のテンプレート

独自に作ったテンプレートです。「標準２カラム」「標準３カラム」以外のテンプレートのことをいいます。こちらは、システム管理者、サイト管理者が編集・複製・削除することができます。

10

③ テンプレートの作 成 方 法 （３）－複 製 －すでにあるテンプレートを複製して作成する方法です。
まずは、「システム管理設定」から「グループページのテンプレート」を開き、複製元としたいテーマの[複製]をクリック。

1 [複製]をクリック

2 設定する3 [登録する]をクリック

テンプレートが追加されました。

4 [編集]をクリック
この後は、「テンプレートの作成方法（１）」と同様に「テーマの設定」「パーツの追加・移動・削除」「パーツの設定」などを行い、テンプレートを完成させてください。

このように、テンプレートの作成方法は３種類あります。状況に合わせて一番やりやすい方法をご利用ください。

11

2-3

テンプレートをグループページに適 用 する

テンプレートをグループページに適用する方法を二つご紹介します。

① 新 規 グループページ作 成 時 にテンプレートを適 用 する
こちらの設定は、システム管理者、サイト管理者ではなくてもできる設定になります。
「ページ設定」－「新しいグループページを作成」を選択し、「グループページの作成」画面を開きます。

補足＜「親と同じテンプレート」にする場合＞
親ページがあり、親ページと同じテンプレートにしたい場合の方法です。

1 親ページにするグループページを選択

1 適用したいテンプレートを選択

2 その他必要事項を設定して「確認画面へ進む」にチェック

2 「親と同じテンプレート」にチェック

3 その他必要事項を設定して「確認画面へ進む」にチェック
テンプレート側で設定した通りにパーツが配置され、テーマもテンプレートと同じものでグループページが作成されます。

「親と同じテンプレート」にチェックを入れずに、「ページテンプレート」から親と同じテンプレートを指定しても結果は同じになります。

12

② すでにあるグループページに後 からテンプレートを適 用 する。
グループページに後からテンプレートを適用したり、テンプレートを別のものに変更することができます。この設定は、システム管理者かサイト管理者が行うことができます。グループ管理者であっても、システム管理者かサイト管理者ではない場合、この設定を行うことはできません。
まず、テンプレートを適用させたいページを開き、「ページ設定」－「ページテンプレートの変更」を選択します。

1 現在あるパーツの中で残したいものがある場合はチェックを入れる※チェックを入れないと、パーツの中身ごと削除されて元に戻せないのでご注意ください。

2 ページテンプレートを選択する

3 「確認する」→「登録する」をクリック

テンプレート側で設定した通りにパーツが配置されます。「テンプレート変更後にも残すテンプレートパーツ」でチェックを入れているパーツも残ります。
また、テンプレート側でテーマの変更が「許可しない」になっている場合には、テンプレート側で設定しているテーマに自動的に変更されます。

このようにテンプレートの適用は後からでもできますが、なるべく最初の段階でイメージを固めてから新規のグループページに適用することをおすすめします。

13

2-4

テンプレートをグループページから切 り離 す

テンプレートをグループページから切り離す作業は、システム管理者かサイト管理者が行うことができます。グループ管理者であっても、システム管理者かサイト管理者ではない場合、この設定を行うことはできません。

まず、テンプレートから切り離したいグループページを開き、「ページ設定」－「ページテンプレートの変更」を選択します。

2 「確認する」→「登録する」をクリック
1 空白行を選択

これで、グループページからテンプレートを切り離すことができ、テンプレート側からの制約を受けなくなると同時に、テンプレート側からこのグループページの制御ができなくなりました。
再びテンプレートを適用したい場合は、前ページの方法でテンプレートを適用し直してください。

142-5

テンプレートを適 用 したグループページのパーツ設 定 を変 更 するテンプレートを適用したグループページのパーツ設定（パーツの公開範囲の変更、タイトルの編集、パーツ削除等）をしたくても、テンプレート側で「変更を許可しない」に設定している場合（p８参照）、グループページ側では変更することはできません。システム管理者かサイト管理者である場合、テンプレート側の設定を変更することでパーツ設定を変更することができます。

1 [表示設定]をクリック
このグループページが参照しているテンプレートからの制約があるため、「基本設定」「パーツの削除」がグレーアウトされていて選択できないようになっています。

変更したい箇所のあるパーツのプルダウンリストを開きます。上記のように、ここではブログパーツのプルダウンリストを開きましたが、「基本設定」と「パーツ削除」はグレーアウトされていて選択できず、変更できないようになっています。それでは「表示設定」を選択してみましょう。表示設定を開くと、どのテンプレートを適用しているかが表示されています。
2 テンプレート名のリンクテキストをクリック（グループページ側から直接該当するテンプレート画面へ行くことができます）「パーツのタイトル」「公開範囲」
もテンプレート側の制約を受け、変更できなくなっています。

テンプレートへのリンクはシステム管理者、サイト管理者にはリンクテキストとして表示されますが、それ以外のユーザーには、ただのテキストとして表示されます。

15

グループページ側から直接該当するテンプレート画面へ行くことができました。
3 「表示設定」をクリック

4 チェックをはずすと、グループページ側で変更することができるようになります

テンプレートを変更すると、このテンプレートを参照するすべてのグループページ側も同様に変更されます。もし、このテンプレートを適用しているグループの中で、特定のグループページだけ設定を変えたいときは、そのグループページだけ「テンプレートの切り離し」をしてください（「2-6 テンプレートをグループページから切り離す」参照）。
再度グループページを開き、パーツのプルダウンリストより「パーツの表示」を開きます。

今度はすべての設定を変更できるようになっています。

これらにチェックが入っていると、例えテンプレート側で変更を許可していても、テンプレートの制約を受けることになります。テンプレー
ト側の制約を受けたくないときはチェックを外してください。
※ テンプレート側で変更を許可していない場合はチェックを外すことはできません。

ここの部分が分かりづらく勘違いしやすい部分でもあるので注意しましょう。

16

2-6

テンプレートを編 集 する

テンプレートに設定したテーマ、パーツ設定等は後からでも変更することができます。
「システム管理設定」－「グループページのテンプレート」を開きます。

「基本設定」の編集

ページテンプレート名や利用制限を変更することができます。

テンプレートの編集

テーマの変更、パーツの追加・削除・移動、パーツの設定、カラムの固定・固定解除等を行うことができます（詳細は P7 をご覧ください）。

17

2-7

テンプレートを削 除 する

テンプレートを削除すると、それを参照するページとテンプレートとの関係は無くなり、設定の引き継ぎなどは無効になります。それでもいい場合はテンプレートを削除します。

1 [削除]をクリック

削除したいテンプレートを参照しているグループページがある場合、このような注意文が表示されます。

1 [削除する]をクリック

テンプレートが削除されました。
1 [削除する]をクリック

グループページのテンプレートを別のものに変更することができます。「2-5 ②
すでにあるグループページに後からテンプレートを適用する」をご覧ください。また、グループページからテンプレートを切り離すこともできます。「2-6 テンプレートをグループページから切り離す」をご覧ください。

18

3 テーマ3-1

テーマとは前述した通り、テーマとはグループページのデザインのことです。ｅミに初期登録されているテーマは数十種類あり、新しいテーマを追加することも可能です。
ここで作成したテーマは、前テーマ

述した通り、直接グループページに適用したり、テンプ適用

グループページレートに適用しておくことができます。

テンプレート適用

3-2

テーマの構 成 要 素

テーマの構成要素は、4 つのファイルと画像です（画像があれば）。
テーマの構成要素メインとなるファイルは「theme.*」としてくださtheme.tpl

い。テーマをアップロードする場所は、theme01/theme/user/ です。FTP でアップロードした
場合、フォルダとファイルのパーミッションを「777」に変更すると、e コミのテーマ編集画面

theme.cssでの編集が可能になります（特に tpl と css フ

imagesァイル）。
ban.jpg
thum.pngtheme.xml

theme.tpl

ページを構成するファイル。

theme.css

ページのデザインに関わる部分。スタイルシート。

theme.xml

テーマの基本設定。

thum.png

サムネイル（横 150px × 縦 100px で作成推奨）。

images フォルダ

画像などを入れるフォルダ。

19

3-3

テーマの編 集 画 面「システム管理設定」－「テーマの管理」から、編集したいテーマのサムネイル上にマウスを持っていくと「編集」ボタンが出てくるので、「編集」をクリック。
＜それぞれのファイルが、テーマ編集画面で対応している箇所＞

theme.xml
サムネイル画像：
横幅 150px × 縦幅 100px 推奨

カラム設定変更の許可：「拒否」にすると、「カラム数の選択」「メインカラムの位置」「ページ幅の指定」「カラム幅・カラム余白の指定」が変更できなくなます。

thum.png

カラム数の選択：1～3 カラムの中から選択
メインカラムの位置：
ブログの編集画面等が表示されるメインカラムの位置を指定。通常

P23 の「「theme.xml」について」もご覧ください。

は、一番広い幅であるカラムをメインカラムとします。カラムは左から順に、1 カラム目、2 カラム目、3 カラム目となります。

imagestheme.css

theme.tpl

次からいよいよ、テーマを作成していきます！
20

3-4

テーマを作 成 するテーマを作成する方法はいくつかありますが、一番わかりやすいのはもともとあるテーマのどれかをローカルにダウンロードしてそれを編集し、新規テーマとして登録する方法です。自分が作りたいと思うテーマと近いデザインのテーマをダウンロードするとよいでしょう。

①

テーマをダウンロードする
テーマファイルは、theme/user/内にありますので、そちらからテーマファイルをダウンロードしてください。
ダウンロードしたファイルを開くと右図のようになります。
まずはこのフォルダ名を違う名前にしておきましょう。

②

ファイルを編 集 する 「theme.tpl」についてページを構成するファイルになります。html にあたる部分です。まずは html と css ファイルでデザインを変更しましょう。html はアップロード不要のファイルですが、デザインを確認する際に便利です。
html でレイアウトに変更があった場合など、必要に応じて最後に tpl ファイルを修正しましょう。

ｔｐｌファイルが実際に反映される場所です。色ごとに対応しています。

tpl ファイル21

 「theme.css」についてテーマのカスタマイズを、のちのち他のユーザーに e コミダイアログを利用して変更してもらうことを想定して作成する場合には注意が必要です。所定のセレクタに記述しないと、ダイアログから変更することができなくなってしまいます。
＜e コミダイアログの例＞
例１） 「ページ設定」－「ヘッダー画像変更」から、バナーを変更することができます。
すべてのユーザーが変更可能

バナーを<header>内の背景画像として css に設定しないと、このダイアログからバナーの変更ができなくなります。

例２） 「システム管理設定」－「テーマの管理」－「編集」から「文字色・背景色の設定」ができる。

所定のセレクタ内に記述しないとこちらに色が反映されません。
システム管理者、サイト管理者が設定できる箇所＜管理者がテーマのカスタマイズ時に e コミダイアログから変更できる点＞※管理者とは、「システム管理者」「サイト管理者」のことです。
場所

詳細

ヘッダー

バナー画像、背景色、タイトル・説明文の文字色

ページ全体

背景色、文字色、リンク文字色トップメニュー

背景色、文字色

パーツタイトル

背景色、背景画像、文字色「ページの上部へ」ボタン

背景色、文字色

フッター

背景色、文字色※詳細は次ページ「色情報の取得一覧表」をご覧ください。

22

＜色情報の取得一覧表＞
場所

プロパティ

ページ背景色body{}内 background-color

ページ文字色body{}内 color

ヘッダー背景色

body{}内 background-color

ヘッダー（タイトル）文字色

header h1{}

ヘッダー（説明文）文字色

header h2{}

リンク文字色a:link{}内 color

訪問済みリンク文字色

a:visited{}内 color

トップメニュー背景色#topmenu{}内 background-color

トップメニュー文字色#topmenu{}内 color

パーツタイトル背景色.box_menu{}内 background-color

パーツタイトル文字色.box_menu span{}内 color「ページの上部へ」ボタン背景色（通常時）「ページの上部へ」ボタン背景色（マウスオーバー時）.pagetop a:link{}内 background-color.pagetop a: hover{}内 background-color「ページの上部へ」ボタン文字色.pagetop a:link{}内 color

フッター背景色footer{}内 background-color

フッター文字色

footer{}内 color※背景色に関しては、background-color プロパティ、background プロパティのどちらでも大丈夫です。

23 「theme.xml」について「theme.xml」は、テーマの基本情報の設定になります。

xml ファイル

概要タグ

詳細name

テーマ名

英数字で設定title

テーマのタイトル

日本語も OK

description

テーマの概要テーマの簡単な説明

pmt

テーマ使用可能ユーザー

0：使用可能、1：システム管理者、2：使用不可

num

メニューの数

1～8（最大 8 まで）

edit

カラム設定変更の許可

1：拒否、2：許可

page_width

ページ幅の指定quantity

カラム数の選択

width

カラムの各幅margin

各余白幅

main

メインカラムの位置

ブログなどの編集画面が開かれるカラムの位置

serialバージョン番号

ベーステーマ(theme/base/*)を更新して、sirial 値を今

1 カラム、2 カラム、3 カラム

24

3-5

テーマを e コミに組 み込 む

テーマの準備が整ったら次はいよいよｅコミにテーマを組み込みます。テーマを組み込む方法は、FTP を使う方法と、使わない方法の二種類があります。
①

FTP を使 ってテーマをアップロードして適 用 する
ローカルでテーマ用ファイルをあらかじめ作成し、ＦＴＰを利用して theme/user/内にアップロードします。次に「システム管理設定」－「テーマの管理」から「新規テーマの作成」を選択します。

1 [アップロード済みテーマから選択]をクリック
サーバー内のテーマ用ディレクトリに配置さ2 適用したいテーマのサムネイルを選択れている未登録テーマを読み込みます。

3 [読み込む]をクリック「theme.xml」に入れた内容やサムネイルなどが自動で入ります。

4 中身を確認し、この下にある「登録する」ボタンをクリック

グループページにテーマを適用し、意図した通りに表示されるかどうか確認してみましょう

FTP を利用すると、ローカルで修正した CSS や tpl ファイルを、FTP で上書き保存ができるため、eコミ上に登録したテーマを簡単に更新することができます。ただし、xml ファイルだけは FTP で上書きできませんのでご注意ください。xml ファイルはテーマ登録時における入力補助のためのものです。xml ファイルを更新するには、e コミダイアログ上から行います。

25

②FTP を利 用 せず、zip 形 式 に圧 縮 したテーマを e コミに適 用 するFTP を利用せず、e コミダイアログより、zip 形式に圧縮したテーマを e コミに適用することもできます。
まずは、作成したテーマを zip ファイルに圧縮しておきます。そして、先ほど同様「システム管理設定」－「テーマの管理」から「新規テーマの作成」を選択します。

1 [新規テーマの作成]をクリック

2 [テーマファイルをアップロード]をクリック

3 zip 圧縮したファイルをアップロード

4 [読み込む]をクリック

5 あとは、先ほどの①と同じ方法でテーマを登録

26

3-6

e コミ上 でテーマを複 製 、編 集 して新 しいテーマとして登 録 する

すでに登録済みのテーマをｅコミ上で複製、編集して新しいテーマとして登録する方法もあります。この方法は、ｅコミ上だけで新規テーマを作成できますが、ローカルにバックアップがないため、必要に応じてバックアップを取ることをおすすめします。
「システム管理設定」－「テーマの管理」から複製したいテーマの「複製」ボタンを押します。

2 必要に応じて適宜修正
1 [複製]をクリック

ファイルの使用箇所を選択することができます。

[tpl ファイルの編集を行う]
をクリックすると編集可能になります。

画像をアップロードしたら必ず最下部にある「登録する」ボタンを押してください。ファイルをアップロードしただけ

3 [登録する]をクリック

ではテーマに反映されません。

27

3-7

テーマを編 集 する「システム管理設定」－「テーマの管理」から編集したいテーマの「編集」ボタンを押します。前ページのように必要に応じて適宜修正してください。css と tpl はそのテーマを利用しているグループページ全体に適用されます。xml ファイルは新たにそのテーマを選択するグループページに適用されるため、すでにそのテーマを適用済みのグループページに関しては更新内容は適用されません。
CSS と tpl ファイルの編集をしようとして、「権限がなく編集できません」とエラー表示される場合があります。そのときは、アップロードしたファイル・フォルダのパーミッションを 777 にすれば編集可能になります。

3-8

テーマを削 除 する「システム管理設定」－「テーマの管理」から削除したいテーマの「削除」ボタンをクリックします。
該当テーマがどこかのグループページで使用されていると削除できないため、その場合はグループページのテーマをほかのテーマに変更してからテーマの削除を行ってください。

1 [削除]をクリック

2 [OK]をクリック「テーマ」については以上です。
ぜひ、オリジナルテーマを作成してみてくださいね！

28

4 共 通 CSS
4-1

共 通 CSS とはサイト全体で共有するスタイルシートです。「共通 CSS」で設定したスタイルはすべてのテーマに適用されますのでご注意ください。

4-2

共 通 CSS の編 集 方 法「システム管理設定」－「共通 CSS の編集」から開いてください。

1 CSS を編集

2 「保存する」をクリック「テンプレート・デザイン（管理者編）」は以上です。
ぜひ活用してみてくださいね！

29テンプレート・デザイン（管理者編）
発⾏

日：平成２７年１１月

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