1．ウィジェット／ページについて

1．1．ウィジェット

JAIRO Cloud（WEKO2）でのモジュールにあたります。

ウィジェットは、言語ごとに表示する内容を設定することができます。WEKO3の表示言語設定に応じて、画面に表示されるウィジェットの内容が切り替わります。

表示言語設定に対応する設定がない場合は、英語の設定が表示されます。

以下のウィジェットを利用できます。

1．2．ページ

トップページ、アイテム詳細ページ以外のページを追加できます。

ページにはウィジェットを配置できます。

多言語対応により言語切替が可能で、言語にかかわらずページレイアウトが共通です。

1．3．管理画面

(1) ログイン後、［Administration］にアクセスします。

(2) ［ウェブデザイン管理］をクリックします。

(3) ウィジェットにアクセスする場合は［ウィジェット］をクリックします。

　ページにアクセスする場合は［ページレイアウト］をクリックします。

2．ウィジェットの登録

(1) ［ウィジェット］で［作成］タブをクリックします。

ウィジェットの作成画面が表示されます。

(2) 項目を入力します。

2．1．ウィジェットの作成画面の項目と説明

注※
入力必須項目です。

(3) ［Save］をクリックします。

ウィジェットが作成されます。［一覧］タブをクリックすると、作成したウィジェットが表示されます。

必須項目を入力せず［Save］をクリックした場合、エラーメッセージ「項目名 is required」が表示されます。

設定しているウィジェットのラベル名がシステムに存在する場合は、エラーメッセージ「Save fall, Data input to create is exist!」が表示されます。

2．2．Typeの設定内容

ウィジェット種別を設定します。それぞれの種別について、入力例と表示例を示します。

(a) Free description（自由記述）
入力例

自由記述の項目と説明

ヘッダーのフォーマット

フォント

サイズ

テキストの色

テキストの背景色

リンク挿入のポップアップ

表示例

(b) Access counter（アクセスカウンター）

入力例

アクセスカウンタの項目と説明

表示例

(c) Notice（お知らせ）

入力例

お知らせの項目と説明

表示例

(d) New arrivals（新着）

入力例

［New date］プルダウン

［Display Results］プルダウン

表示例

(e) Main contents

Main contentsの設定は、「2．1．ウィジェットの作成画面の項目と説明」で説明した項目のみです。

入力例

表示例

(f) Menu（メニュー）

入力例

メニューの項目と説明

色指定

表示例

(g) Header（ヘッダー）

ヘッダーに対して、背景色及び自由記述を設定できます。

色の指定は(f) Menu（メニュー）の「色指定」を参照してください。デフォルトは青です。

また、自由記述での項目の説明は「自由記述の項目と説明」を参照してください。

入力例

表示例

(h) Footer（フッター）

フッターに対して、背景色及び自由記述を設定できます。

色の指定は(f) Menu（メニュー）の「色指定」を参照してください。デフォルトは青です。

また、自由記述での項目の説明は「自由記述の項目と説明」を参照してください。

入力例

表示例

2．3．Themeの設定内容

ウィジェットのテーマを設定します。

テーマごとの表示例一覧

2．4．Border Styleの設定内容

ウィジェットの枠線のスタイルを設定します。

枠線スタイルごとの表示例一覧

テーマ	表示例	説明
None		線は表示されません。
Solid		実線が表示されます。
Dotted		点線が表示されます。
Double		二重線が表示されます。

3．ウィジェットの表示

(1) ［ウィジェット］で［一覧］タブをクリックします。

ウィジェットのリストが表示されます。

(2) 行頭に表示されている目のアイコンをクリックします。

ウィジェットの詳細情報が表示されます。

【参考】

ID、Widget Type、Enableは、表示順序を変更することが可能です。

各項目名をクリックすると、表示順序が昇順、降順で変更されます。

例）ID

「フィルターを追加」のプルダウンより、Repository、Widget Type、Enableについて検索が可能です。

検索条件を指定して「適用」ボタンをクリックして検索します。

【注意事項】

Repository、Widget Type検索条件のテキストボックスはそれぞれの名称での検索となります。

例）「フィルターを追加」でWidget Typeを選択し、条件に［含む］を選択し、テキストボックスに［Notice］を記述し検索する。

以下の画像の通り、Widget Typeが［Notice］のWidgetが表示されます。

4．ウィジェットの更新

ウィジェットの更新は、［ウィジェット］または［ページレイアウト］で行います。

4．1．［ウィジェット］での更新

(1) ［ウィジェット］の［一覧］タブをクリックし、ウィジェットの行頭に表示されている鉛筆のアイコンをクリックします。

［編集］タブが表示されます。

(2) 項目を変更します。

項目の説明については、「2. ウィジェットの登録」を参照してください。

(3) ［Save］をクリックします。

ウィジェットが変更されます。メッセージ「Widget item updated successfully.」が編集画面の上部に表示されます。

4．2．［ページレイアウト］での更新

(1) ［ページレイアウト］をクリックし、PreviewまたはWidget Listの左上に表示されている歯車のアイコンをクリックします。

ウェジットの編集画面が別ウィンドウで表示されます。

(2) 項目を変更します。

項目の説明については、「2. ウィジェットの登録」を参照してください。

(3) ［Save］をクリックします。

ウィジェットが変更されます。メッセージ「Widget item updated successfully.」が編集画面の上部に表示されます。

5．ウィジェットの削除

［一覧］タブで、ウィジェットの行頭に表示されているゴミ箱のアイコンをクリックすると、ウィジェットが削除されます。

メッセージ「1 レコードが正常に削除されました。」が表示されます。

※削除するウィジェットがページレイアウトに使用されている場合、メッセージ「Cannot delete widget (ID: xx, because it's setting in Widget Design.」が表示されます。

6．ページの表示

(1) ［ページレイアウト］をクリックします。

(2) Repositoryのプルダウンリストで、リポジトリを選択します。

選択したリポジトリのMainLayoutのページが表示されます。

また、Widget画面で有効（Enableがチェックあり）が設定されているウィジェットがWidget Listに表示されます。

7．ページ内のウィジェットの配置

(1) ［ページレイアウト］をクリックします。

(2) Repositoryのプルダウンリストで、リポジトリを選択します。

選択したリポジトリのMainLayoutのページが表示されます。また、Widget Listには、ウィジェットが表示されます。

(3) Pagesのプルダウンリストで、ウィジェットデザインを設定するページを選択します。

(4) Widget Listで追加するウィジェットの［Add Widget］をクリックします。

Previewにウィジェットが追加されます。

ウィジェットをドラッグアンドドロップして位置を移動したり、サイズを変更したりできます。

【注意事項】
［Main Contents］、［Header］、［Footer］はページ内に複数設定できません。［Main Contents］のウィジェットを複数設定しようとした場合、エラーメッセージ「Main Content has been existed in Preview panel.」が表示されます。［Header］、［Footer］のウィジェットを複数設定しようとした場合、［Add Widget］ボタンが無効になります。

(5) ウィジェットを削除する場合、Previewにある各ウィジェットの右上にある［×］をクリックします。

Previewからウィジェットが削除されます。

(6) ［Save］をクリックします。

ウィジェットが追加または削除されます。

【注意事項】
リポジトリに対して［Main Contents］のウィジェットは１つだけ設定できます。
［Main Contents］のウィジェットを複数ページに設定しようとした場合は、エラーメッセージ「Failed to save design: Main contents may only be set to one layout.」が表示されます。

8．ページの追加

(1) ［ページレイアウト］をクリックします。

(2) Repositoryのプルダウンリストで、ページを登録したいリポジトリを選択します。

(3) Pagesのプルダウンリストの右に表示されている［＋］アイコンをクリックします。

Pageダイアログが表示されます。

(4) URLと言語ごとのタイトルを設定して［Save］をクリックします。

ページが追加されます。Pagesのプルダウンリストに、追加したPageのTitleが表示されます。

URLは必須項目です。
URLを入力しない場合、エラーメッセージ「Not a valid URL.」が表示されます。

追加したページは、ウィジェットの「メニュー」を配置することで、各ページのリンクを表示し、各ページへ遷移することができます。メニューに表示するページは「メニュー」ウィジェットの編集時に指定することができます。

9．ページの更新

(1) ［ページレイアウト］をクリックします。

(2) Pagesのプルダウンリストの右に表示されている［鉛筆アイコン］をクリックします。

Pageダイアログが表示されます。

詳細は「8．ページの追加」(4)以降を参照してください。

10．ページの削除

(1) ［ページレイアウト］をクリックします。

(2) Pagesのプルダウンリストの右に表示されている［ゴミ箱アイコン］をクリックします。

※Main Layoutのページは削除できません。

削除確認用のダイアログが表示されます。

(2) ［Submit］をクリックします。

ページが削除され、メッセージ「Successfully deleted page.」が表示されます。

11．背景色の設定

ウィジェット以外のWebページ全体の背景色を変更することができます。

(1) ログイン後、［Administration］にアクセスします。

(2) ［設定］をクリックして［画面背景色］をクリックします。

カラーパレットが表示されます。

(3) 表示されたカラーパレットから背景色を選択します。

数値でも背景色を設定できます。

・RGBのカラーモデルで背景色を設定します。

　それぞれのR、G、BテキストボックスにRGB値を指定します。
　指定されたRGB値に応じて、背景色が自動表示されます。

・HSLのカラーモデルで背景色を設定します。

　RGBと表示されるバーをクリックすると背景色設定方法が切り替わるので、HSLが表示されるまでクリックします。
　それぞれのH、S、LテキストボックスにHSLパーセント値を指定します。
　指定されたHSLパーセント値に応じて、背景色が自動表示されます。

・HEXで背景色を設定します。

　RGBと表示されるバーを、HEXが表示されるまでクリックします。
　HEXテキストボックスにカラーコードを指定します。
　指定されたカラーコードに応じて、背景色が自動表示されます。

(4) ［保存］をクリックします。

設定が保存されます。

12．Faviconの設定

(1) ログイン後、［Administration］にアクセスします。

(2) ［設定］をクリックして［サイト情報］をクリックします。

サイト情報の設定画面が表示されます。

(3) ［アイコンファイルの選択］をクリックします。

「アイコンファイルの選択」ダイアログが表示されます。選択できるアイコンの拡張子は「.ico」です。

(4) 表示された「アイコンファイル選択」ダイアログでアイコンを選択した後、［開く］ボタンをクリックします。

選択されたアイコン名とアイコンが表示されます。

(5) ［保存］をクリックします。

設定が保存されます。