Actions

Theme options/ja: Difference between revisions

From LimeSurvey Manual

(Created page with "*'''背景画像:''' ''いいえ''にすると、グループまたはグローバルのテンプレートとは異なる背景画像を選択することができます。テ...")
No edit summary
 
(26 intermediate revisions by 2 users not shown)
Line 3: Line 3:
__TOC__
__TOC__


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




Line 11: Line 11:
=はじめに=
=はじめに=


LimeSurvey 3には'''テンプレートオプション'''という新機能があり、アンケートのテンプレートに関連した設定を素早く簡単に変更する様々なツールを利用できます。
'''テーマオプション'''によって、アンケートのテーマに関連した設定を素早く簡単に変更する様々なツールを利用できます。
 


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


新しい'''テンプレートオプション'''機能は[[Survey settings/ja|設定メニュー]]からアクセスします。
'''テーマオプション'''機能は[[Survey settings/ja|アンケート設定]]からアクセスします。




Line 22: Line 21:




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




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


アクセスすると次のページが読み込まれます。
テーマオプションページでは次のものが表示されます。




Line 33: Line 32:




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


あらかじめ'''簡単なオプション'''が選択されています。もっとも重要なアンケートテンプレートをここで変更することができます。
あらかじめ'''簡単なオプション'''が選択されています。もっとも重要なアンケートテンプレートをここで変更することができます。
Line 80: Line 79:
<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

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


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"フォルダーへの書き込み権限が必要です。

高度なオプション

テーマオプションタブを開くと、 簡単なオプション高度なオプションのどちらかを使って編集するか選ぶことができます。“高度なオプション”は、データベースからメインのテーマ設定欄に直接アクセスできるフォームです。動作原理を理解するため、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からコアのアセットパッケージを読み込ませることができます。

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

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