4.3. スキン

ポートフォリオ → スキン

警告

Skins is an experimental feature in Mahara 1.8 for theming pages. While you can change a lot of style elements, changing all of them is not advised depending on the theme that is underlying your page.

この機能はあなたのMaharaの config.php ファイルに次のパラメータが追加された場合のみ使用できます: $cfg->skins = true;

このパラメータが追加された場合、あなたには ポートフォリオ の下にメニューアイテム スキン が表示されます。ページを作成または編集する場合、スキンを選択することもできます。

あなたの スキン 概要ページ

1. 新しいスキンを作成するには、スキンを作成する ボタンをクリックしてください。

2. 他のユーザがオンラインで共有しているスキンをインポートするには、スキンをインポートする ボタンをクリックしてください。

3. あなたのパーソナルスキンすべてをエクスポートするには　スキンをエクスポートする ボタンをクリックしてください。

4. あなたが表示したいスキンを決定することができます:

   • すべてのスキン: あなたがアクセスできるスキンすべて
   • サイトスキン: サイト管理者によってのみ作成されたスキンです。
   • マイスキン: あなたによって作成されたスキン
   • パブリックスキン: サイト上でパブリックに共有されている他のユーザのスキンです。

5. このスキンを変更するには*編集*ボタン|edit|をクリックしてください。

6. このスキン1つのみをエクスポートする場合、エクスポート ボタンをクリックしてください。

7. このスキンを削除するには*削除*ボタン|delete|をクリックしてください。

   注釈

   あなたに実行するためのパーミッションがある場合のみ 編集、エクスポート および 削除 ボタンが表示されます。

8. Click the Favorite button to mark someone else’s skin as favorite so you can choose it for your own pages. It will turn yellow. Clicking the button again will allow you to remove the skin from your list of favorite skins.

   注釈

   You can only favorite another user’s skin, but not site skins. You can always select a site skin for a page, but only see other people’s skins when you favorited them.

4.3.1. スキンを作成する

あなたは次のようにスキンを作成することができます:

• 個別ユーザ
• サイト管理者

あなたのスキンの設定に応じて、あなたのみまたは他のユーザが利用することができます。

In the following, the individual skin settings will be described. You do not have to change all settings for a skin but can pick and choose which elements of the theme that your page has you would like to change.

参考

ページスキン機能をデモンストレーションしているビデオ<https://www.youtube.com/watch?v=pvckRIkZdJs>をご覧ください。

4.3.1.1. 一般

あなたのスキンの一般設定

1. スキンタイトル: あなたのスキンタイトルを入力してください。あなたは スキン 概要ページでスキンタイトルを確認することができます。
2. スキン説明: あなたのスキンに関する説明をここに記述してください。あなたがなぜスキンを作成したか、特別な点は何か等、あなたが将来思い出すときの助けとなります。
3. スキンアクセシビリティ: 誰があなたのスキンにアクセスできるか決定してください。デフォルトは **これはパブリックスキンです ** です。
   • これはプライベートスキンです: あなたのみこのスキンをページで使用することができます。
   • これはパブリックスキンです: あなたのスキンを他のユーザが閲覧および使用することができます。
4. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

4.3.1.2. スキン背景

あなたのスキンの背景を選択する

1. スキン背景色r: フィールドをクリックしてあなたが使用したい色を選択するか、フィールドにカラーコードを入力することができます。
2. テーマ色を使用する: あなたがカスタム色を選択する代わりにテーマ色を使用したい場合、このチェックボックスをチェックしてください。
3. スキン背景イメージ: 代わりにあなたはイメージを背景に使用することができます。ファイルを選択する ボタンをクリックして、あなたのファイルエリアよりイメージを選択してください。
4. Background image repeat: Decide whether you want to repeat the background image. This setting is useful if your image is smaller than your page. If you do not choose a repeat option, the background will not be filled with the image entirely. Your options are:
   • 繰り返さない: イメージを繰り返しません。このオプションは非常に大きなイメージを使用する場合、またはあなたのページよりも大きなイメージを使用する場合のみに使用してください。
   • Repeat only horizontally: Your image will only be repeated horizontally, but not vertically. This setting can work for a very wide but short page.
   • 垂直のみに繰り返す: あなたのイメージは水平ではなく、垂直のみに繰り返されます。この設定は狭く長いページで動作します。
   • 両方向に繰り返す: あなたのイメージは水平および垂直に繰り返されます。これはあなたのページに関して最も柔軟な設定です。
5. 背景イメージ設定: あはたの背景をスクロールできるようにするか、固定するか決定してください。
   • 固定: このオプションを選択した場合、あなたの背景は同じ場所に留まり動くことはありません。ページコンテンツのみスクロールします。
   • スクロール: あなたがこのオプションを選択した場合、あなたの背景はページと共にスクロールします。
6. 背景イメージポジション: あなたの背景イメージを固定する場所を決定してください。ポジションを選択するには矢印の1つをクリックしてください。
7. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

4.3.1.3. ページ背景

あなたのページコンテンツの背景を選択する

1. ページ背景色: あなたはフィールドをクリックして使用したい色を選択するか、色コードを入力することができます。
2. テーマ色を使用する: あなたがカスタム色を選択する代わりにテーマ色を使用したい場合、このチェックボックスをチェックしてください。
3. ページ背景イメージ: 代わりに、あなたは背景にイメージを使用することができます。あなたのファイルエリアからイメージを選択するには ファイルを選択する ボタンをクリックしてください。
4. Background image repeat: Decide whether you want to repeat the background image. This setting is useful if your image is smaller than your page. If you do not choose a repeat option, the background will not be filled with the image entirely. Your options are:
   • 繰り返さない: イメージを繰り返しません。このオプションは非常に大きなイメージを使用する場合、またはあなたのページよりも大きなイメージを使用する場合のみに使用してください。
   • Repeat only horizontally: Your image will only be repeated horizontally, but not vertically. This setting can work for a very wide but short page.
   • 垂直のみに繰り返す: あなたのイメージは水平ではなく、垂直のみに繰り返されます。この設定は狭く長いページで動作します。
   • 両方向に繰り返す: あなたのイメージは水平および垂直に繰り返されます。これはあなたのページに関して最も柔軟な設定です。
5. 背景イメージ設定: あはたの背景をスクロールできるようにするか、固定するか決定してください。
   • 固定: このオプションを選択した場合、あなたの背景は同じ場所に留まり動くことはありません。ページコンテンツのみスクロールします。
   • スクロール: あなたがこのオプションを選択した場合、あなたの背景はページと共にスクロールします。
6. 背景イメージポジション: あなたの背景イメージを固定する場所を決定してください。ポジションを選択するには矢印の1つをクリックしてください。
7. ページ幅: あなたのコンテンツが表示されるページの幅を決定してください。あなたは与えられた設定値からのみ選択することができます。
8. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

4.3.1.4. ページヘッダ

ページヘッダ属性を選択する

1. 背景色: あなたのヘッダ (およびフッタ) の背景色を選択してください。

2. テキスト色: ヘッダに表示されるテキストのテキスト色を決定してください。

3. 通常リンク色: リンクが表示される場合の色を選択してください。

4. 下線リンク: あなたがリンクに下線を引きたい場合、このチェックボックスをチェックしてください。

5. ハイライトリンク色: あなたがマウスを乗せた場合のリンク色を選択してください。

   注釈

   カラーフィールドに関して、あなたはフィールドをクリックして使用したい色を選択するか、色コードを入力することができます。

   あなたがカスタム色を使用せずにテーマ色を保持したい場合、テーマ色を使用する チェックボックスをチェックしてください。

6. 下線リンク: あなたがハイライトされたリンクに下線を引きたい場合、このチェックボックスをチェックしてください。

7. ロゴ: あなたが使用したいロゴを選択してください。

   • デフォルトテーマロゴ: あなたのテーマロゴを表示します。これはカスタムロゴにすることができます。
   • 白色Maharaロゴおよびテキスト: あなたが白色にMaharaロゴを表示したい場合、このロゴを選択してください。これは暗い背景色に適しています。
   • ダークMaharaロゴおよびテキスト: あなたがダークMaharaロゴを表示したい場合、このロゴを選択してください。これは明るい背景色に適しています。

8. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

4.3.1.5. ページフォントおよび色

フォントプロパティを変更する

1. Heading font: Choose the font for your headings. You can choose from any of the installed fonts. The font will be applied to all your headings, e.g.
   • ページタイトル
   • ブロックタイトル
   • あなたはヘッディングとしてマークした場合ヘッディング
2. テキストフォント: すべてのテキストのフォントを選択してください。あなたはどのインストール済みフォントでも選択することができます。
3. フォントサイズ: フォントの相対サイズを選択してください。ヘッディングが適切なサイズに変更されます。
4. テキスト色: ページ表示されるテキストの色を決定してください。
5. ヘッディングテキスト色: あなたのページヘッディングの色を選択してください。
6. 強調テキスト色: あなたのブロックタイトルおよび他の強調テキストの色を選択してください。
7. 通常リンク色: リンクが表示される場合の色を選択してください。
8. 下線リンク: あなたがリンクに下線を引きたい場合、このチェックボックスをチェックしてください。
9. ハイライトリンク色: あなたがマウスを乗せた場合のリンク色を選択してください。
10. 下線リンク: あなたがハイライトされたリンクに下線を引きたい場合、このチェックボックスをチェックしてください。
11. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

注釈

カラーフィールドに関して、あなたはフィールドをクリックして使用したい色を選択するか、色コードを入力することができます。

4.3.1.6. ページテーブルおよびボタン

テーブルおよびボタンプロパティを変更する

1. テーブル枠線色: あなたのテーブル枠線色を選択してください。
2. ヘッダ背景色: ヘッダ行のあるテーブルを作成した場合、あなたはここで背景色を選択することができます。
3. ヘッダテキスト色: ヘッダ行のあるテーブルを設定する場合、あなたはここでヘッダ背景色と一緒に使用されるヘッダテキスト色を選択することができます。
4. 奇数行の背景色: テーブルの奇数行の背景色を選択してください。あなたはどの行が奇数行であるか指定する必要はありません。
5. 偶数行の背景色: テーブルの偶数行の背景色を選択してください。あなたはどの行が偶数行であるか指定する必要はありません。
6. 通常ボタン色: ページに表示されるボタン色を選択してください。
7. ハイライトボタン色: ボタン上にマウスポインタを乗せた時のボタン色を選択してください。
8. ボタンテキスト色: あなたのボタンに表示されるテキストの色を選択してください。この色は通常ボタンおよびハイライトボタンの両方で表示できるようにする必要がある点に留意してください。
9. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

注釈

Wherever you have a colour field, you can either click into the field and select the colour you would like to use or type the colour code in. If you do not want to use a custom colour but retain the theme colour, tick the check box Use theme colour.

4.3.1.7. 高度な設定

カスタムCSSを追加する

1. カスタムCSS: あなたがCSSの変更を方法を理解している場合、ここであなたのスキンの他のスタイルを変更することおよびページの他のエレメントをオーバーライドすることができます。
2. あなたの変更を受け付けるには*保存*ボタンをクリックしてください。あなたの変更を取り消すには*キャンセル*ボタンをクリックしてください。

4.3.2. スキンを選択する

ポートフォリオ → ページ → ページを編集する

スキン 機能が有効にされた場合、あなたにはページエディタナビゲーション内にもう1つのアイテムが表示されます: スキンを選択する

スキンを選択する

1. このページに使用できるスキンすべてを表示するには スキンを選択する ナビゲーションアイテムをクリックしてください。

2. あなたの探しているスキンがない場合、スキンを管理する ボタンをクリックしてください。あなたがスキンを追加または削除することのできる ポートフォリオ → スキン に移動します。

3. マイスキン: あなたが作成したスキンはこのエリアに表示されます。選択するにはタイトルまたはプレビューイメージをクリックしてください。

4. Favourite skins: Skins from other people that you like are displayed here. If you do not see a skin, click the Manage skins button. You will be taken to Portfolio → Skins where you can favourite more skins. Click the title of a skin or the preview image to select it.

5. サイトスキン: サイト管理者が作成したサイトレベルのスキンが表示されます。選択するにはスキンタイトルまたはプレビューイメージをクリックしてください。

   注釈

   スキンを選択せずに、今後あなたのページにスキンを使用したくない場合、「スキンなし」イメージを選択してください。あなたは標準テーマのみ使用することとなります。

6. スキンを選択した後、あなたのページに設定するため 保存 ボタンをクリックしてください。ページ表示時にはスキンを閲覧のみできるため、あなたは編集モードから解除されます。

7. あなたのページコンテンツをさらに変更したい場合、*このページを編集する*ボタンをクリックしてください。

注釈

あなたのページを表示する場合のみスキンは表示されます。あなたのページを編集する場合、標準テーマが表示されます。

4.3.3. テーマとページスキンの違いは何ですか?

テーマ

• Have been present in Mahara in their current form since 1.2.

• システム管理者から直接ウェブサーバにアップロードされる必要があります。

• Can override the page template for every single screen in Mahara, giving total control over how everything is displayed.

• サイトおよびインスティテューションの設定により:

  • サイト全体の単一テーマ
  • インスティテューションすべてのテーマ
  • the possibility for users to choose their own theme for browsing the site
  • the possibility for users to apply a particular theme to each portfolio page, the page themes

スキン

• *ポートフォリオ → スキン*経由でユーザは作成、共有、エクスポートおよびアップロードすることができます。
• Are less powerful than themes. They can only change page colours, fonts and background images, and add extra CSS. Basically they add one additional user-controlled CSS stylesheet to a page.
• Can only be applied to user-created portfolio pages. They don’t change the way any other part of Mahara is displayed.

スキンおよびテーマが衝突した場合

• ユーザが自分のページの1つにスキンを適用した場合、ページに追加CSSスタイルシートが追加されます。これはテーマからの**追加的な**CSSです。
• 当然ながら、特にポートフォリオページの基本的なページテンプレートが変更されている場合、個別のスキンがすべてのテーマで良く見えるわけではありません。
• If you’re a theme designer, the good news is that the skin stylesheet is itself a page template (skin/style.tpl). So, you can specify which page elements each of the skin settings should apply to by overriding that page template.