Actions

Theme options/ja: Difference between revisions

From LimeSurvey Manual

(Created page with "テンプレートオプション")
 
No edit summary
 
(48 intermediate revisions by 2 users not shown)
Line 3: Line 3:
__TOC__
__TOC__


<div class="simplebox">[[File:help.png]] '''LimeSurvey 3''' introduces a complete new template engine system, based on [https://twig.symfony.com/ Twig 1.29] and [https://getbootstrap.com/ Bootstrap], and allowing template inheritance and template options. </div>
<div class="simplebox">[[File:help.png]] '''LimeSurvey 3'''では、まったく新しいテンプレートエンジンシステムを導入しました。[https://twig.symfony.com/ Twig 1.29]と[https://getbootstrap.com/ Bootstrap]を使用しており、テンプレートの継承と様々なテンプレート設定が可能になります。</div>




{{Box|Install Limesurvey 3.0+ to get access to the survey '''theme options''' feature. This option will '''not''' be made available in the older LimeSurvey versions!}}
{{Box|Install '''テンプレートオプション'''を利用するには、Limesurvey 3.0+をインストールしてください。このオプションは古いバージョンのLimeSurveyでは使用できません。}}




=Introduction=
=はじめに=


LimeSurvey 3 contains a new feature called '''theme options''' that offers a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.
'''テーマオプション'''によって、アンケートのテーマに関連した設定を素早く簡単に変更する様々なツールを利用できます。


=テンプレートオプションパネル=


=Theme options panel=
'''テーマオプション'''機能は[[Survey settings/ja|アンケート設定]]からアクセスします。
 
Access the new '''theme options''' feature from the [[Survey settings|settings menu]]:




Line 22: Line 21:




The toolbar of the panel contains two tabs: the simple and advanced options of the theme editor.
パネルのツールバーは2つのタブから構成されています。テーマエディターの'''簡単なオプション'''と'''高度なオプション'''です。




==Simple options==
==簡単なオプション==


Once accessed, the following page will be loaded:
テーマオプションページでは次のものが表示されます。




Line 33: Line 32:




{{Alert|Title=Attention|text= Please note that each theme comes with certain options that can be changed from the survey '''theme options'''. In this wiki section, the default LimeSurvey theme '''fruity''' is used to show everyone the easiness through which quick and easy, yet powerful changes can be implemented to a theme by users without any prior knowledge in HTML, php, and/or CSS.}}
{{Alert|Title=注意|text= 各々のテンプレートには、アンケートの'''アンケートテーマ'''オプションから変更できる特定のオプションがあります。このウィキセクションでは、LimeSurveyの既定のテンプレートである'''fruity'''を使って、HTML・php・CSSに関する事前の知識がなくても、素早く簡単に、しかも強力な変更を行うことができることを説明します。}}


The '''simple options tab''' is preselected. The most important survey theme settings can be changed from here:
あらかじめ'''簡単なオプション'''が選択されています。もっとも重要なアンケートテンプレートをここで変更することができます。


* '''Inherit everything:''' If the ''yes'' button is selected, all the theme configurations will be inherited from the global [[Themes|configuration level]]. If you click ''no'' and click on the '''Save''' button located in the upper right part of the screen, more theme configuration options will be displayed. Each of these options can be set to:
* '''すべて継承する:''' ''はい''を選択すると、すべてのテンプレート設定がグローバル[[Themes/ja|設定レベル]]から継承されます。''いいえ''をクリックして右上の'''保存'''ボタンを押すと、より多くのテンプレート設定オプションが表示されます。それぞれのオプションは以下のように設定できます。
** inherit the survey group theme configurations - ''inherit'' (unless unchanged, your survey theme will inherit the global theme configuration);
** アンケートグループのテンプレート設定を継承する - ''継承（Inherit）''（変更しない限り、アンケートのテンプレートはグローバルテンプレートを継承します。）
** not inherit any global theme configuration - ''no'';
** グローバルテンプレートの設定を継承しない - ''いいえ''
** or enable another configuration - ''yes''. The theme settings can be configured as you wish if this option is chosen. You can observe that each theme setting allows you to select the ''inherit'' value.
** ''はい''。選択すると、テンプレート設定は好きなように変更できます。それぞれのテンプレート設定で''継承''が選べます。


{{Box|The inheritance system is applied on three levels:
{{Box|継承の仕組みは3つのレベルで適用されます。
* '''at the global level''' (accessible from the template list). The other two levels inherit the global theme settings;
* '''グローバルレベル'''（テンプレートリストから選択可能）他の2つのレベルはグローバルテンプレートを継承します。
* '''at the survey group level''' (accessible from the survey setting panel). The theme settings at the survey group level inherit the global theme settings;
* '''アンケートグループレベル'''（アンケート設定パネルから設定可能）アンケートグループレベルのテンプレート設定はグローバルテンプレート設定を継承します。
* '''at the survey level'''. The survey theme settings inherit the survey group theme settings.}}
* '''アンケートレベル'''. アンケートテンプレート設定は、アンケートグループのテンプレート設定を継承します。}}


* '''Theme fonts:''' Select the font you wish to use for your theme;
* '''フルーツフォント:''' フルーツテンプレートで使用するフォントを選択します。
* '''Theme variations:''' Select one of the available theme variations from the dropdown list. It changes the font and the icons colour.
* '''フルーツのバリエーション:''' ドロップダウンリストからフルーツテンプレートのバリエーションを選択します。フォントとアイコンの色が変わります。




===No inheritance===
===継承しない===


As mentioned above, you can choose from the survey settings menu '''not to inherit''' the [[Themes|global theme configuration]]. Once you click on the '''Save''' button, more options will be displayed:
上述の通り、アンケート設定メニューから[[Themes/ja|グローバルテンプレート設定]]を'''継承しない'''という設定にすることができます。'''保存'''ボタンをクリックすると、多くのオプションが表示されます。




Line 59: Line 58:




{{Box|To show the power of this feature, the below explanations will be based on the '''fruity''' theme. Please note that each theme comes with its own customizable options.}}
{{Box|本機能が強力であることを示すため、以下の説明は'''fruity'''テンプレートに基づいています。テンプレートによって独自のカスタマイズオプションがあります。}}


*'''Ajax mode:''' If enabled, the survey page will be loaded faster via ajax (''recommended for the average LimeSurvey user''). If disabled, the page will be loaded via page reload, which is better for debugging purposes;
*'''Ajaxモード:''' ''はい''にすると、アンケートページはajaxによって素早く読み込まれます（''平均的なLimeSurveyユーザー向けです''）。''いいえ''にすると、ページは再読み込み操作によって読み込まれます。デバッグ向きです。
*'''Survey container:''' If ''yes'' is selected, the survey will be displayed in a container - its width is limited. This option is useful if your survey participants complete your survey from their mobile phones or tablets because the survey width is controlled. Therefore, it is more comfortable for your respondents because they will not have to scroll right anymore to read the whole question or to see all the answer options. If the survey is embedded in a blog and/or forum, you can also deactivate this option since they already use a certain width.
*'''アンケートコンテナ:''' ''はい''にすると、アンケートは幅が制限されているコンテナの中に表示されます。これは、アンケートの幅がコントロールされている携帯電話やタブレットからアンケートに答えるときに有効です。すべての質問を読んだり、回答の選択肢を見るために横方向にスクロールする必要がないため、回答者にとってより快適なものになります。一定の幅になっているブログや掲示板にアンケートを埋め込む場合には、このオプションを''いいえ''にすることもできます。
*'''Question borders:''' If enabled, each question will be shown within a border. If set to ''no'', the questions will not be contained in a box (so you can use large array question types that are bigger than the screen width);
*'''質問枠線:''' ''はい''にすると、各質問は枠線内に表示されます。''いいえ''にすると、質問は枠線を使いません（画面幅より大きな配列質問タイプを使うことができます）。
*'''Question shadow:''' If enabled, a shadow will be displayed around the in(visible) question borders.
*'''質問シャドウ:''' ''はい''にすると、質問枠線のまわりにシャドウが表示されます。


<hr width="50%" style="margin:auto">  
<hr width="50%" style="margin:auto">  


*'''Background color:''' Select the background colour of the whole question, including the answers;
*'''背景色:''' 質問、回答の背景色を選択します。
*'''Font color:''' Change the font color by selecting from the popup menu the desired color.
*'''フォントカラー:''' ポップアップメニューから好みのフォントカラーに変更します。
*'''Question background color:'''  Change the question background color by selecting from the popup menu the desired color.
*'''質問背景色:'''  ポップアップメニューから好みの質問背景色に変更します。
*'''Check icon:''' This setting allows you to select the desired check icon when multiple choice question types are employed.
*'''チェックアイコン:''' 複数選択質問タイプに使われるチェックアイコンを選択します。


<hr width="50%" style="margin:auto">  
<hr width="50%" style="margin:auto">  


*'''Background image:''' If set to ''no'', you may select a different background image from the one used within your survey group and/or global theme settings. You may also '''upload''' a personalised survey background image by clicking on the '''upload''' button located in the bottom of the theme settings panel and selecting the desired image from your computer;
*'''背景画像:''' ''いいえ''にすると、グループまたはグローバルのテンプレートとは異なる背景画像を選択することができます。テンプレート設定パネルの一番下にある'''アップロード'''ボタンをクリックし、好みの画像を選択することにより、背景画像をアップロードすることもできます。
*'''Brand logo:''' If set to ''no'', the name of the survey will be shown in the top bar, else, you can select one of the pictures inside the file directory to be used as logo picture.
*'''ロゴ:''' ''いいえ''にすると、アンケート名がトップバーに表示されますが、''はい''にすると、ディレクトリにあるファイルの一つをロゴ画像として選択することができます。


<hr width="50%" style="margin:auto">  
<hr width="50%" style="margin:auto">  


*'''Animate body:''' If set to ''yes'', you can choose one of the animations to apply when the "body" of the survey is loaded;
*'''bodyアニメーション:''' ''はい''にすると、アンケートの"body"が読み込まれたときに適用されるアニメーションを選べます。
*'''Animate question:''' If set to ''yes'', you choose one of the animation to apply to your survey questions when they are loaded.
*'''質問アニメーション:''' ''はい''にすると、質問が読み込まれたときに適用されるアニメーションを選べます。
*'''Animate alert:''' If set to ''yes'', your survey alerts (when the survey data is not recorded or the wrong token is typed in) will be animated according to the selected animation option.
*'''警告アニメーション:''' ''はい''にすると、アンケート内の警告（アンケートが保存されなかったとき、異常なトークンが入力されたとき）に対し、指定したアニメーションが適用されます。
*'''Animate checkbox:''' If set to ''yes'', anytime you check an answer option, the animation is triggered.
*'''チェックボックスアニメーション:''' ''はい''にすると、回答をチェックする度にアニメーションが起動します。
*'''Animate radio buttons:''' If set to ''yes'', anytime you select an option from a radio-type question, the animation is triggered.
*'''ラジオボタンアニメーション:''' ''はい''にすると、ラジオボタンタイプの質問の選択肢を選んだときにアニメーションが起動します。


{{Box|The library used for animations is [https://daneden.github.io/animate.css/ animate.css]. You can either use the default one or add your own animation library.}}
{{Box|アニメーションに使用されているライブラリーは[https://daneden.github.io/animate.css/ animate.css]です。既定のもの、あるいは別のアニメーションライブラリーを組み込むこともできます。}}


{{Note|Type in a number in the duration field. If you type ten (10), then the animation will last for 10 seconds.}}
{{Note|期間の欄に数字を入力します。10と入力すると、アニメーションは10秒継続します。}}


<hr width="50%" style="margin:auto">  
<hr width="50%" style="margin:auto">  


*'''Fruity fonts:''' Select the font you wish to use for your theme;
* '''フルーツフォント:''' テンプレートで使用するフォントを選択します。
*'''Fruity variations:'''Select one of the available theme variations from the dropdown list. It changes the font and the icons colour.
* '''フルーツのバリエーション:''' ドロップダウンリストからテンプレートのバリエーションを選択します。フォントとアイコンの色が変わります。


<hr width="50%" style="margin:auto">  
<hr width="50%" style="margin:auto">  


*'''Upload:''' Browse your computer to upload an image to be used as logo or background image for your theme. Writing permissions might be requested on the "/themes/survey/fruity/files" folder - the location where the uploaded images will be stored in your LimeSurvey installation.
*'''アップロード:''' テンプレートで使用するロゴや背景となる画像をアップロードします。LimeSurveyでアップロードされた画像を格納する"/themes/survey/fruity/files"フォルダーへの書き込み権限が必要です。


==Advanced options==
==高度なオプション==
{{QS:Theme editor - advanced options}}
{{QS:Theme editor - advanced options/ja}}

Latest revision as of 14:45, 7 June 2021

Other languages:
LimeSurvey 3では、まったく新しいテンプレートエンジンシステムを導入しました。Twig 1.29とBootstrapを使用しており、テンプレートの継承と様々なテンプレート設定が可能になります。


Install テンプレートオプションを利用するには、Limesurvey 3.0+をインストールしてください。このオプションは古いバージョンのLimeSurveyでは使用できません。


はじめに

テーマオプションによって、アンケートのテーマに関連した設定を素早く簡単に変更する様々なツールを利用できます。

テンプレートオプションパネル

テーマオプション機能はアンケート設定からアクセスします。



パネルのツールバーは2つのタブから構成されています。テーマエディターの簡単なオプションと高度なオプションです。


簡単なオプション

テーマオプションページでは次のものが表示されます。



  各々のテンプレートには、アンケートのアンケートテーマオプションから変更できる特定のオプションがあります。このウィキセクションでは、LimeSurveyの既定のテンプレートであるfruityを使って、HTML・php・CSSに関する事前の知識がなくても、素早く簡単に、しかも強力な変更を行うことができることを説明します。


あらかじめ簡単なオプションが選択されています。もっとも重要なアンケートテンプレートをここで変更することができます。

  • すべて継承する: はいを選択すると、すべてのテンプレート設定がグローバル設定レベルから継承されます。いいえをクリックして右上の保存ボタンを押すと、より多くのテンプレート設定オプションが表示されます。それぞれのオプションは以下のように設定できます。
    • アンケートグループのテンプレート設定を継承する - 継承（Inherit）（変更しない限り、アンケートのテンプレートはグローバルテンプレートを継承します。）
    • グローバルテンプレートの設定を継承しない - いいえ
    • はい。選択すると、テンプレート設定は好きなように変更できます。それぞれのテンプレート設定で継承が選べます。
継承の仕組みは3つのレベルで適用されます。
  • グローバルレベル（テンプレートリストから選択可能）他の2つのレベルはグローバルテンプレートを継承します。
  • アンケートグループレベル（アンケート設定パネルから設定可能）アンケートグループレベルのテンプレート設定はグローバルテンプレート設定を継承します。
  • アンケートレベル. アンケートテンプレート設定は、アンケートグループのテンプレート設定を継承します。


  • フルーツフォント: フルーツテンプレートで使用するフォントを選択します。
  • フルーツのバリエーション: ドロップダウンリストからフルーツテンプレートのバリエーションを選択します。フォントとアイコンの色が変わります。


継承しない

上述の通り、アンケート設定メニューからグローバルテンプレート設定を継承しないという設定にすることができます。保存ボタンをクリックすると、多くのオプションが表示されます。



本機能が強力であることを示すため、以下の説明はfruityテンプレートに基づいています。テンプレートによって独自のカスタマイズオプションがあります。


  • Ajaxモード: はいにすると、アンケートページはajaxによって素早く読み込まれます（平均的なLimeSurveyユーザー向けです）。いいえにすると、ページは再読み込み操作によって読み込まれます。デバッグ向きです。
  • アンケートコンテナ: はいにすると、アンケートは幅が制限されているコンテナの中に表示されます。これは、アンケートの幅がコントロールされている携帯電話やタブレットからアンケートに答えるときに有効です。すべての質問を読んだり、回答の選択肢を見るために横方向にスクロールする必要がないため、回答者にとってより快適なものになります。一定の幅になっているブログや掲示板にアンケートを埋め込む場合には、このオプションをいいえにすることもできます。
  • 質問枠線: はいにすると、各質問は枠線内に表示されます。いいえにすると、質問は枠線を使いません（画面幅より大きな配列質問タイプを使うことができます）。
  • 質問シャドウ: はいにすると、質問枠線のまわりにシャドウが表示されます。
  • 背景色: 質問、回答の背景色を選択します。
  • フォントカラー: ポップアップメニューから好みのフォントカラーに変更します。
  • 質問背景色: ポップアップメニューから好みの質問背景色に変更します。
  • チェックアイコン: 複数選択質問タイプに使われるチェックアイコンを選択します。
  • 背景画像: いいえにすると、グループまたはグローバルのテンプレートとは異なる背景画像を選択することができます。テンプレート設定パネルの一番下にあるアップロードボタンをクリックし、好みの画像を選択することにより、背景画像をアップロードすることもできます。
  • ロゴ: いいえにすると、アンケート名がトップバーに表示されますが、はいにすると、ディレクトリにあるファイルの一つをロゴ画像として選択することができます。
  • bodyアニメーション: はいにすると、アンケートの"body"が読み込まれたときに適用されるアニメーションを選べます。
  • 質問アニメーション: はいにすると、質問が読み込まれたときに適用されるアニメーションを選べます。
  • 警告アニメーション: はいにすると、アンケート内の警告（アンケートが保存されなかったとき、異常なトークンが入力されたとき）に対し、指定したアニメーションが適用されます。
  • チェックボックスアニメーション: はいにすると、回答をチェックする度にアニメーションが起動します。
  • ラジオボタンアニメーション: はいにすると、ラジオボタンタイプの質問の選択肢を選んだときにアニメーションが起動します。
アニメーションに使用されているライブラリーはanimate.cssです。既定のもの、あるいは別のアニメーションライブラリーを組み込むこともできます。


期間の欄に数字を入力します。10と入力すると、アニメーションは10秒継続します。
  • フルーツフォント: テンプレートで使用するフォントを選択します。
  • フルーツのバリエーション: ドロップダウンリストからテンプレートのバリエーションを選択します。フォントとアイコンの色が変わります。
  • アップロード: テンプレートで使用するロゴや背景となる画像をアップロードします。LimeSurveyでアップロードされた画像を格納する"/themes/survey/fruity/files"フォルダーへの書き込み権限が必要です。

高度なオプション

Other languages:

テーマオプションタブを開くと、 簡単なオプションか高度なオプションのどちらかを使って編集するか選ぶことができます。“高度なオプション”は、データベースからメインのテーマ設定欄に直接アクセスできるフォームです。動作原理を理解するため、XMLファイルやスクラッチでテーマを作成することも理解しなければなりません。したがって、非常に複雑で上級者向けです。

それでも高度な設定の編集をしたければ、高度なオプションタブをクリックします。



  • Files css: テンプレートに含めるCSSファイル
  • Files js: テンプレートに含めるJSファイル
  • Files Print Css: テンプレートを印刷するときに読み込むCSSファイル
  • Options: テンプレートビューに必要なオプション（とその設定値）
  • CssFramework Name: 読み込むCSSフレームワークの名前。現時点では、Bootstrapか何も指定しないかとどちらかです。
  • Cssframework Css: コアのbootstrap.cssを、カスタマイズしたものに置き換えます。
  • Cssframework Js: コアのbootstrap.jsを、カスタマイズしたものに置き換えます。
  • Packages To Load: この設定により、LimeSurveyからコアのアセットパッケージを読み込ませることができます。

画面上部から、テーマのディレクトリーにファイルをアップロードすることができます。 これらのパラメーターは、テーマの全体的な外観を変えるために使用します。

  注意! : 意味がわからない値には手を出さないでください!


Retrieved from "http://manual.limesurvey.org/index.php?title=Theme_options/ja&oldid=165515"