Actions

Theme editor/ja: Difference between revisions

From LimeSurvey Manual

(Updating to match new version of source page)
No edit summary
 
(322 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<languages />  
<languages />  
LimeSurveyを用いて公開するページの要素のなかには、テンプレートで変更できるものがあります。
==はじめに==


ここではテンプレートについての簡単な解説をします。詳細、とくに、新しいテンプレートの編集／作成については、[[Templates and Styles]]をご覧ください。
LimeSurvey は、開発者がアンケートの外観のカスタマイズを効率的に行える、高度なテーマとスタイルのシステムを備えています。かつては「テンプレート」の用語を用いていましたが、LS3 で「テーマ」と置き換えました。「テーマ」は、アンケートのページスタイルを制御できます。アンケート管理者は、既定のテーマを選択することができ、また個々のアンケートにカスタマイズを加えることができます。「テーマ」では、アンケート管理者がプログラムの技術をもたなくとも、ようこそ画面にロゴを追加したり、背景色を変更したり、フォントを選択したりといったことが簡単にできる設定を用意しています。


===LimeSurvey テンプレートエディタ===


テンプレートエディタを利用すると、テンプレートをオンラインで編集できます。管理ツールバーの「テンプレートエディタ」アイコンをクリックすると開きます。
LimeSurvey には、3 つのテーマが付属しています。これらの初期テーマは、LimeSurveyのインストールディレクトリ下の「themes/survey/」ディレクトリーにあります。さらに個々のテーマごとにディレクトリーが分かれています。テーマのメインディレクトリーには、XML 形式の設定ファイル、テーマを構成する .twig ファイルを収めた「views 」、「css」、「scripts」、.jpg や .png を収めた「images」、その他、多くのディレクトリーが入っています。


メイン画面はLimeSurveyの管理画面と似たつくりになっています。一番右上にある「テンプレート」のボックスで編集するテンプレートを選択すると、下のウィンドウに選択したテンプレートのサンプルが表示されます。


===テンプレートのメニュー===
LimeSurvey 2.50 以降、テーマエンジンは CSS フレームワークとして、[http://getbootstrap.com/docs/3.3/ Bootstrap 3] を使用しています。Bootstrap 3 は標準的なフレームワークなので、開発者はインターネット上で多くのドキュメント、チュートリアル、フォーラムでのやり取りを見つけることができます。
*'''信号機:''' 信号機のアイコンは、テンプレートが編集可能か否かを表します。赤は編集不可（Read Only）、緑は編集可能であることを表します。信号を赤から緑に変えるには、テンプレートファイルに対する権限を変更する必要があります。
*'''テンプレートの名前を変更:''' 編集中のテンプレートの名前を変更できます。
*'''テンプレートを出力:''' 編集中のテンプレートをZIPファイルに出力します。
*'''テンプレートをコピー:''' 編集中のテンプレートをコピーして、新しいテンプレートを作成します。


右にある「画面」ドロップダウンリストでは、アンケートのどのページを見るかを選択できます。


===ファイル管理===
LimeSurvey 3 以降、テーマエンジンは、[https://twig.symfony.com Twig] を使用しており、テーマ開発者はアンケートレンダリングのロジックを安全かつ簡単に変えることができます。Twig はそれ以前のバージョンで使っていたキーワード置換システムに代わるものです。キーワードの HTML を生成するのに利用するロジックを、テーマのビューの中で利用できます。


「ファイル管理」ウィンドウでは、ページをコンパイルするのに用いられるテンプレートのファイルが表示されます。左のウィンドウでクリックしたファイルのHTMLソースが、真ん中にある「編集中のファイル」ウィンドウに表示されます。


テンプレートが編集可能な場合は（これはディレクトリの権限によります）、このウィンドウ上でHTMLを編集・保存することができます。
Vanillaテーマのスニペット:


「他のファイル」ウィンドウには、テンプレートのディレクトリにある他のファイル群が表示されます。こちらのほうでは、 ''' 画像ファイル（写真、ロゴなど）その他テンプレートを作るのに必要なファイル ''' をアップロードできます。各画像へのリンクを直接書くかわりに、{TEMPLATEURL}を用いることもできます：
<syntaxhighlight lang="twig">
<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>
    {# NOTE: If you want to customize the question rendering, use a question theme #}
    {{ aQuestion.answer | raw }}
</div>
</syntaxhighlight>
 
テーマは、HTMLとTwigコードからできており、表示されるテキストの位置と形式、ページの同様の構造的特徴を定義します。テーマには他のファイルを参照したり取り込んだりすることが多くあります。ほとんどの場合、アンケートのすべてのページで共通に利用するフォントスタイル、色、背景や同様のパラメーターについて定義したカスケーディング・スタイル・シート（CSS）ファイルを参照します。スタイルシートは、HTMLコードに含まれる様々なオブジェクトタイプに関連づけられた'''クラス'''パラメーターを参照します。これにより、スタイルシートは、複数の場所に現れるテキストや他のオブジェクトをどのように表示させるかを規定できます。LimeSurveyでは質問タイプごとに固有のクラスがあり、それぞれの見た目を細かく規定することができます。ロゴや進捗バーで使用する画像ファイルもテーマファイルの中で参照されます。最後に、中括弧に挟まれた特別なキーワードは、対応する言語の翻訳として定義されたテキストに置き換えられます（例えば、それぞれの言語で書かれた'アンケートタイトル'、'質問文'など）。
 
新しいカスタムテーマを作成したら、LimeSurveyコミュニティーに共有し、他の人が使えるようにすることを検討してください。あなたの貢献によって、テーマ、アンケート、その他のアドオンが豊富になり、LimeSurveyがよりよいものになります。
テンプレートの共有については、[https://www.limesurvey.org/index.php?option=com_sobipro&sid=55:Templates&Itemid=729 LimeSurveyテンプレートリポジトリー]を参照してください。


<center>直接書く： "<img src='/limesurvey/templates/yourtemplate/mypicture.jpg'>"</center>
==新しいテーマの作成==


<center>タグを用いて書く： "'''<img src=';{TEMPLATEURL}:mypicture.jpg'>'''"</center>
新しいテーマを作成する（既存のテーマを編集する）には、LimeSurveyで[[Manage users/ja#Set global permissions for a user|テーマ編集ユーザー権限]]を設定する必要があります。また、LimeSurveyをインストールしているOSのファイル操作権限も併せて設定します。


一番下の画面には、編集中のテンプレートの「サンプル」が表示されます。
<div class="simplebox"><span style='color:red'>'''警告の注意:'''</span>  テーマを変更した場合、LimeSurveyにすでに存在するアンケートに影響を及ぼす可能性があります。テーマは、経験とHTMLの知識を必要とする高度な機能です。</div>


テンプレートエディタから、テンプレートを削除することはできません。別途、FTPを用いてディレクトリを削除する必要があります。
新しいテーマを作成するには、上部のツールバーの'''設定'''にある'''テーマエディター'''（下記参照）を通じて行うのが望ましいやり方です。ウェブインターフェースではなく、お気に入りのテキストエディターを使ってテーマファイルを編集したい人もいるでしょう。この場合でも、新しいテーマを作成するときはテーマエディターを使います。これにより、''LimeSurvey_web_root/upload/themes/survey/your_new_template''ディレクトリーに必要なすべてのファイルが配置され、基礎となるテーマが作成されます。この後、好みのテキストエディターを使ってテンプレートファイルを編集することができます。


デフォルトのテンプレートは、テンプレートエディタで編集することはできません。ただし、ファイルを（テキストエディタなどで）直接編集することは可能です。
<div class="simplebox">'''パーミッションに関する注意:''' unix/linuxシステムでは、ウェブサーバーを起動しているグループやユーザーがテーマファイルのオーナーになっています（いくつかのシステムでは"www"かもしれません）。したがって、ファイルを編集するときは適切なアクセス権があるか確認するとともに、保存するときは所有権を変えないように注意しましょう。このようにすれば、ウェブのテーマ編集インターフェースを使うことができます。</div><br />


LimeSurvey has a basic template and style system providing a theme-like capability found in many browser-based applications.  They are simply termed '''Templates''' here.  The Templates allow control over the look and feel of pages during a survey.  A survey administrator can select the template to use for each survey to thus personalize that survey's look and feel.  Changes to a Template can be as simple as adding a unique logo on the welcome page, changing background colors, or maybe new text colors for specific types of questions.
LimeSurveyの'public'エレメントの多くはテーマによって調整することができます。次のセクションでは、テーマテンプレートについて簡単に説明します。


LimeSurvey comes with a set of templates right out of the box. These initial templates are defined by directories within the LimeSurvey installation "templates" directory.  Each template has it's own directory.  Within the main directory of a template are numerous files: '''templates (.pstpl)''', '''cascading style sheets (.css)''', '''images''' ('''.jpg''' or '''.png''') and maybe others.
{{Note|テーマファイルは複雑です。HTMLのほか、CSS、Twig、JavaScriptについて理解している必要があります。}}


Like in other theme-based systems, fragments of HTML code are stored in the .pstpl template files.  These fragments are read in and used to construct the page to display to the end user during the operation of a survey. Often '''keywords''' surrounded by curly braces are included in the files that are then replaced with the relevant text.  The following gives an example of a template file content and its result when used in a survey page:
=LimeSurveyテーマエディター=


<syntaxhighlight lang="php" enclose="div"><center><font face='verdana' color='red'>{SURVEYNAME}</font><br />
'''テーマエディター'''： '''設定''' > '''テーマ''' > '''テーマエディター'''  
<font face='verdana' color='blue'><u>{SURVEYDESCRIPTION}</u></center>
</syntaxhighlight>


One gets a result that looks like:


<div class="simplebox"><center>'''<span style='color:red'>My New Survey</span>'''</center>
{{Alert|title=注意|text=テーマが正しく構成されていない場合、そのテーマを利用しているアンケートは、正常に動作しません。}}


<center><u><span style='color:#0000ff'>This is a survey written by me to find out what sort of chocolate people like.</span></u></center></div>


Templates, being HTML code, tend to define the positioning and type of text to be displayed and similar structural features of the page.  They often reference or include other files.  Most reference a common cascading style sheets (CSS) file that defines the font style, color, size, background and similar parameters common to all pages in the survey. Style sheets reference HTML '''class''' parameters that are associated with the various types of objects in the HTML code.  This allows the style sheet to describe once how to display each of the many types of text or other objects that may appear in multiple places.  There are unique classes for each question type in LimeSurvey and thus giving detailed control over the appearance of each.  Image files, like logos or special progress-bar constructors, may be referenced as well in the Template file.  Finally, special Keywords in curly braces are replaced with text defined in the Survey for each of its corresponding language translations (for example, the Survey Title or Question Text for each language defined).
LimeSurveyテーマエディターは、テーマのコンテンツをオンラインで編集できます。テーマエディターを起動するには、'''設定'''メニューの'''テーマ'''リンクをクリックし、編集したいテーマの隣にある"テーマエディター"ボタンをクリックします。


If you create a new custom template, please consider contributing it back to the LimeSurvey community, and make it available to others. With your help, we can grow our repository of templates, surveys, and other ad-ons, to make LimeSurvey even better! See the shared [http://www.limesurvey.org/en/download-limesurvey-design-templates/viewcategory/9-survey-design-templates Template Repository]


=Creating a new Template=
[[File:Themes menu.png]]
[[File:Theme editor button.png|''The button to access the theme editor for Bootswatch theme'']]


To be able to create a new template (or edit an existing template), you need Template Editing user permission in LimeSurvey as well as permission to manipulate the files in the underlying operating system hosting your LimeSurvey installation.


<div class="simplebox">'''Note of Warning:''' As template changes can affect all surveys in an installation, changes should be limited to those skilled in understanding general concepts in the code base. Templates are an advanced feature that can take some experimentation to get correct if you are not familiar with HTML code methods.</div>
テンプレートエディターページでは、編集／閲覧したいテンプレートを選択します。


The preferred way to create a new template is through the Template Editor (see below) via the web Admin interface. Some people may like to work directly with template files so that they can use their favorite text editor instead of the web interface. In this case, still use the Template Editor to first create your new template. This will create a new base template with all the files you need in the LimeSurvey_web_root/upload/templates/your_new_template directory. From there you can use your text editor to manually adjust the template files.


<div class="simplebox">'''Permissions Note:''' on unix/linux systems, these template files will be owned by the group and user who the web server is running as (may be "www" for some systems). So make sure you have access to edit these files, and when you save them make sure they don't change ownership, so you can still use the web Template Editing interface if needed</div>
[[File:Template-editor-2013-7-10_11_38_16.png|center]]


Template files may seem complex to understand at first. You have to likely understand HTML code, possibly Styles and Style Sheets, and have access to the underlying LimeSurvey installation files if the template files and directories are not editable. Copy an existing template to a new directory to play around with the content. This may help make the concept clearer.


A number of the 'public' elements of LimeSurvey can be adjusted by a series of templates. This section provides a very brief explanation of these templates.
下記のオプションが使用できます。


=The LimeSurvey Template Editor=


To ease the understanding and quick update of a Template, LimeSurvey provides a '''Template Editor''' in the main '''administrative''' toolbar of the application.  This Template Editor is only available to users given the privilege in the User Security settings.  A template effects all surveys and can render a survey inoperable if not constructed properly.  So Template editing is thought best restricted to a very limited, knowledgeable set of users.  Having permission to enter the Template Editor is not enough though.
*'''作成''': 新しいテンプレートを作成します。ゼロから作るのでなければ、'default'がコピーされます。
*'''インポート''': ZIPファイルでテンプレートをインポートします。
*'''エクスポート''': 現在のテンプレートをZIPファイルにエクスポートします。
*'''コピー''': 現在のテンプレートを新しいテンプレートとしてコピーします。
*'''名前を変更''': テンプレートの名前を変更します。通常、コピーやインポートした後に使います。
*'''テンプレート''': LimeSurveyで利用できる状態にあるテンプレートをドロップダウンリストで表示します。


The LimeSurvey Template Editor allows you to edit the contents of your templates online. Start the Template Editor by clicking on the "Template Editor" icon [[File:templates.png]] in the LimeSurvey Administration toolbar (Templates). The main screen is similar to the LimeSurvey Survey Administration screen. It allows you to select the template to edit/view. Once this has been selected you can then select from one of the different public survey pages. You are then presented with a list of the template files that make up that particular page.
*'''画面''': It is a drop-down list which allows you to choose which particular survey page of that template you want to look at.
*'''管理パネルに戻る'''


==The Template Menu==
===テンプレートのインポート／エクスポート／コピー===
*'''Edit Icon:''' The "edit" icon indicates whether or not the template is editable. A blurred out icon indicates that the template is read only; a clickable icon indicates you may make modifications. To change the icon from blurred to clear, you have to modify the template's permissions.
*'''Rename this template:''' Allows you to change the name of the template.  Generally used after copying an existing template or importing a template by manipulating the underlying directories.
*'''Export Template:''' Allows you to export the current template to a .zip-File.
*'''Copy Template:''' Allows you to make a new template by copying the current one.


The "Screen" drop-down list on the right allows you to choose which particular survey page you are currently looking at.
テンプレートを'''エクスポート'''するとき、テンプレートを構成するすべてのファイル（.pstplファイル、画像、cssファイルなど）がアーカイブされたZIPファイルが生成されます。エクスポートしたZIPファイルをインポート機能を使って他のLimeSurveyに'''インポート'''するか、他のLimeSurveyに手動でコピーして対応する[[Theme editor/ja#.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E5.A0.B4.E6.89.80|テンプレートディレクトリー]]に展開します。


==Import/Export/Copy a Template==
ただし、LimeSurveyのテンプレートエディターで、テンプレート のインポート／エクスポート／コピー機能を使うことを推奨します。


When you '''export '''a template, this will create a zip-file archive with all the files your template consists of (.pstpl files, images, css files, ...). You can simply '''import '''the exported zip-file at other LimeSurvey systems by using the import feature or you can manually copy the archive to another installation and extract it into the corresponding template directory there. If you copy the template in the same installation, you will need to rename the folder to create another named copy of that template.
===ページ構成 / テンプレートの利用===
*'''ようこそページ:''' startpage.pstpl、welcome.pstpl、privacy.pstpl、navigator.pstpl、endpage.pstpl
*'''質問ページ:''' startpage.pstpl、survey.pstpl、startgroup.pstpl、groupdescription.pstpl、question.pstpl、endgroup.pstpl、endpage.pstpl
*'''最終ページ:''' startpage.pstpl、assessment.pstpl、completed.pstpl、endpage.pstpl


If the file and directory permissions are open for the LimeSurvey application to write, then you can use the programs '''copy '''and rename features to make a local copy of a template.
===テンプレートファイル===


==Page Structure / Template Use==
以下のテンプレートファイルは、アンケート作成時に使用され、新たに作成したテンプレートフォルダーになければなりません。
*'''The Welcome Page:''' startpage.pstpl, welcome.pstpl, privacy.pstpl,  navigator.pstpl, endpage.pstpl
*'''startpage.pstpl:''' HTMLページのスタート部分を形成します。"<head>"タグで始まります（"<html>"タグを含んではなりません）。この、標準的なHTMLページの'冒頭部分'はスクリプトで書かれています。startpage.pstplファイルには<body>タグを含めます。多くのブラウザーは、W3 HTML標準に厳格に従わないことも許容していますが、LimeSurveyスクリプトでは、JavaScriptエレメントを実行するため、<body>タグがなければなりません。startpage.pstplファイルに、多くの'キーワード'を入れる必要はありませんが、タイトルに{SURVEYNAME}を入れたいと思うでしょう。startpage.pstplファイルには、対応するendpage.pstplファイルで閉じるコードを入れることができます。例えば、このファイルでテーブルを開始し、endpage.pstplファイルで閉じるような場合です。LimeSurveyで使用されるあらゆるページはstartpage.pstplとendpage.pstplファイルに挟まれます。
*'''The Questions Pages:''' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl
*'''survey.pstpl:''' このテンプレートは、ほとんどのページで使用されるもので、アンケートの名前と説明を表示させます。このテンプレートは、対応する'閉じる'テンプレートはなく、このテンプレートファイルで開いたタグはすべてこのファイルの中で閉じなければなりません（例えば、閉じるものがなくなるので、テーブルを開いたままにしてはいけません）。
*'''The Submit Page:''' startpage.pstpl, survey.pstpl, submit.pstpl, (privacy.pstpl), navigator.pstpl, endpage.pstpl
*'''welcome.pstpl:''' このテンプレートはようこそ画面で使用されます（全体が1ページで構成されるアンケート画面を含みます）。歓迎のテキストのほか、アンケートを始める前に提供すべき情報を表示できます。'survey.pstpl'と同様、対応する'閉じる'テンプレートはないので、このテンプレートファイルで開いたタグは同様に閉じなければなりません。
*'''The Final Page:''' startpage.pstpl, assesment.pstpl, completed.pstpl, endpage.pstpl
*'''startgroup.pstpl:''' このテンプレートは、グループの質問をくるむものです。このファイルで開いたタグを閉じることができる'endgroup.pstpl'テンプレートがあるので、この中でテーブルを開くことができます。
*'''groupdescription.pstpl:''' このテンプレートファイルは、グループの説明を表示するために使用します。アンケート設定（'''プレゼンテーション'''タブの''表示とナビゲーション設定''からアクセス）から、グループの説明を表示するかどうかを設定します。表示しない設定の場合、このファイルは無視されます。
*'''question.pstpl:''' このファイルは、アンケートの質問、回答、ヘルプテキストから構成されます。"グループごと"と"一括"型のアンケートでは、このテンプレートは質問ごとに繰り返されます。対応する'閉じる'ファイルがないので、すべてのタグを閉じる必要があります。
*'''question_start.pstpl:''' このファイルには、質問の初めに表示される個々のエレメントが含まれます。{QUESTION}キーワードによって、'question.pstpl'ファイルに取り込まれます。これは、テンプレートデザイナーが質問のレイアウトをもっとコントロールしたい場合に使用します。このテンプレートは通常のテンプレートシステムの外にあり、'''LimeSurvey 1.87以降置き換えられています'''。このテンプレートのキーワードは、question.pstplで直接利用できます。
*'''completed.pstpl:''' このページは、アンケートの回答が保存され、アンケートが終了したときに、最終ページとして表示されます。アンケート設計時に設定した"転送リンク"を表示する場合に使用します。
*'''endgroup.pstpl:''' このファイルはグループを閉じるもので、startgroup.pstplファイルで開いたすべてのタグを閉じます。
*'''navigator.pstpl:''' このファイルには、アンケートをナビゲートするための"次へ"、"前へ"、"最終"、"送信"、"保存"、"クリア"ボタンが含まれます。最終ページ以外のすべてのページで使用されます。
*'''printanswers.pstpl:''' このファイルには、アンケートの印刷バージョンで必要なHTMLラッパーが含まれます。
*'''print_group.pstpl:''' このファイルはstartgroup.pstplとendgroup.pstplファイルと同様で、印刷バージョンで使われます。
*'''print_question.pstpl:''' このファイルはquestion.pstplと同様で、印刷バージョンで使われます。
*'''print_survey.pstpl:''' このファイルはsurvey.pstplと同様で、印刷バージョンで使われます。


==Template Files==
=== CSSとJavascript===


The following template files are used to produce your public survey and must exist in any new template folder you create:
template.css（CSS用）とtemplate.js（Javascript用）の二つは、テンプレートで必ず使われます。
*'''startpage.pstpl:''' Produces the start of each html page. It starts at the "<head>" tag, and should not contain the "<html>" tag. This 'very beginning' of a standard html page is written by the scripts. Please ensure that your startpage.pstpl files contains a <body> tag, even though many browsers do not require strict adherence to the W3 HTML stanards, the LimeSurvey script needs to find a <body> tag, to run certain javascript elements. It is not expected that many 'keywords' will be used in the startpage.pstpl file, however you may wish to put the {SURVEYNAME} into the title. The startpage.pstpl file can contain code that ends in the corresponding endpage.pstpl file, so you can start a table in this file and close the table in the endpage.pstpl file. The startpage.pstpl and endpage.pstpl files wrap around every possible page used by LimeSurvey.
*'''{TEMPLATECSS}:''' 既定のCSSであるtemplate.css（RTL言語ではtemplate-rtl.css）へのリンクに置き換えられます。
*'''survey.pstpl:''' This template is the second used on most pages, and provides a space to put the survey name and description. This template does not have a corresponding 'closing' template, and subsequently you should close all tags opened in this template file (ie: don't leave a table open here because there is nowhere else to close it)
*'''{TEMPLATEJS}:''' 既定のJavascriptファイルであるtemplate.jsとLimeSurveyに必要なすべてのjsファイルへのリンクに置き換えられます。
*'''welcome.pstpl:''' This template is only used in the welcome screen (which is also on the main page for 'all in one' surveys). You can use this to print out the welcome text, and other information that should be provided in the introduction. Like the 'survey.pstpl' file, there is no corresponding 'closing' template, so all tags opened in this template file should be closed as well.
*'''startgroup.pstpl:''' This template can provide a 'summary' wrap around for questions within a group. It has a matching 'endgroup.pstpl' template that can be used to close any opened tags in this file, so you can open a table within this.
*'''groupdescription.pstpl:''' This template file is used to display a description of a group. It is separate to the startgroup.pstpl file because in a "question by question" survey it will be displayed on its own unique page in between groups, whereas in a "group by group" or "all in one" survey it provides a header to the subsequent questions. groupdescription.pstpl does not have a corresponding 'closing' template file, so all tags should be closed.
*'''question.pstpl:''' This file contains the question, answer and help text sections of your survey, and in the "group by group" and "all in one" surveys this template is cycled repeatedly with each question. There is no corresponding closing file for this and all tags should be closed.
*'''question_start.pstpl:''' This file contains the individual elements found at the start of a question. It is included within 'question.pstpl' via the {QUESTION} keyword. It is intended to allow template designers more control over the layout of a question. This template sits outside the normal templating system and '''was superseeded (as of LS1.87)'''. All keywords from this template are now available directly in question.pstpl. NOTE: templates using question_start.pstpl will still work at least for a couple more versions of LS 1.x
*'''submit.pstpl (and privacy.pstpl):''' This page is the penultimate page for all types of survey (except the "all in one" type) where the participant is given an option to review questions before submitting their responses. It provides privacy information where a survey is anonymous, which it extracts from the '''privacy.pstpl''' file.
*'''completed.pstpl:''' This page is displayed as the final page when the survey responses have been saved and the survey is over. It can be used to display a "forwarding link" as set in the survey setup.
*'''endgroup.pstpl:''' This file closes the group, and can be used to close off any tags opened in the startgroup.pstpl file
*'''navigator.pstpl:''' This file contains the buttons that navigate through the survey, "next", "prev", "last", "submit", "save so far"  and the "clear all" link. It is used in all pages except the completed page.
*'''printanswers.pstpl:''' This file has the HTML wrapper for the print version of the survey.
*'''print_group.pstpl:''' This file is the same as startgroup.pstpl endgroup.pstpl but for the print version of the survey.
*'''print_question.pstpl:''' This file is the same as question.pstpl but for the print version of the survey.
*'''print_survey.pstpl:''' This file is the same as survey.pstpl but for the print version of the survey.


== CSS and Javascript==
===Bootstrapの利用===
LimeSurveyはBootstrap 3を組み込んでいるので、正しく記述されたBootstrapクラスによってテンプレートにスタイルを適用することができます。
詳細は、[https://getbootstrap.com Bootstrapドキュメント]を参照してください。


Two files are allways used for template : template.css for css and template.js for javascript.
[https://github.com/flatlogic/awesome-bootstrap-checkbox Awesome-Bootstrap-Checkbox]プラグインも組み込まれています。これにより、Bootstrapのcolor-class（info、warning、dangerなど）と"-checkbox"や"-radio"で終わるクラスを使い、チェックボックスやラジオボタンを好きなデザインにすることができます。
*'''{TEMPLATECSS}:''' Add lines for default css, template.css and template-rtl.css for rtl language.
*'''{TEMPLATEJS}:''' Add lines for default javascript files, template.js and all js files needed for LimeSurvey.


=== Replacing default css or javascript===
====既定のCSS、Javascriptを置き換える====


Some question use specific files for javascript or css. You can use your own files. All files used in your survey included in ./scripts or in .//styles-public can be replaced, just put a file with the same name in your template.
特別なJavascript、CSSファイルを使用することができます。functionを置き換えたい場合は、カスケードシステムを使用します。Javascriptのfunctionでは、最後に読み込まれたものが使用されます。


==Other Template Files==
===その他のテンプレートファイル===


The '''privacy.pstpl''', '''invitationemail.pstpl''', '''reminderemail.pstpl''' and '''confirmationemail.pstpl''' are no longer used by LimeSurvey and defaults are instead set in the applicable language files. The email messages can now be edited on a survey by survey basis.
'''privacy.pstpl'''、'''invitationemail.pstpl'''、'''reminderemail.pstpl'''、'''confirmationemail.pstpl'''はLimeSurveyではもう使われておらず、既定値は言語ファイルに収録されています。メールメッセージはアンケートごとに編集することができるようになりました。


===置換／フィールド文字列===
===標準ページ===


There are ten standard pages that a survey participant may see in the course of taking or accessing the LimeSurvey application.  Each is constructed from a number of common '''Template''' files from the '''Template''' specified in the survey's settings.  The table below indicates which template files are used in constructing each of these pages.
アンケート参加者がLimeSurveyのアプリケーションにアクセスするときに目にする標準ページが10個あります。それぞれ、アンケートの設定で指定した'''テンプレート'''の共通のファイルから構成されます。次の表はどのテンプレートファイルがそれぞれのページを構成するかを示したものです。


{| class="wikitable"
{| class="wikitable"
!  '''Survey Pages:'''<br />'''Template Files'''!!Survey<br />List!!Welcome!!Question!!Completed!!Clear All!!Register!!Load!!Save!!Print<br />Answers!!Print<br />Survey
!  '''アンケートページ/'''<br />'''テンプレートファイル'''!!アンケートリスト<br />!!ようこそ!!質問!!完了!!すべてクリア!!登録!!読込み!!保存!!回答<br />印刷!!アンケート<br />印刷
|-
|-
|SurveyList||align="center" | [[File:check.gif]]|| || || || || || || || ||
|SurveyList||align="center" | [[File:check.gif]]|| || || || || || || || ||
Line 177: Line 173:
|}
|}


<span style='color:red'>'''*'''</span>NOTE: In versions 1.90 and up this replaces question.pstpl AND question_start.pstpl. If you are using an old custom template, you need to add the following line to the beginning of question.pstpl:<syntaxhighlight lang="php" enclose="div"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight>And then add the corresponding closing tag to the end of question.pstpl:<syntaxhighlight lang="php" enclose="div"></div></syntaxhighlight>
<span style='color:red'>'''*'''</span>注意: バージョン1.90+では、question.pstplとquestion_start.pstplが置き換えられています。古いカスタムテンプレートを使用している場合は、question.pstplの初めに次の行を追加します。<syntaxhighlight lang="php"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight>さらに、question.pstplの終わりに対応する閉じるタグを追加します。<syntaxhighlight lang="php"></div></syntaxhighlight>


<span style='color:red'>'''*'''</span>NOTE: In version 1.91 and earlier, LimeSurvey js files are not included by the template. In version 2, '''you have to use {TEMPLATEJS} in your one of your template file''' to add the link to the js file. You can add it in startpage.pstpl or in endpage.pstpl. You can remove the {TEMPLATEURL}/template.js line and you have to replace with {TEMPLATEJS} to update a personal template.
<span style='color:red'>'''*'''</span>注意: バージョン1.91以前では、LimeSurveyのjsファイルはテンプレートに含まれません。バージョン2では、jsファイルにリンクさせるため、'''テンプレートファイルのひとつに{TEMPLATEJS}を入れなければなりません'''。startpage.pstplかendpage.pstplに追加することができます。{TEMPLATEURL}/template.jsの行を削除し、パーソナルテンプレートを更新するため、{TEMPLATEJS}に置き換えなければなりません、


==The File Control Section==
===ファイルコントロールセクション===


In the "file control" window on the left, you can click on one of the template files that is used to compile the page. The HTML code for that file will then appear in the "Now editing" window in the center. If the template is editable (determined by directory permissions) you can then make any changes and save them.
左側の"ファイルコントロール"ウィンドウで、ページを編集するために使われるテンプレートファイルをクリックします。''画面パーツ''、JavaScript、CSSファイルがあります。そのファイルの中央のHTMLコードが"編集中"ウィンドウに表示されます。テンプレートが編集可能な場合（ディレクトリーに設定された権限による）、好きなように変更して保存することができます。


The "Other Files" window shows a list of all other files in the template directory. You can use the right side to '''upload and select image files (your pics, logos,...) or other files needed to create your template'''. Note: Instead of a link directly to each picture in your template you can use the field string {TEMPLATEURL}.  So instead of:
<center>[[File:File Control Section.png|center]]</center>


<syntaxhighlight lang="php" enclose="div">img src='/limesurvey/templates/yourtemplate/mypicture.jpg'</syntaxhighlight> You can use:


<syntaxhighlight lang="php" enclose="div">img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>
"その他のファイル"ウィンドウでは、テンプレートディレクトリーにあるその他のファイルの一覧が表示されます。右側から'''テンプレートを作成するために必要な画像ファイル（画像、ロゴなど）やその他のファイルのアップロードや選択'''ができます。


A "sample" of the template page you are editing will be visible at the bottom of the screen. There is no way to to delete a template from the template editor. This must be done by accessing the underlying directory and deleting the file there.


<div class="simplebox">'''Note:''' The shipped templates cannot be edited using the Template Editor and should never be changed. If you want to modify them, create a copy first and modify the copy.</div>
それぞれの画像へのリンクを使わずに、{TEMPLATEURL}という文字列を使います。つまり、


==Location of template files==
<syntaxhighlight lang="html4strict"">img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'</syntaxhighlight>
ではなく、次のようにします{{NewIn|2.50}}。
<syntaxhighlight lang="html4strict">img src='{TEMPLATEURL}files/mypicture.jpg'</syntaxhighlight>


LimeSurvey stores each of the 'standard' templates in their own distinct sub-directory within the /templates directory that is kept in the public directory with the other LimeSurvey public files. Customized user templates are stored in the /upload/templates directory.
LimeSurveyのバージョン2.50以前では、次のようにします。
<syntaxhighlight lang="html4strict">img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>


To create a new template, use the according icon in the template editor.
編集中のテンプレートページの"例"は、画面下部に表示されます。テンプレートエディタでテンプレートを削除することはできません。ディレクトリーにアクセスし、そこから手動でファイルを削除する必要があります。テンプレートの見た目をさらに評価するため、他の画面解像度を選択することもできます。


There should ALWAYS be a "default" directory in the templates directory. This template is used by default and as a fall-back if a template folder doesn't exist, or can't be found. The "default" directory comes with the package.
<div class="simplebox">'''注意:''' 同梱のテンプレートはテンプレートエディターで編集することはできません。編集する場合は、コピーを作成し、それを編集します。</div>


You can use any image files that you upload into the template management area with syntax like this:
===テンプレートファイルの場所===


<syntaxhighlight lang="php" enclose="div">{TEMPLATEURL}filename.xyz</syntaxhighlight>
LimeSurveyでは、他のpublicファイルが格納されているpublicディレクトリーに"/templates"ディレクトリーがあり、その中のテンプレートごとのサブディレクトリーに個々の'標準'テンプレートが格納されています。カスタマイズされたユーザーテンプレートは、''/upload/templates''ディレクトリーに格納されています。


=Styling questions with CSS=
テンプレートディレクトリーには、'''必ず'''"default"ディレクトリーがあります。このテンプレートは、既定として使われ、テンプレートフォルダーが見つからない場合の代理として使用されます。デフォルトでインストールされています。


Styling of questions in CSS has become much easier. Each question type now has a unique class. Mandatory question's also have an additional mandatory class. For example, for a non-mandatory question:
次の構文を使用して、テンプレート管理領域にアップロードした画像ファイルを使用することができます。


<syntaxhighlight lang="php" enclose="div"><div id="question5" class="gender">
<syntaxhighlight lang="php">{TEMPLATEURL}filename.xyz</syntaxhighlight>
 
==CSSによる質問のスタイリング==
 
CSSによる質問のスタイリングは簡単になりました。それぞれの質問タイプには固有のクラスがあります。必須の質問は更に必須項目としてのクラスがあります。例えば、必須ではない質問では、
 
<syntaxhighlight lang="html4strict"><div id="question5" class="gender">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question is mandatory
となっていて、一方、必須の質問では、


<syntaxhighlight lang="php" enclose="div"><div id="question5" class="gender mandatory">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender mandatory">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question is mandatory but the user didn't answer it or if there is validation on a question
となります。必須の質問でユーザーが回答しなかったり、質問で検証が設定されている場合、


<syntaxhighlight lang="php" enclose="div"><div id="question5" class="gender mandatory input-error">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender mandatory input-error">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question has validation applied but the user hasn't answered correctly
となります。質問に検証が適用され、回答が正しくない場合、次のようになります。


<syntaxhighlight lang="php" enclose="div"><div id="question6" class="text-short input-error">
<syntaxhighlight lang="html4strict"><div id="question6" class="text-short input-error">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


==Global classes for question part==
==質問パート全体のクラス==


This class are used for each question type. Some question type use only one or two class, but other can use much more.
このクラスはすべての質問タイプで使用されます。質問タイプにより、一つまたは複数のクラスが使われます。


{| class="wikitable alternance"
{| class="wikitable alternance"
|+ Global classes
|+ グローバルクラス
|-
|-
! scope="col" | Class name
! scope="col" | クラス名
! scope="col" | Part
! scope="col" | 適用箇所
! scope="col" | Question type
! scope="col" | 質問タイプ
! scope="col" | Examples
! scope="col" | 例
! scope="col" | Note
! scope="col" | 備考
|-
|-
! scope="row" | .question
! scope="row" | .question {{ObsoleteIn|3.0}}
| All question block
| 質問ブロック全体
| All question type
| すべての質問タイプ
|&lt;p class="question">, &lt;ul class="question">, &lt;table class="question">
|&lt;p class="question">, &lt;ul class="question">, &lt;table class="question">
|
|-
! scope="row" | .ls-answers {{NewIn/ja|3.0}}
| 質問ブロック全体
| すべての質問タイプ
|&lt;div class="ls-answers ">, &lt;ul class="ls-answers ">, &lt;table class="ls-answers">
|  
|  
|-
|-
! scope="row" | .subquestions-list
! scope="row" | .subquestions-list
| List of subquestion
| サブ質問のリスト
| Multi choice question, array question type
| 複数選択質問、配列質問タイプ
| &lt;ul class="subquestions-list">, &lt;table class="subquestions-list">
| &lt;ul class="subquestions-list">, &lt;table class="subquestions-list">
| .questions-list is used too
| .questions-listも使われます。
|-
|-
! scope="row" | .answers-list
! scope="row" | .answers-list
| List of answers
| 回答リスト
| Single choice question, array question type, Multi input text question
| 択一質問、配列質問タイプ、複数入力テキスト質問
| &lt;ul class="answers-list">, &lt;table class="answers-list">
| &lt;ul class="answers-list">, &lt;table class="answers-list">
|  
|  
|-
|-
! scope="row" | .answer-item
! scope="row" | .answer-item
| The answer part: one answer
| 回答部分: 単一の回答
| Single choice question, array question type, Multi input text question
| 択一質問、配列質問タイプ、複数入力テキスト質問
| &lt;li class="answer-item">, &lt;td class="answer-item">
| &lt;li class="answer-item">, &lt;td class="answer-item">
|
|
|-
|-
! scope="row" | .noanswer-item
! scope="row" | .noanswer-item
| The answer part for no answer
| 回答なしの回答部分
| Single choice question, array question type
| 択一質問、配列質問タイプ
| &lt;li class="noanswer-item">, &lt;td class="noanswer-item">
| &lt;li class="noanswer-item">, &lt;td class="noanswer-item">
| No answer is an answer too, then have double class noanswer-item and answer-item
| 回答なしも回答であり、noanswer-itemとanswer-itemの2つのクラスを持ちます。
|-
|-
! scope="row" | .question-item
! scope="row" | .question-item
| The question part: one question
| 回答部分: 単一の回答
| Multi text question, array question type
| 複数テキスト質問、配列質問タイプ
| &lt;li class="question-item">, &lt;tr class="question-item">
| &lt;li class="question-item">, &lt;tr class="question-item">
| Some answer are question too, then we have a lot of class="question-item answer-item"
| 質問でもある回答があります。class="question-item answer-item"となるものが多数あります。
|-
|-
! scope="row" | .checkbox-list
! scope="row" | .checkbox-list
| A list of checkbox
| チェックボックスのリスト
| Multi choice question, array number (checkbox) question type
| 複数選択質問、数値の配列（チェックボックス）質問タイプ
| &lt;ul class="checkbox-list">, &lt;tr class="checkbox-list">
| &lt;ul class="checkbox-list">, &lt;tr class="checkbox-list">
| Some question type have multi list class: like checkbox with comment : class="checkbox-list text-list"
| コメントつきチェックボックス: class="checkbox-list text-list"のように、multi-listクラスを使用する質問タイプがあります。
|-
! scope="row" | .checkbox-array  {{NewIn/ja|3.0}}
| チェックボックス配列
| チェックボックスオプションを使用した配列（数字）
| &lt;table class="checkbox-list">
|
|-
|-
! scope="row" | .checkbox-item
! scope="row" | .checkbox-item
| The answer part with a checkbox
| チェックボックスの回答部分
| Multi choice question, array number (checkbox) question type
| 複数選択質問、チェックボックスの配列（数字）質問タイプ
| &lt;li class="checkbox-item">, &lt;td class="checkbox-item">
| &lt;li class="checkbox-item">, &lt;td class="checkbox-item">
|
|
|-
|-
! scope="row" | .radio-list
! scope="row" | .radio-list
| A list of radio item
| ラジオボタンのリスト
| Single choice question, array question type
| 択一質問、配列質問タイプ（各列）
| &lt;ul class="radio-list">, &lt;tr class="radio-list">
| &lt;ul class="radio-list">, &lt;tr class="radio-list">
|
|-
! scope="row" | .radio-array {{NewIn|3.0}}
| ラジオボタンのリスト
| 配列質問タイプ
| &lt;table class="radio-array">
|
|
|-
|-
! scope="row" | .radio-item
! scope="row" | .radio-item
| The answer part with a radio
| ラジオボタンの回答部分
| Single choice question, array question type
| 択一質問、配列質問タイプ
| &lt;li class="radio-item">, <td class="radio-item">
| &lt;li class="radio-item">, <td class="radio-item">
|
|
|-
|-
! scope="row" | .text-list
! scope="row" | .text-list
| A list of text input
| テキスト入力のリスト
| Multi text question type, array of text
| 複数テキスト質問タイプ、配列（テキスト）
| &lt;ul class="text-list">, &lt;tr class="text-list">
| &lt;ul class="text-list">, &lt;tr class="text-list">
|
|
|-
|-
! scope="row" | .text-item
! scope="row" | .text-item
| The answer part of a text input
| テキスト入力の回答部分
| Multi text question type, array of text
| 複数テキスト質問タイプ、配列（テキスト）
| &lt;li class="text-item">, <td class="text-item">
| &lt;li class="text-item">, <td class="text-item">
|
|
|-
|-
! scope="row" | .numeric-list
! scope="row" | .numeric-list
| A list of text input with numeric only answer
| 数字入力に限定されたテキスト入力のリスト
| Multi numeric question type, array of number
| 数値入力（複数）質問タイプ、配列（数字）
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
|
|-
! scope="row" | .number-list
| 数字入力に限定されたテキスト入力のリスト（各列）
| 数値入力（複数）質問タイプ、配列（数字）
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .numeric-item
! scope="row" | .number-array  {{NewIn/ja|3.0}}
| The answer part of a numeric input
| 数字入力の回答部分
| Multi numeric question type, array of number
| 配列（数字）
| &lt;li class="numeric-item">, &lt;td class="numeric-item">
| &lt;table class="number-array">
|
|
|-
|-
! scope="row" | .select-list
! scope="row" | .select-list {{ObsoleteIn|2.50}}
| A list of select
| ドロップダウンリスト
| Array numbers, Dual scale array (select)
| 配列（数字）、二元スケール配列（ドロップダウン）
| &lt;table class="select-list">
| &lt;table class="select-list">
|
|
|-
|-
! scope="row" | .select-item
! scope="row" | .dropdown-list  {{NewIn/ja|2.50}}
| The answer part of a select
| ドロップダウンリスト
| Array numbers, Dual scale array (select), single choice with select
| 配列（数字）、二元スケール配列（ドロップダウン）（各列）
| &lt;table class="dropdown-list">
|
|-
! scope="row" | .dropdown-array  {{NewIn/ja|3.0}}
| ドロップダウンの配列
| 配列（数字）、二元スケール配列（ドロップダウン）
| &lt;table class="dropdown-array">
|
|-
! scope="row" | .select-item {{ObsoleteIn|2.50}}
| ドロップダウンの回答部分
| 配列（数字）、二元スケール配列（ドロップダウン）、ドロップダウンによる択一質問
| &lt;p class="select-item">, &lt;td class="select-item">
| &lt;p class="select-item">, &lt;td class="select-item">
|
|
|-
|-
! scope="row" | .hide
! scope="row" | .dropdown-item  {{NewIn/ja|2.50}}
| Used for accessibility: hidden with css but read by screenreader
| ドロップダウンの回答部分
| Short text question
| 配列（数字）、二元スケール配列（ドロップダウン）、ドロップダウンによる択一質問
| &lt;p class="dropdown-item">, &lt;td class="dropdown-item">
|
|-
! scope="row" | .hide {{ObsoleteIn|3.0}}
| アクセシビリティ対応: CSSにより非表示となりますが、スクリーンリーダーが読み上げます。2.50以降は、bootstrapのsr-onlyを使用できます。
| 自由回答（短い）
| &lt;label class="hide">
| &lt;label class="hide">
| Can be used for other purpose
| 他の目的で利用します。
|-
! scope="row" | .ls-js-hidden {{NewIn/ja|3.0}}
| JavaScriptが有効な場合に非表示となる部分で使用
| 例：ボタン
| &lt;div class="ls-js-hidden">
| LimeSurveyのコアで使用されていますが、テンプレートの中でも使用できます。
|-
! scope="row" | .ls-js-hidden-sr {{NewIn/ja|3.0}}
| アクセシビリティ対応: jsが有効な場合に非表示となりますが、スクリーンリーダーを利用する場合は常に表示されます。
| 例：ボタン
| &lt;a class="ls-js-hidden-sr">
| ボタン
|-
! scope="row" | .ls-no-js-hidden {{NewIn/ja|3.0}}
| JavaScriptが有効でない場合に非表示となる部分で使用
| リンク
| &lt;a class="ls-no-js-hidden">
| LimeSurveyのコアで、JavaScriptが有効でない場合に非表示のリンクで使用されています。
|-
! scope="row" | .ls-label-xs-visibility {{NewIn/ja|3.0}}
|  大画面で非表示とし、小さい画面（テーブルなし）やスクリーンリーダーで表示されるラベル
| ラベル
| &lt;label class="ls-no-js-hidden">
| 配列質問タイプのテーブル内のラベルで使用します。
|-
|-
! scope="row" | .dontread
! scope="row" | .ls-input-group-extra {{NewIn/ja|3.0}}
| Used for accessibility: not be read by screenreader
| bootstrapのinput-group-addonと同じ利用方法ですが、枠線と背景がありません。
| Array question type
| 右側の接尾辞
| &lt;th class="dontread">
| &lt;div class="ls-input-group-extra">
|
| 接尾辞・接頭辞で使用（グローバル）
|-
|-
! scope="row" | .checkbox
! scope="row" | .checkbox {{ObsoleteIn|3.0}}
| input[type=checkbox]
| input[type=checkbox]
| Question with checkbox
| チェックボックスを利用する質問タイプ
| &lt;input type="checkbox" class="checkbox">
| &lt;input type="checkbox" class="checkbox">
| With modern browser: not needed but some old browser need this
| 最新のブラウザーでは必要ありませんが、古いブラウザーでは必要となります。
|-
|-
! scope="row" | .radio
! scope="row" | .radio {{ObsoleteIn|3.0}}
| input[type=radio]
| input[type=radio]
| Question with radio
| 羅時をボタンを利用する質問タイプ
| &lt;input type="radio" class="radio">
| &lt;input type="radio" class="radio">
| With modern browser: not needed but some old browser need this
| 最新のブラウザーでは必要ありませんが、古いブラウザーでは必要となります。
|-
|-
! scope="row" | .text
! scope="row" | .text
| input[type=text]
| input[type=text]
| Question with input text, or textarea
| テキスト入力を利用する質問
| &lt;textarea class="text">
| &lt;textarea class="text">
|
|
|-
|-
! scope="row" | .answertext
! scope="row" | .answertext
| Array question </code>type
| 配列質問タイプ
| Answer part of array question type
| 配列質問タイプの回答部分
| &lt;th class="answertext">
| &lt;th class="answertext">
|
|
|-
|-
! scope="row" | .col-answers
! scope="row" | .col-answers
| Array question type
| 配列質問タイプ
| Column of answet
| 回答の列
| &lt;col class="col-answers">
| &lt;col class="col-answers">
|
|
|-
|-
! scope="row" | .odd .even
! scope="row" | .odd .even {{ObsoleteIn|2.50}}
| Array question type
| 配列質問タイプ
| Alternation for column
| 一列おき
| &lt;col class="odd">
| &lt;col class="odd">
|
|
|-
|-
! scope="row" | .odd .even
! scope="row" | .array1 .array2  {{ObsoleteIn|3.0}}
| Array question type
| 配列質問タイプ
| Alternation for column
| 一行おき
| &lt;col class="odd">
| &lt;tr class="array1">
|
|
|-
|-
! scope="row" | .array1 .array2
! scope="row" | .ls-odd .ls-even  {{NewIn/ja|3.0}}
| Array question type
| 配列質問タイプ
| Alternation for line
| サブ質問、Y軸の一行おき
| &lt;tr class="array1">
| &lt;tr class="ls-odd">
|
|
|}
|}
=== Some example of question part with classes===


'''text-short question type:'''
==== 質問部分のクラスの例====
<source lang="html4strict">
 
'''自由回答（短い）質問タイプ:'''<source lang="html4strict">
<p class="question answer-item text-item ">
<p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
</p>
</p>
</source>
</source>
 
'''自由回答（短い・複数）質問タイプ'''<source lang="html4strict">
'''Multiple short text'''
<source lang="html4strict">
<ul class="subquestions-list questions-list text-list">
<ul class="subquestions-list questions-list text-list">
   <li class="question-item answer-item text-item" id="javatbdSGQA">
   <li class="question-item answer-item text-item" id="javatbdSGQA">
Line 420: Line 487:
</ul>
</ul>
</source>
</source>
 
'''配列質問タイプ'''<source lang="html4strict">
'''Array question type'''
<source lang="html4strict">
<table class="question subquestion-list questions-list ">
<table class="question subquestion-list questions-list ">
<caption class="hide read">Some explanation for accessibility.</caption>
<caption class="hide read">Some explanation for accessibility.</caption>
Line 453: Line 518:
</table>
</table>
</source>
</source>
==The full list of question classes==
===質問のクラス一覧===


{|
{|
|'''Question Type'''||'''Question Class'''||'''Question ID'''
|'''質問タイプ'''||'''質問クラス'''||'''質問ID'''
|-
|5 point choice||.choice-5-pt-radio||5
|-
|-
|Array (10 point choice)||.array-10-pt||B
|5点尺度||.choice-5-pt-radio||5
|-
|-
|Array (5 point choice)||.array-5-pt||A
|配列（10点尺度）||.array-10-pt||B
|-
|-
|Array (Flexible Labels) dual scale||.array-flexible-duel-scale ||1
|配列（5点尺度）||.array-5-pt||A
|-
|-
|Array (Increase, Same, Decrease)||.array-increase-same-decrease||E
|二元スケール配列||.array-flexible-duel-scale ||1
|-
|-
|Array (Multi Flexible) (Numbers)||.array-multi-flexi ||:
|配列（増加／同じ／減少）||.array-increase-same-decrease||E
|-
|-
|Array (Multi Flexible) (Text)||.array-multi-flexi-text||;
|配列（数字）||.array-multi-flexi ||:
|-
|-
|Array (Yes/No/Uncertain)||.array-yes-uncertain-no||C
|配列（テキスト）||.array-multi-flexi-text||;
|-
|-
|Array (flexible labels)||.array-flexible-row ||F
|配列（はい／いいえ／どちらでもない）||.array-yes-uncertain-no||C
|-
|-
|Array (flexible labels) by column||.array-flexible-column||H
|配列||.array-flexible-row ||F
|-
|-
|Boilerplate question||.boilerplate||X
|軸を反転した配列||.array-flexible-column||H
|-
|-
|Date||.date||D
|式||.boilerplate||X
|-
|-
|Gender||.gender||G
|日付||.date||D
|-
|-
|Huge free text||.text-huge||U
|性別||.gender||G
|-
|-
|Language switch||.language||I
|自由回答（非常に長い）||.text-huge||U
|-
|-
|List (dropdown)||.list-dropdown||!
|言語の変更||.language||I
|-
|-
|List (flexible labels) (dropdown)||.list-dropdown-flexible||W
|リスト（ドロップダウン）||.list-dropdown||!
|-
|-
|List (flexible labels) (radio)||.list-radio-flexible||Z
|リスト（ラジオボタン）||.list-radio||L
|-
|-
|List (radio)||.list-radio||L
|リスト（コメントつき）||.list-with-comment||O
|-
|-
|List with comment||.list-with-comment||O
|自由回答（長い）||.text-long||T
|-
|-
|Long free text||.text-long||T
|数値入力（複数）||.numeric-multi||K
|-
|-
|Multiple numerical input||.numeric-multi||K
|複数選択||.multiple-opt||M
|-
|-
|Multiple options||.multiple-opt||M
|コメントつき複数選択||.multiple-opt-comments||P
|-
|-
|Multiple options with comments||.multiple-opt-comments||P
|自由回答（短い・複数）||.multiple-short-txt||Q
|-
|-
|Multiple short text||.multiple-short-txt||Q
|数字入力||.numeric||N
|-
|-
|Numerical input||.numeric||N
|順位付け||.ranking||R
|-
|-
|Ranking||.ranking||R
|自由回答（短い）||.text-short||S
|-
|-
|Short free text||.text-short||S
|はい／いいえ||.yes-no||Y
|-
|Yes/No||.yes-no||Y
|-
|-
|
|
|}
|}


==The full list of validation classes==
===検証のクラス一覧===


<div class="simplebox">Note:  Prior to 1.92, only .mandatory and .input-error classes were available.</div>
<div class="simplebox">注意:  1.92以前で使用できるクラスは、.mandatoryと.input-errorのみです。</div>


These apply to the help and/or validation tip messages so that each type can be individually styled.
これらは、ヘルプと検証TIPメッセージに適用され、タイプごとにスタイリングできます。


The .hide-tip option and .input-error options, by default, interact so that you can have validation tips start hidden, but appear when there validation errors, and disappear again when those errors are rectified.
既定では、.hide-tipと.input-errorは連動しており、検証TIPを非表示にしておくことができます。検証エラーが発生するとTIPが現れ、エラーが解消されると再び非表示になります。


All of these are designed to eliminate the need for pop-up alert messages.  Instead, tips can appear/disappear as needed, and are color-coded to indicate whether the answers pass the validation criteria.
これらは、ポップアップの警告メッセージの必要性をなくすためにデザインされています。代わりに、必要に応じてTIPが表示され、回答が検証式に適合したかどうかを表示色で示します。


Furthermore, when you first visit a page that has unmet validation criteria, you can color-code the tips in a pleasing color to show which validation criteria have not been med; then re-display the page using a harsher color if the person submits the page with lingering validation errors.
さらに、ページを開いたばかりの未回答状態で検証条件を満たさない場合は、検証条件を満たしていない旨のTIPはやさしい色で表示される一方、回答を送信して検証エラーが発生した場合は注意を促す色付けで表示されます。


{|
{|
|'''Purpose'''||'''CSS Class'''||'''Description'''
|'''目的'''||'''CSSクラス'''||'''説明'''
|-
|-
|Mandatory||.mandatory||the question is mandatory
|回答必須||.mandatory||質問への回答必須
|-
|-
|User input error||.input-error||the question had at least one validation error
|入力エラー||.input-error||少なくとも一つの検証エラーがある
|-
|-
|Hide Tip||.hide-tip||added if you use the hide_tip option
|TIP非表示||.hide-tip||hide_tipオプションを使用した場合に追加される
|-
|-
|Num answers||.em_num_answers||for for min_answers and max_answers
|数字回答||.em_num_answers||min_answers、max_answers向け
|-
|-
|Value range||.em_value_range||for min/max_num_value_n and multiflexible_min/max
|値の範囲||.em_value_range||min/max_num_value_n、multiflexible_min/max向け
|-
|-
|Sum range||.em_sum_range||for min/max/equals_num_value
|合計の範囲||.em_sum_range||min/max/equals_num_value向け
|-
|-
|Regex validation||.em_regex_validation||for regular-expression validation of the question
|正規表現による検証||.em_regex_validation||正規表現による検証向け
|-
|-
|Question-level validation function||.em_q_fn_validation||for the em_validation_q option
|質問レベルの検証機能||.em_q_fn_validation||em_validation_qオプション向け
|-
|-
|Subquestion-level validation function||.em_sq_fn_validation||for the em_validation_sq option
|サブ質問レベルの検証機能||.em_sq_fn_validation||em_validation_sqオプション向け
|-
|-
|Other comment mandatory||.em_other_comment_mandatory||for other_comment_mandatory option - shows when "other" is selected but associated comment is missing.
|「その他」コメント必須||.em_other_comment_mandatory||other_comment_mandatoryオプション向け（"その他"が選択されているがコメントがない場合に表示される）
|-
|-
|
|
|}
|}


==Importing styles into your custom template==
===カスタムテンプレートにスタイルをインポートする===


The custom question styles are near the bottom of each template's CSS file and start with:<syntaxhighlight lang="php" enclose="div">/* --------------------------- START: Question styles  ------------------------------ */</syntaxhighlight>
カスタマイズされた質問のスタイルは、それぞれのテンプレートのCSSファイルの最後のほうにあり、次の記述から始まります。<syntaxhighlight lang="php">/* --------------------------- START: Question styles  ------------------------------ */</syntaxhighlight>


If you're styling your own custom template, You should be able to copy everything after the above from templates/default/template.css (for tables based layouts) or /templates/limespired/template.css (for CSS based layouts) into your own style sheet without any impact on your other styles.
カスタムテンプレートの他のスタイルに影響を与えずにスタイルを適用する場合は、''templates/default/template.css''（テーブルベースのレイアウトの場合）と''/templates/limespired/template.css''（CSSベースのレイアウトの場合）の中にある上記の行の後のすべての記述を独自のスタイルシートにコピーしなければなりません。


==Internet Explorer conditional style sheets==
===Internet Explorer向けの条件付きスタイルシート===


Because of the marked discrepancies in rendering between IE6, IE7 and most other browsers, there are special IE conditional style sheets included for each template.
IE6・IE7とその他のブラウザーの間のレンダリングには著しい違いがあるため、各テンプレートにはIE向けの特別な条件付きスタイルシートがあります。


<syntaxhighlight lang="html4strict" enclose="div">
<source lang="html4strict">
<!--[if IE]>
<!--[IE（IEむけ）]>
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]-->
<![endif]-->
<!--[if lt IE 7]>
<!--[if lt IE 7（IE 7以前向け）]>
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]-->
<![endif]-->
<!--[if IE 8]>
<!--[if IE 8（IE 8向け）]>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->
<![endif]-->
</syntaxhighlight>
</source>


You should include the above code within your '''startpage.pstpl''' and copies of both the IE style sheets from either /templates/default/ or /templates/limespired for Tables base layout and CSS based layout respectively.
上記のコードを '''startpage.pstpl'''の中、''/templates/default/''または''/templates/limespired''からテーブルベースのレイアウト用とCSSベースのレイアウト用のそれぞれのIEスタイルシートのコピーに入れます。


<div class="simplebox">'''Note:''' If you copy the styles into your own style sheet you will almost certainly need to tweak them.</div>
<div class="simplebox">'''注意:''' 独自のスタイルシートにスタイルをコピーする場合、ほとんどの場合、調整を加える必要があります。</div>


===Alternative solution for Internet explorer===
====Internet explorer向けの別のソリューション====


You can put conditional class for body in startpage.pstpl, and use this class in your template.css
bodyの条件付きクラスをstartpage.pstplに配置し、このクラスをtemplate.cssで使用できます。このメソッドは、citronadeテンプレート{{ObsoleteIn|2.06}}で使用されます。JavaScriptが動作するシステムにはjsクラス、動作しないシステムにはno-jsクラスを追加します。


<syntaxhighlight lang="php" enclose="div"><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT}"></syntaxhighlight>
<source lang="html4strict"><!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script></source>


And in template.css use
また、template.cssでは次のように使用します。


<syntaxhighlight lang="php" enclose="div">.ie6{/*specific for internet explorer */}
<source lang="css">.ie6{/*internet explorer 6向け*/}
.ie{/*specific for all internet explorer */}</syntaxhighlight>
.ielt8{/*internet explorer 6、7向け*/}
.ie{/*すべてのinternet explorer向け */}</source>


You can see this alternative in citronade template.
=== 右から左に記述する（RTL）言語と均等割り付け===


== Right-to-Left (RTL) Languages and justify==
LimeSurveyのテキストエディターは、RTLテキストを書式設定できます。しかし、エディター自体は、均等割り付けしたときにRTL言語を左から右の形式で表示します。これはエディターの表示上の問題です。RTLで均等割り付けされた質問またはテキストは、アンケートやプレビューでは正しく右から左に表示されます。


The text editor within LimeSurvey is able to format RTL Text. However, the editor itself shows the RTL language in a left to right format when justified.  This is just an editor display issue. The RTL and justified question or text will display correctly from right to left, even when justified, in your survey or on preview.
===キーワード===


==Keywords==
{{Deprecated/ja|3.0}}


Keywords within a template file get replaced by the current survey information. They are surrounded by curly brackets, for example: {SURVEYNAME}
テンプレートファイル内のキーワードは、現在のアンケート情報に置き換えられます。中括弧で囲まれています（例：{SURVEYNAME}）。


The following strings will be replaced by LimeSurvey when parsing the template file and presenting it to survey users. These field strings will work on almost every template except for the 'Completed Page'. (Most of these strings can be found in the common.php file. If it's not there, look in the index.php file.)
次の文字列は、テンプレートファイルを解析してアンケートユーザーに提示するときにLimeSurveyに置き換えられます。これらのフィールド文字列は、'完了ページ'以外のほぼすべてのテンプレートで機能します。（これらの文字列のほとんどはcommon.phpファイルにありますが、そこにない場合はindex.phpファイルを見てください。）


{|class=wikitable
{|class=wikitable
!'''Keyword'''!!'''Template files'''!!'''Description'''
!'''キーワード'''!!'''テンプレートファイル '''!!'''説明'''
|-
|{SURVEYNAME}||すべてのファイル||アンケートのタイトル
|-
|-
|{SURVEYNAME}||All Files||The survey title
|{SURVEYDESCRIPTION}||すべてのファイル||アンケートの説明
|-
|-
|{SURVEYDESCRIPTION}||All Files||The survey description
|{WELCOME}||すべてのファイル（主にwelcome.pstpl）||アンケートの'ようこそ'テキスト
|-
|-
|{WELCOME}||All files (mainly for welcome.pstpl)||The survey 'welcome' text
|{PERCENTCOMPLETE}||survey.pstpl||アンケートの完了率を示す小さなグラフ
|-
|-
|{PERCENTCOMPLETE}||survey.pstpl||A small graph showing the percentage of the survey completed
|{GROUPNAME}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||現在のグループ名を表示します。
|-
|-
|{GROUPNAME}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Displays the current group name
|{GROUPDESCRIPTION}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||現在のグループの説明を表示します。
|-
|-
|{GROUPDESCRIPTION}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Displays the current group description
|{NUMBEROFQUESTIONS}||welcome.pstpl||アンケートの質問総数（数字のみ）を表示します。
|-
|-
|{NUMBEROFQUESTIONS}||welcome.pstpl||Displays the total number of questions in the survey (just the number)
|{THEREAREXQUESTIONS}||welcome.pstpl||関連する言語ファイルから"このアンケートはX問あります"という文が表示されます。Xは質問の数で置き換えられます。これは、単数形または複数形に対しても適切に機能します。質問が1つしかない場合、"このアンケートは1問あります"と表示されます。
|-
|-
|{THEREAREXQUESTIONS}||welcome.pstpl||Displays the sentence "There are X questions in this survey" - from the relevant language file. The X is replaced with the number of questions. Note that this will also work appropriately for singular or plural. If there is only 1 question, it will print "There is 1 question in this survey".
|{CHECKJAVASCRIPT}||すべてのファイル（主にwelcome.pstpl）||エンドユーザーのブラウザでJavaScriptが無効になっているときの警告メッセージ
|-
|-
|{CHECKJAVASCRIPT}||All files (mainly for welcome.pstpl)||Warning message when end-user browser have javascript disabled
|{QUESTION}||Question.pstpl||（'''LS1.87から置き換えられました'''）現在の質問のテキストを表示します（{QUESTION}の書式は、'question_start.pstpl'を編集することによってカスタマイズできます）。 次のものを使用します：{QUESTION_TEXT}、{QUESTION_MANDATORY}、{QUESTION_HELP}、{QUESTION_MAN_MESSAGE}、{QUESTION_VALID_MESSAGE}、{QUESTION_INPUT_ERROR_CLASS}、{QUESTION}の代わりのラッピングHTML
|-
|-
|{QUESTION}||Question.pstpl||('''Has been superseeded but the {QUESTION_...} keywords as of LS1.87''') Displays the current question text (The format of {QUESTION} can customised by editing 'question_start.pstpl') Use the following: {QUESTION_TEXT}, {QUESTION_MANDATORY}, {QUESTION_HELP}, {QUESTION_MAN_MESSAGE}, {QUESTION_VALID_MESSAGE} and {QUESTION_INPUT_ERROR_CLASS} and appropriate wrapping HTML instead of {QUESTION}
|{ANSWER}||question.pstpl, print_question.pstpl||現在の質問に対する回答フォームを表示します。
|-
|-
|{ANSWER}||question.pstpl, print_question.pstpl||presents the answer form for the current question
|{SGQ}||question.pstpl, question text||現在の質問のSurvey-Group-Question idを表示することにより、質問の入力フィールドを動的に参照するために、質問テキストの中で使用できます（svn build 9755現在）。
|-
|-
|{SGQ}||question.pstpl, question text||Can be used in the question text itself, to reference the input field of the question dynamically by displaying the Survey-Group-Question id for the current question. (as of svn build 9755)
|{QUESTIONHELP}||question.pstpl, print_question.pstpl||現在の質問のヘルプテキスト（質問タイプごとにあらかじめ決められたヒント）を表示します。
|-
|-
|{QUESTIONHELP}||question.pstpl, print_question.pstpl||Displays help text (predefined tip for question type) for the current question
|{QUESTION_CLASS}||question.pstpl, print_question.pstpl||各質問タイプに固有のクラスです（質問を包含するタグに含められます）。
|-
|-
|{QUESTION_CLASS}||question.pstpl, print_question.pstpl||unique class for each question type. (To be included in the question's wrapping tag.)
|{QUESTION_CODE}||question.pstpl, print_question.pstpl||現在の質問コードを表示します。
|-
|-
|{QUESTION_CODE}||question.pstpl, print_question.pstpl||Displays the current question code
|{QUESTION_ESSENTIALS}||question.pstpl||質問IDと（条件付き質問の場合）、'style="display:none;"'（質問を包含するタグに含められます）。
|-
|-
|{QUESTION_ESSENTIALS}||question.pstpl||the question ID and (if a question is conditional), 'style="display:none;"'. (To be included in the question's wrapping tag.)
|{QUESTION_HELP}||question.pstp, question_start.pstpl||現在の質問に対しユーザーが定義したヘルプテキストを表示します。
|-
|-
|{QUESTION_HELP}||question.pstp, question_start.pstpl||Displays the user defined help text for the current question
|{QUESTION_TYPE_HELP}||print_question.pstp||現在の質問に対しユーザーが定義したヘルプテキストを表示します。
|-
|-
|{QUESTION_TYPE_HELP}||print_question.pstp||Displays the user defined help text for the current question
|{QUESTION_INPUT_ERROR_CLASS}||question.pstp, question_start.pstpl||ユーザー入力エラーがあった場合に適用されるクラスです。
|-
|-
|{QUESTION_INPUT_ERROR_CLASS}||question.pstp, question_start.pstpl||Provides a class if there was user input error
|{QUESTION_ID}||print_question.pstp||個別の質問のスタイリングを可能にするために、各質問に一意のIDを付与します。
|-
|-
|{QUESTION_ID}||print_question.pstp||Provides a unique ID for each question to allow styling for specific questions
|{QUESTION_TEXT}||question.pstp, print_question.pstp, question_start.pstpl||現在の質問のテキストを表示します。
|-
|-
|{QUESTION_TEXT}||question.pstp, print_question.pstp, question_start.pstpl||Displays the text for the current question
|{QUESTION_MANDATORY}||question.pstp, print_question.pstp, question_start.pstpl||現在の質問に関する翻訳された'必須'テキストを表示します。
|-
|-
|{QUESTION_MANDATORY}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated 'Mandatory' text for the current question
|{QUESTION_MAN_CLASS}||question.pstpl, print_question.pstpl||質問が必須の場合のクラスです（質問を包含するタグに含められます）。
|-
|-
|{QUESTION_MAN_CLASS}||question.pstpl, print_question.pstpl||class if a question is mandatory. (To be included in the question's wrapping tag.)
|{QUESTION_MAN_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||現在の質問に関する翻訳された'必須'ヘルプメッセージテキストを表示します。
|-
|-
|{QUESTION_MAN_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated 'Mandatory' help message text for the current question
|{QUESTION_NUMBER}||print_question.pstpl||質問番号。
|-
|-
|{QUESTION_NUMBER}||print_question.pstpl||Incremental count of questions.
|{QUESTION_VALID_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||現在の質問に関する翻訳された'有効'ヘルプメッセージテキストを表示します。
|-
|-
|{QUESTION_VALID_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated valid help message text for the current question
|{QUESTION_SCENARIO}||print_question.pstp||条件付き質問の'シナリオ'テキストを印刷します。
|-
|-
|{QUESTION_SCENARIO}||print_question.pstp||Prints out the 'scenario' text for conditional questions.
|{NAVIGATOR}||navigator.pstpl||ナビゲーションボタンを表示します（次へ、前へ、最後へ）
|-
|-
|{NAVIGATOR}||navigator.pstpl||Displays navigation buttons (next, prev, last)
|{CLEARALL}||すべてのファイル （navigator.pstplが対象）||"結果を破棄して終了"リンクを表示します。
|-
|-
|{CLEARALL}||All files (but intended for navigator.pstpl)||Displays the "Exit and Clear Results" link
|{COMPLETED}||completed.pstpl||登録時の'完了'メッセージを表示します（attribute_1フィールドとattribute_2フィールドが設定されているかどうかによって変化）。
|-
|-
|{SUBMITBUTTON}||submit.pstpl||Displays the final submit button
|{URL}||completed.pstpl||アンケートの'url'と'url text'を表示します。
|-
|-
|{COMPLETED}||completed.pstpl||Displays the 'completed' messagem for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
|{PRIVACYMESSAGE}||privacy.pstpl||アンケートを匿名に設定すると、プライバシーメッセージが表示されます。テキストは、言語ファイルで[[Translating LimeSurvey/ja|編集・翻訳]]することができます。privacy.pstplテンプレートを編集して手動で変更することもできます。
|-
|-
|{URL}||completed.pstpl||Displays the survey 'url' and 'url text'
|{TEMPLATEURL}||すべてのファイル||現在のテンプレートの場所へのURLです（テンプレート内の画像ファイルを参照するのに便利）。
|-
|-
|{PRIVACY}||submit.pstpl||Displays privacy information when survey is anonymous
|{SURVEYRESOURCESURL}||すべてのファイル||このアンケート用の現在のアップロードファイルのURLです（質問、グループなどの画像ファイルを参照するのに便利です）。
|-
|-
|{PRIVACYMESSAGE}||privacy.pstpl||The privacy message is shown if you set your survey to be anonymous. [[Translating LimeSurvey|The text can be edited/translated]] in the language files. This can also be changed manually by editing the privacy.pstpl template you wish to use.
|{SUBMITCOMPLETE}||endpage.pstpl||アンケートを完了したこととと、"送信"ボタンを押すようユーザーに知らせる（言語ファイルの）メッセージ。
|-
|-
|{TEMPLATEURL}||All Files||The URL to the current template location (useful for referencing image files in your template)
|{SUBMITREVIEW}||survey.pstpl||"<< 前へ"をクリックして回答を確認したり変更したりすることができる旨をユーザーに知らせるメッセージ（言語ファイルから）
|-
|-
|{SUBMITCOMPLETE}||endpage.pstpl||The statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button
|{SAVEDID}||All Files||ユーザーの'回答ID'を表示します。
|-
|-
|{SUBMITREVIEW}||survey.pstpl||The statement (from the language files) that tells the user they can review/change the answers they have made by clicking "<< prev"
|-
|-
|{TOKEN:FIRSTNAME}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users first name from the tokens table
|{QUEXMLPDF}||すべてのファイル||それまでに入力完了した回答を含むアンケートのqueXML PDFをエクスポートするボタンを表示します。
|-
|-
|{TOKEN:LASTNAME}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users last name from the tokens table***
|{TOKEN:FIRSTNAME}||すべてのファイル||***アンケート回答が匿名でない場合、トークンテーブルのユーザーの名に置き換えられます。
|-
|-
|{TOKEN:EMAIL}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users email from the tokens table***
|{TOKEN:LASTNAME}||すべてのファイル||***アンケート回答が匿名でない場合、トークンテーブルのユーザーの姓に置き換えられます。***
|-
|-
|{TOKEN:ATTRIBUTE_1}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_1 from the tokens table***
|{TOKEN:EMAIL}||すべてのファイル||***アンケート回答が匿名でない場合、トークンテーブルのユーザーのメールアドレスに置き換えられます。***
|-
|-
|{TOKEN:ATTRIBUTE_2}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_2 from the tokens table***
|{TOKEN:ATTRIBUTE_1}||すべてのファイル||***アンケート回答が匿名でない場合、トークンテーブルのユーザーのattribute_1に置き換えられます。***
|-
|-
|{ANSWERSCLEARED}||Preferably in navigator.pstpl||The "Answers Cleared" statement from the language files
|{TOKEN:ATTRIBUTE_2}||すべてのファイル||***アンケート回答が匿名でない場合、トークンテーブルのユーザーのattribute_2に置き換えられます。***
|-
|-
|{RESTART}||clearall.pstpl||URL to restart the survey
|{ANSWERSCLEARED}||Preferably in navigator.pstpl||言語ファイルの "回答の消去"メッセージ。
|-
|-
|{CLOSEWINDOW}||All Files (Preferably in navigator.pstpl)||URL to close current window
|{RESTART}||clearall.pstpl||アンケートを再開するURL。
|-
|-
|{REGISTERERROR}||register.pstpl||Shows any error messages in the register page (ie: "You must include an email address")
|{REGISTERERROR}||register.pstpl||登録ページにエラーメッセージが表示されます（例えば、"メールアドレスを入力する必要があります"）。
|-
|-
|{REGISTERMESSAGE1}||register.pstpl||The statement "You must be registered to complete this survey" from the language files
|{REGISTERMESSAGE1}||register.pstpl||言語ファイルの"のアンケートを実施するには、登録を行う必要があります。"というメッセージ。
|-
|-
|{REGISTERMESSAGE2}||register.pstpl||Details about registering from the language files
|{REGISTERMESSAGE2}||register.pstpl||言語ファイルの登録の詳細のメッセージ
|-
|-
|{REGISTERFORM}||register.pstpl||The actual form for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
|{REGISTERFORM}||register.pstpl||実際の登録フォーム。attribute_1フィールドとattribute_2フィールドが設定されているかどうかによって変わります。
|-
|-
|{SAVE}||Works suitable on navigator.pstpl||Displays the 'Save your responses so far' button to offer the user to save and come back later to continue the survey. If the Save option is deactivated in the survey properties the tag will not be shown and ignored.
|{SAVE}||navigator.pstplで動作||'今までの回答を保存する'ボタンを表示して、後でアンケートに戻るようにすることができます。アンケートプロパティで[保存]オプションを無効にすると、タグは表示されず無視されます。
|-
|-
|{LANGUAGECHANGER}||survey.pstpl||Displays a switch in multilingual surveys to change the question.
|{LANGUAGECHANGER}||survey.pstpl||多言語アンケートのスイッチを表示して質問を変更します。
|}
|}


==Input/Buttons==
===入力／ボタン===


Each "input" type in a survey has been given its own class name, so that you can add CSS to your "startpage.pstpl" file, and have some control over the appearance of form buttons and inputs. These class names are as follows:
アンケートの各"入力"タイプには独自のクラス名が与えられているため、"startpage.pstpl"ファイルにCSSを追加したり、フォームボタンや入力の外観をある程度制御することができます。クラス名は次のとおりです。
*'''submit''' (Submit Buttons)
*'''submit''' （送信ボタン）
*'''text''' (Text Inputs - for short free text, date and numerical type)
*'''text''' （テキスト入力 - 短い自由文、日付、数値タイプ）
*'''answertext''' (Text of answers)
*'''answertext''' （回答のテキスト）
*'''radio''' (Radio Buttons)
*'''radio''' （ラジオボタン）
*'''checkbox''' (Check Boxes)
*'''checkbox''' （チェックボックス）
*'''select''' (Select / List Boxes)
*'''select''' （セレクト／リストボックス）
*'''textarea''' (Large text inputs - for long free text)
*'''textarea''' （長いテキスト入力 - 長い自由文）
*'''clearall''' (The "Exit and Clear Survey" link)
*'''clearall''' （"回答を破棄して終了"のリンク）
*'''rank''' (The rank style question. Doesn't set the colour of the select box or the text boxes (these are set by relevant section above) but does allow changing of background colour, text colour and size etc for the rest of the ranking question)
*'''rank''' （順位付けスタイルの質問。選択ボックスやテキストボックスの色は設定しませんが、その他の順位付け質問の場合は背景色、テキストの色、サイズなどを変更できます）
*'''graph''' (The "percentage completed" graph table)
*'''graph''' （"完了率"のグラフテーブル）
*'''innergraph''' (The table inside the graph table - this contains the 0% and 100% text. Use this for changing the size of this text)
*'''innergraph''' （グラフテーブル内のテーブル - 0％と100％のテキストが含まれています。このテキストのサイズを変更します。）
*'''question''' (General settings for any question that is displayed within a table. Generally you should use this to make sure that their font size and colour is the same as you have used elsewhere as a default)
*'''question''' （テーブル内に表示されるすべての質問の一般的な設定です。通常は、これを使用して、他の場所で既定として使用したフォントサイズと色と同じになるようにします）
*'''mandatory'''  (Mandatory questions)
*'''mandatory'''  （必須の質問）
*'''input-error''' (User input error - for if a user has made a mistake with a mandatory question or question with validation)
*'''input-error''' （ユーザー入力エラー - ユーザーが必須の質問や検証つきの質問で間違えた場合）
*'''array1''' and '''array2''' (These two styles are cycled when presenting the range of answers for an array type question. This allows you to set an alternating background colour for these question types. '''Array1''' is also used for the column headings in these question types)
*'''array1'''と'''array2''' （配列型の質問について複数の回答を提示するときに、これらの2つのスタイルが交互に繰り返されます。こうした質問タイプで背景色を交互に変えることができます。'''Array1は、こうした質問タイプの列見出しにも使用されます。）
*'''errormandatory''' (Sets the colour and style of the "This question is mandatory" error message)
*'''errormandatory''' （"この質問は必須です"というエラーメッセージの色とスタイルを設定します。）
*'''warningjs''' (Sets the colour and style of the warning message displayed if the participant's browser has javascript disabled)
*'''warningjs''' （参加者のブラウザがJavaScriptを無効にしている場合に表示される警告メッセージの色とスタイルを設定します。）


There are also some elements that can be accessed using the ID of the element ('''#ID''' in CSS):
要素のIDを使用してアクセスできる要素もいくつかあります（CSSの'''#ID'''）。
*'''surveycontact''' (The contact message shown on the start page)
*'''surveycontact''' （開始ページに表示されるコンタクトメッセージ）
*'''tokenmessage''' (used for messages inside the survey, e.g. the session expired error message)
*'''tokenmessage''' （アンケート内のメッセージ、たとえばセッションの期限切れエラーメッセージなど）


An example of using these classes with style sheets can be found in the "bubblegum" template that comes with the LimeSurvey application.
HTMLのすべての部分を編集できるため、<syntaxhighlight lang="php"><div class='new_name'></div></syntaxhighlight>のようにテンプレートを囲んで、new_nameクラスのCSSを定義する必要はありません。


Because you can edit all the HTML aspects, there's no reason to surround your templates with a <div class='new_name'> and then define a css for that new_name class.
==プログレスバーのスタイル==


==Styling the progress bar==
プログレスバーの外観はCSSで変更できます。


'''Before version 1.87:'''
バーの背景色を変更するには、custom.cssファイルの最後に次のような記述を追加します（fruityテーマの例）。


The chart.jpg file is a simple one pixel image file which is used to create the progress bar image in the 'PERCENTCOMPLETE' table. If the file does not exist, LimeSurvey will use the default 'maroon' coloured image in the public directory. If you want to create a bar to match your own colour scheme, then you should save the color in this file. Remember it should be a '''JPEG''' file, 1 pixel x 1 pixel, in the colour desired.
<syntaxhighlight lang="php">.fruity .progress-bar {
 
'''Version 1.87 and newer:'''
 
The progress bar appearance can be modified with CSS.
 
To change the background colour of the bar, add something like the following to the end of your template.css file.
 
<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-header {
 background-color: #3300FF;
 background-color: #3300FF;
}</syntaxhighlight>
}</syntaxhighlight>


To change the border colour of the bar, add something like the following to the end of your template.css file.
バーの境界線の色を変更するには、custom.cssファイルの最後に次のような記述を追加します（fruityテーマの例）。


<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-content,
<syntaxhighlight lang="php">.fruity .progress-bar {
#progress-wrapper .ui-widget-header {
 border: 1px solid #FF0000;
 border: 1px solid #FF0000;
}</syntaxhighlight>
}</syntaxhighlight>


==Advanced Features Available to Developers==
==開発者が利用できる高度な機能==


Starting with version 0.99, LimeSurvey has integrated some user-made patches that allow for some special changes.  These very advanced features generally require changes to the underlying code base of LimeSurvey and should be done carefully so as not to introduce security holes.
LimeSurveyには、特別な変更を可能にするユーザー作成のパッチがいくつか統合されています。これらの非常に高度な機能は、（一般的に）LimeSurveyの根底にあるコードベースを変更する必要があり、セキュリティホールを生まないよう慎重に行う必要があります。


===Basic CMS Integration support===
====自作のJavascript関数のサポート====


<div class="simplebox">Deprecated: This function is not available anymore in version 2.0 or later</div>
アンケートページでJavascriptを実行する必要があるユーザーもいるかもしれませんが、BODY要素で'''checkconditions()'''を呼び出すことにより、これができなくなっています。この関数呼び出しはHEAD内の小さなJavaScript関数に置き換えられ、'''checkconditions()'''と'''template_onload()'''が存在するかどうかを呼び出す前に調べます。このようにして、テンプレート作成者は、HEADに既定のものを置き換える独自の'''template_onload()'''関数を作成できます。


To be able to integrate LimeSurvey into another CMS, use the following options in '''config.php''':
*XSS filterを無効にする: 全体設定 -> セキュリティで"HTMLのXSSフィルター"をオフにします。
*質問またはグループの説明のソースにスクリプトを入力します。


// Set $embedded to true and specify the header and footer functions if the survey is to be displayed embedded in a CMS
{{Note|詳細については、[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey|技術的な回避策のセクション]]を参照してください。}}


<nowiki>
$embedded = false;
$embedded_inc = "";               // path to the header to include if any
$embedded_headerfunc = "";        // e.g. COM_siteHeader for geeklog
$embedded_footerfunc = "";        // e.g. COM_siteFooter for geeklog
</nowiki>


Set '''$embedded = true;''' to enable CMS-embedding. By using the '''$embedded_inc''' variable one can include their own '''.php''' files.  By setting '''$embedded_headerfunc''' or '''$embedded_footerfunc''', one can call functions from within included files that output the relevant headers or footers instead of LimeSurveys default ones.
==TIP&トリック==


===Support for your own Javascript functions===
===言語固有の要素===


Some users may need to run Javascript on the survey pages, but calling '''checkconditions()''' in the BODY element made it impossible to do so.  This call has been replaced with a small JavaScript function in the HEAD that sniffs for the existence of '''checkconditions()''' and '''template_onload()''' before calling each.  This way a template author can create their own '''template_onload()''' function in the HEAD that replaces the default one.
アンケートに言語特有の文（例えば、各ページの最後にあるヘルプ）が必要な場合は、.pstlファイルに文を追加する（他の言語では表示しない）ことができます。template.cssで非表示にする場合、疑似セレクタ:langを使うこともできますが、互換性を高めるためにクラスを使用しています。


'''Version 1.87 and newer:'''
以下に、フランス語と英語の2つのヘルプ文があります。これをendpage.pstplに配置します。
*Disable XSS filter - in Global settings -> Security, set "Filter HTML for XSS" to No.
*Enter your script in the source of a question or group description.
*There are more details in the [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|workaround section]].


=Videos on Templates=
<syntaxhighlight lang="php"><div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
 
This video will demonstrate the basic and advanced template functions that are available to all LimeSurvey users. This includes changing the appearance of certain forms and inserting custom graphics. Additionally, it will thoroughly walk you through on how to edit and preview specific page templates, importing/exporting templates, modify appearance of questions in the CSS, customizing survey description page, and completed page.
 
[http://youtu.be/Uk3FQyDTIY0 LimeSurvey training video - template customization]
 
=Tips & Tricks=
 
==Some language specific element==
 
If you want to have some langage specific sentence in a survey, for example an help at end of each page, you can add in a .pstl file a sentence and hidding it for other langage. And hidding it in the template.css, we can use psuedo selector :lang, but for best compatibility, we use some class.
 
Example for a help sentence at bottom of the page, in french an english, put this on endpage.pstpl:
 
<syntaxhighlight lang="php" enclose="div"><div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<div class="en" lang="en">For some help, please call 000000</div></syntaxhighlight>
<div class="en" lang="en">For some help, please call 000000</div></syntaxhighlight>


and in template.css
template.cssでは次のようにします。


<syntaxhighlight lang="php" enclose="div">.lang-fr .en{display:none}
<syntaxhighlight lang="php">.lang-fr .en{display:none}
.lang-en .fr{display:none}</syntaxhighlight>
.lang-en .fr{display:none}</syntaxhighlight>


You can use it to for other sentence in your question before 1.92 ( in 1.92, there are better solutions).
===アンケートページのレイアウトを変更する===
 
==Change the layout of the survey page==


When editing a template this template can be assigned to a single survey while the survey list page, which is shown at www.yourdomain.org/limesurveyinstallfolder, lists all your surveys.
テンプレートを編集して保存した後は、アンケートの設定から選択されている場合にのみ、アンケートリストページに適用されます。既定のテンプレートにするには、LimeSurveyの'''全体設定'''にある'''全般'''タブに移動し、目的のテンプレートを選択します。以降、テンプレートとして"既定"のオプションを使用するテンプレートと、新たに作成されるテンプレートを加えたすべてのテンプレートは、新しく選択された既定のテンプレートを使用します。


To use your current template for this page you have change the according setting at the Global Settings screen; at older versions this change can be done by editing the $defaulttemplate setting at the config file: Copy this setting from config-defaults.php to config.php which overrides config-defaults.php and edit this setting to $defaulttemplate = 'yourtemplatename';
このページで現在のテンプレートを使用するには、'''全体設定'''から設定を変更する必要があります。以前のバージョンでは、この変更はconfigファイルで$defaulttemplate設定を編集することによって行うことができます。この設定を、config-defaults.phpから（config-defaults.phpより優先される）config.phpにコピーして次のように設定を編集します。<code lang="html">$defaulttemplate = 'yourtemplatename';</code>


==Import/Export of templates: Mac users==
===テンプレートのインポート／エクスポート: Macユーザー===


Mac users, please note: Mac OSX default archive utility may have problems with zip folders "generated on the fly".
<u>Macユーザー</u>の場合、Mac OSXの既定のアーカイブユーティリティで"オンザフライで生成された"zipフォルダに問題がある可能性があります。


a work around is to unix'es unzip from the command line:
コマンドラインからunixのunzipを実行することによって回避できます。


$ unzip template.zip -d template
$ unzip template.zip -d template
Line 838: Line 873:
 inflating: ...
 inflating: ...


or scripts in their mac-compiled counterparts:
もう1つの回避策は、macでコンパイルされたスクリプトを使用することです。


http://homepage.mac.com/roger_jolly/software/
===同じテンプレートで別々のロゴを使う===


==Changing your templates traffic light from red to green==
すべてのアンケートに同じテンプレートを使用し、アンケートごとにロゴを変更する場合は、テンプレート.pstplファイル内の{SID}プレースホルダを使用して、別の画像を参照できます。


If you haven't already, set the admin directory to read/write/execute (777). The files within it, however, may be set to read/execute only (chmod 755).
<syntaxhighlight lang="php"><img src="{TEMPLATEURL}files/logoImage-{SID}.png"></syntaxhighlight>


GO to file directory ie file manager, find templates directory.
=== カスタムファビコンを表示する===


1 change permission on eg"vallendar" (or any template of your choice) directory to read 777
ファビコンは、ブラウザのアドレスバー、ブックマークのリスト、タブに表示される小さなアイコンです。次のように自分のアイコンを表示することができます。
#ファビコンを作成する - Googleでたくさんのフリーファビコンジェネレーターを見つけることができます。
#新しいファビコンに "favicon.ico"と名前をつけ、テンプレートの/filesディレクトリーに配置します。
#'''startpage.pstpl'''の</head>タグの前に次のコードを追加します。


2 voila! the red traffic light on "vallendar" is now green.
<syntaxhighlight lang="html4strict"><link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"></syntaxhighlight>


3 NOTE: to restrict access for safety, when finished editing template files, change all templates files back to what they were eg 644
=== アンケート／質問ページごとに外観を変える===


==Replacing the help icon==
LimeSurveyでページごと（奇数ページ、偶数ページごと）に外観を変更したい場合は、CSSファイルの'''.page-odd'''クラスを使用して、奇数ページの外観を変更することができます。


When a question help text is shown then an help.gif image is used from the default template folder.
LimeSurvey 1.91+の既定のテンプレートの例。


You can replace this image by uploading a new help.gif, help.png or help.jpg in your custom template folder. It then will be automatically used instead of the default help icon.
<syntaxhighlight lang="php">
.page-odd table.question-group {
 background-color: #D2F2D3;
}</syntaxhighlight>


==Replacing an existing logo==
偶数ページと奇数ページを同じものにしたい場合は、template.cssの''.page-odd''のすべてのインスタンスを見つけ、スタイルを削除します。


'''Note''': Before uploading new logo delete previous one.
===二元スケール配列の垂直セパレータの境界線を作成する===


1. To edit logo go to &bdquo;<u>template.css</u>&rdquo;, you can find it here (see in screen):
二元スケール配列の垂直セパレータの境界線を作成するには、'''template.css'''ファイルに次の行を追加します。


[[File:1.PNG]]
<syntaxhighlight lang="php">
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
   border-right:solid 1px #00A8E1;
}
</syntaxhighlight>


2. Find and Click Search button, to find place where is logo style text.
''header_separator''は、ヘッダー"td"の区切り文字を入力するために使用します。"dual_scale_separator"は、二元スケール配列内のセパレータ列の指定に使用します。


[[File:2.PNG]]
===独自のロゴをアンケートリストに追加する {{NewIn/ja|3.0}} ===


3. Find in search <u>#logo</u> (It is logo design code)
# 最初に、使用したいテーマのテーマエディターを開きます。[[File:OpenThemeEditor.jpg]]
# fruityの使用をお勧めします、それは現状ベストのテーマです。
# その後、テーマを拡張し、後でわかるように名前を付けます。 [[File:ExtendTheme.jpg]]
# 次のビューで、使用するロゴをアップロードすることができます。[[File:UploadFileTheme.jpg]]
# 画面の右下にあるドロップダウンリストから、`アンケートリスト´というエディタ画面を選択します。[[File:OpenScreenSurveyList.jpg]]
# 次に左側のメニューで、`layout_survey_list.twig´を選択します。 [[File:EditLayoutSurveyListTwig.jpg]]
# エディターで126行目にスクロールし、マークされた部分をテーマにアップロードした画像のファイル名に変更します。[[File:ChangeSurveyListHeaderImageEditor.jpg]]
# ファイルを保存します。[[File:ThemeEditorSaveChanges.jpg]]
# デフォルトテーマを拡張したテーマに変更します。[[File:ChangeDefaultTheme.jpg]]


[[File:3.PNG]]
=== ロゴをアンケートページの中央に配置する===
この例は、"extends_fruity"テンプレート用です。他のテンプレートでは、必要なCSSが異なる場合があります。
# LimeSurveyの管理エリアにログインします。
# テーマエディターを開きます。：設定 > テーマ
# リストから"LimeSurvey Fruityテーマ"を探し、"テーマエディター"ボタンをクリックします。
# ページ下部付近の左側にあるファイル一覧から"custom.css"をクリックします。
# そのファイルに以下のCSSをコピーし、"変更を保存"を押します。


4. Edit style file
<syntaxhighlight lang="css">
.navbar-fixed-top > div.navbar-header {
    width: 100% !important;
}


You will see something like this code:
.navbar-fixed-top > div.navbar-header > div {
    width: 100% !important;
}


[[File:4.PNG]]
.navbar-fixed-top > div.navbar-header > div > img {
 
    margin: 0 auto 0 auto !important;
If you want change image just replace logo.gif to antoher image link. Like: (<u>logo.png</u>, <u>logo.jpg</u>, <u>logo.swf</u>).
}
</syntaxhighlight>


If you want change image size just change, width and height (in pixels) like:


<syntaxhighlight lang="php" enclose="div">Width:100px; Height:100px;</syntaxhighlight>


==Adding your own logo==
==カスタム質問ビュー {{NewIn/ja|3.0}}==  


1. Find and Open &bdquo;<u>startpage.pstpl</u>&rdquo; template file.
<div class="simplebox">'''注意:''' これは将来的に質問オブジェクトによって置き換えられる予定の一時的な機能です（カスタムビューを質問オブジェクトに移すのが非常に簡単になります）。既定では無効になっています。</div>


[[File:5.PNG]]
バージョン2.5では、質問と組み込み要素の一部について、テンプレート固有のカスタムビューを作成できます。複数のアンケートの特定の質問タイプのHTMLレイアウトを変更する場合に便利です。


2. Write in &bdquo;<u>startpage.pstpl</u>&rdquo; this line:
*application/config/config.phpで、'config'=>arrayを探し、次の行を配列に加えます。'allow_templates_to_overwrite_views'=>1
*/{your_template}/config.xmlで、"overwrite_question_views"をtrueに設定します。
*application/views/survey/*をtemplate/{your_view_directory}/survey/にコピーします。
*変更するファイルのみをコピーする必要がありますが、ファイル構造はapplication/views/survey/と同じでなければなりません。


<source lang="html4strict"><img id="page_logo" src="{TEMPLATEURL}logo.png"><br></source> After <source lang="html4strict" ><body ... ></source> tag
==テンプレートにカスタムCSSまたはJavaScriptファイルを挿入する==  


3. To add logo go to &bdquo;<u>template.css</u>&rdquo;, you can find it here (see in screen):
バージョン2.50以降では、config.xmlファイルを使用してプラグインファイルを自動的に読み込むことができます。


[[File:1.PNG]]
*テンプレートの/cssまたは/scriptsフォルダーにファイルをアップロードする
*/{your_template}/config.xmlで、<css>ブロックまたは<js>ブロックにファイルパスを追加します。<syntaxhighlight lang="xml"><css>
<filename>css/jquery-ui-custom.css</filename>
<filename>css/bootstrap-slider.css</filename>


3.1 Go to end of &bdquo;<u>template.css</u>&rdquo; style file.
<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
<filename>css/flat_and_modern.css</filename>


3.2 Write in end:
<filename>css/template.css</filename>


'''If you want in left side:'''
<filename>css/myCustomPlugin.css</filename>
</css>
<js>
<filename>scripts/template.js</filename>
<filename>scripts/bootstrap-slider.js</filename>


<syntaxhighlight lang="php" enclose="div">#page_logo{
<filename>scripts/myCustomPlugin.js</filename>
   float:left;
</js>
}</syntaxhighlight>
 
'''If you want in right side:'''
 
<syntaxhighlight lang="php" enclose="div">#page_logo{
   float:right;
}</syntaxhighlight>
 
'''If you want in center:'''
 
<syntaxhighlight lang="php" enclose="div">#page_logo{
   display: block;
   margin-left: auto;
   margin-right: auto;
}</syntaxhighlight>
 
==Use the same template with different logos==
 
If you want to use the same template for all surveys and just want to change the logo for each survey, you can use the {SID} placeholder in the template .pstpl file and thereby refer to different images:
 
<syntaxhighlight lang="php" enclose="div"><img src="{TEMPLATEURL}logoImage-{SID}.png"></syntaxhighlight>
 
==Remove the default help to all question (hide_tip)==
 
There are 2 solution to remove the default help, like a [[Advanced question settings|#hide_tip|hide_tip attribute]] but for all question and survey.
# you can remove the {QUESTIONHELP} and is container from the file question.pstl, but it can be a bad idea for screenreader.
# for the default template and some other , add this at the end of tempate.css
 
<syntaxhighlight lang="php" enclose="div">span.questionhelp{display:none;}</syntaxhighlight>
 
== Display custom favicon==
 
A favicon is the little icon you see in the browser's address bar, list of bookmarks or tab. You can display your own icon as follows:
#Create a favicon - google will find you lots of free favicon generators
#Name your new favicon "favicon.ico" and place it in your template directory
#Add the following code to your '''startpage.pstpl''' before the </head> tag
 
<syntaxhighlight lang="html4strict" enclose="div"><link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">
<link rel="icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon"></syntaxhighlight>
 
== Different appearance for survey-/question-pages==
 
(''Version 1.91 and newer'')
 
If you want LimeSurvey to change the appearance of every second page (i.e. of even and odd survey pages) you can use '''.page-odd''' class in your css file to change the appearance of odd pages.
 
example from default template of LimeSurvey 1.91+
 
<syntaxhighlight lang="php" enclose="div">
.page-odd table.question-group {
 background-color: #D2F2D3;
}</syntaxhighlight>
 
To '''not''' differentiate even and odd pages at the (default) template find all instances of ''.page-odd'' in template.css and remove those styles.
 
==Create a vertical separator  border for dual scale array==
 
To create a vertical separator border for a dual scale array you can add the following lines to your '''template.css'''-file.
 
<syntaxhighlight lang="php" enclose="div">
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
   border-right:solid 1px #00A8E1;
}
</syntaxhighlight>
</syntaxhighlight>


header_separator is used to adress the separator for the header "td" and "dual_scale_separator" is used to adress the separator column in the dual scale array.
==クラス定義（開発者向け）==


==Hide the survey contact message shown on the start page/survey list==
===answer-list===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|arrays/5point || A || tr
|-
|arrays/10point|| B|| tr
|-
|arrays/array || F || tr
|-
|arrays/column || H || trとcol
|-
|arrays/dualscale || 1 || tr
|-
|arrays/increasesamedecrease || E || tr
|-
|arrays/yesnouncertain || C || tr
|-
|gender || G || divとul
|-
|list_with_comment || O || div
|-
|ranking || R || ulとdiv
|-
|yesno || Y || ulとdiv
|-
|ranking_advanced || R || ulとdiv
|-
|listradio || L || div
|-
|5pointchoice || 5 || ul
|-
|multiplechoice || M || div
|-
|}


To hide the "Please contact ..." meassage on the start page (with the survey list) you can add the following to the '''$(document).ready''' function in the '''template.js''' of your used design template:


<syntaxhighlight lang="php" enclose="div">
===radio-list===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
| yesno || Y || ul
|-
|gender || G || ul
|-
|arrays/yesnouncertain || C || tr
|-
|arrays/increasesamedecrease || E || tr
|-
|arrays/dualscale || 1 || tr
|-
|arrays/5point || A || tableとtr
|-
|arrays/10point || B || tr
|-
|arrays/array || F || tr
|-
|arrays/column || H || col
|-
|listradio || L || div
|-
|list_with_comment || O || divに続くul
|-
|}


$('#surveycontact').hide(); //Hides the survey contact message
===radio-item===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|arrays/yesnouncertain || C || td
|-
|5pointchoice || 5 || li
|-
|arrays/10point || B || td
|-
|arrays/5point || A || td
|-
|arrays/array || F || td
|-
|arrays/column || H || td
|-
|arrays/dualscale || 1 || td
|-
|arrays/increasesamedecrease || E || td
|-
|gender || G || li
|-
|listradio || L || li
|-
|yesno || Y || li
|-
|listradio || L || liとdiv
|-
|image_select-listradio || L || liとdiv
|-
|list_with_comment || 0 || li
|-
|}


</syntaxhighlight>
===list-group===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|yesno || Y || ul
|-
|5pointchoice || 5 || ul
|-
|gender || G || ul
|-
|ranking || R || ul
|-
|ranking_advanced || R || ulとdiv
|-
|question_index_group_buttons ||  || div
|-
|question_index_questions_buttons ||  || div
|-
|}


==Remove the survey contact message shown on error messages==
===list-group-horizontal===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|yesno || Y || ul
|-
|5pointchoice || 5 || ul
|-
|gender || G || ul
|-
|}


If you want to remove the survey contact message from error messages it'll be trickier. You can add the following function call to the '''$(document).ready''' function in the '''template.css''' of your used design template:
===list-unstyled===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|list_with_comment || 0 || ul
|-
|listradio|| L || ul
|-
|multiplechoice|| M || ul
|-
|multiplechoice_with_comments|| P || ul
|-
|multiplenumeric|| K || ul
|-
|multipleshorttext|| Q || ul
|-
|ranking|| R || ul
|-
|ranking_advanced|| R || ul
|-
|bootstrap_buttons_multi|| M || ul
|-
|image_select-multiplechoice|| M || ul
|-
|inputondemand/multipleshorttext || Q || ul
|-
|register_error||  || ul
|-
|register_message||  || ul
|-
|layout_survey_list ||  || ul
|-
|load||  || ul
|-
|save||  || ul
|-
|captcha||  || ul
|-
|}


<syntaxhighlight lang="php" enclose="div">
===select-list===
removeContactAdressFromMessage(); //Removes the survey contact message from error messages
{|class=wikitable
</syntaxhighlight>
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|ranking|| R || ul
|-
|ranking_advanced|| R || ul
|-
|}


and add the following function to your *template.js* file
===checkbox-item===
{|class=wikitable
!'''質問'''!!'''質問タイプ'''!!'''要素'''
|-
|multiflexi (Array numbers)|| : || td
|-
|multiplechoice|| M || li
|-
|multiplechoice_with_comments|| P || div
|-
|image_select-listradio|| L || li
|-
|image_select-multiplechoice|| M || liとdiv
|-
|navigator||  || span
|-
|}


<syntaxhighlight lang="php" enclose="div">
===checkbox-text-item===
function removeContactAdressFromMessage()
{|class=wikitable
{
!'''質問'''!!'''質問タイプ'''!!'''要素'''  
if ($('#tokenmessage').length > 0)
|-
   {
|multiplechoice_with_comments|| P || li
   var oldMessage = $('#tokenmessage').html();
|-
   var indexContact = oldMessage.indexOf('Bitte kontaktieren');
|multiplechoice|| M || li
   var newMessage = oldMessage.substr(0, indexContact);
|-
   $('#tokenmessage').html(newMessage);
|image_select-multiplechoice|| M || li
   }
|-
}
</syntaxhighlight>


It will probably not work for an englisch survey and have to be extended when using for multilingual surveys. But it's an idea/tip how to solve this.
|}
 
==How to deal with multilingual question attributes (before version 2.0 at which those were added)==
 
If you have a multilingual survey and e. g. want to use a different string for the "other" field, this could only be done for the base language (until this feature was added at LimeSurvey 2.0). To work around this, paste in the field to change the label for "other"
 
<syntaxhighlight lang="php" enclose="div"><span class="en">New label</span><span class="fr">Nouveau label</span></syntaxhighlight>
 
At the template.css of your template (at /limesurvey/upload/templates/<yourtemplatename>/template.css) add:


<syntaxhighlight lang="php" enclose="div">html:lang(en) .fr{display:none}
[[Category:Theme]]
html:lang(fr) .en{display:none}</syntaxhighlight>
[[Category:Twig]]

Latest revision as of 05:30, 20 December 2023

Other languages:

はじめに

LimeSurvey は、開発者がアンケートの外観のカスタマイズを効率的に行える、高度なテーマとスタイルのシステムを備えています。かつては「テンプレート」の用語を用いていましたが、LS3 で「テーマ」と置き換えました。「テーマ」は、アンケートのページスタイルを制御できます。アンケート管理者は、既定のテーマを選択することができ、また個々のアンケートにカスタマイズを加えることができます。「テーマ」では、アンケート管理者がプログラムの技術をもたなくとも、ようこそ画面にロゴを追加したり、背景色を変更したり、フォントを選択したりといったことが簡単にできる設定を用意しています。


LimeSurvey には、3 つのテーマが付属しています。これらの初期テーマは、LimeSurveyのインストールディレクトリ下の「themes/survey/」ディレクトリーにあります。さらに個々のテーマごとにディレクトリーが分かれています。テーマのメインディレクトリーには、XML 形式の設定ファイル、テーマを構成する .twig ファイルを収めた「views 」、「css」、「scripts」、.jpg や .png を収めた「images」、その他、多くのディレクトリーが入っています。


LimeSurvey 2.50 以降、テーマエンジンは CSS フレームワークとして、Bootstrap 3 を使用しています。Bootstrap 3 は標準的なフレームワークなので、開発者はインターネット上で多くのドキュメント、チュートリアル、フォーラムでのやり取りを見つけることができます。


LimeSurvey 3 以降、テーマエンジンは、Twig を使用しており、テーマ開発者はアンケートレンダリングのロジックを安全かつ簡単に変えることができます。Twig はそれ以前のバージョンで使っていたキーワード置換システムに代わるものです。キーワードの HTML を生成するのに利用するロジックを、テーマのビューの中で利用できます。


Vanillaテーマのスニペット: 

<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>
    {# NOTE: If you want to customize the question rendering, use a question theme #}
    {{ aQuestion.answer | raw }}
</div>

テーマは、HTMLとTwigコードからできており、表示されるテキストの位置と形式、ページの同様の構造的特徴を定義します。テーマには他のファイルを参照したり取り込んだりすることが多くあります。ほとんどの場合、アンケートのすべてのページで共通に利用するフォントスタイル、色、背景や同様のパラメーターについて定義したカスケーディング・スタイル・シート（CSS）ファイルを参照します。スタイルシートは、HTMLコードに含まれる様々なオブジェクトタイプに関連づけられたクラスパラメーターを参照します。これにより、スタイルシートは、複数の場所に現れるテキストや他のオブジェクトをどのように表示させるかを規定できます。LimeSurveyでは質問タイプごとに固有のクラスがあり、それぞれの見た目を細かく規定することができます。ロゴや進捗バーで使用する画像ファイルもテーマファイルの中で参照されます。最後に、中括弧に挟まれた特別なキーワードは、対応する言語の翻訳として定義されたテキストに置き換えられます（例えば、それぞれの言語で書かれた'アンケートタイトル'、'質問文'など）。

新しいカスタムテーマを作成したら、LimeSurveyコミュニティーに共有し、他の人が使えるようにすることを検討してください。あなたの貢献によって、テーマ、アンケート、その他のアドオンが豊富になり、LimeSurveyがよりよいものになります。 テンプレートの共有については、LimeSurveyテンプレートリポジトリーを参照してください。

新しいテーマの作成

新しいテーマを作成する（既存のテーマを編集する）には、LimeSurveyでテーマ編集ユーザー権限を設定する必要があります。また、LimeSurveyをインストールしているOSのファイル操作権限も併せて設定します。

警告の注意: テーマを変更した場合、LimeSurveyにすでに存在するアンケートに影響を及ぼす可能性があります。テーマは、経験とHTMLの知識を必要とする高度な機能です。

新しいテーマを作成するには、上部のツールバーの設定にあるテーマエディター（下記参照）を通じて行うのが望ましいやり方です。ウェブインターフェースではなく、お気に入りのテキストエディターを使ってテーマファイルを編集したい人もいるでしょう。この場合でも、新しいテーマを作成するときはテーマエディターを使います。これにより、LimeSurvey_web_root/upload/themes/survey/your_new_templateディレクトリーに必要なすべてのファイルが配置され、基礎となるテーマが作成されます。この後、好みのテキストエディターを使ってテンプレートファイルを編集することができます。

パーミッションに関する注意: unix/linuxシステムでは、ウェブサーバーを起動しているグループやユーザーがテーマファイルのオーナーになっています（いくつかのシステムでは"www"かもしれません）。したがって、ファイルを編集するときは適切なアクセス権があるか確認するとともに、保存するときは所有権を変えないように注意しましょう。このようにすれば、ウェブのテーマ編集インターフェースを使うことができます。


LimeSurveyの'public'エレメントの多くはテーマによって調整することができます。次のセクションでは、テーマテンプレートについて簡単に説明します。

テーマファイルは複雑です。HTMLのほか、CSS、Twig、JavaScriptについて理解している必要があります。

LimeSurveyテーマエディター

テーマエディター： 設定 > テーマ > テーマエディター


  注意 : テーマが正しく構成されていない場合、そのテーマを利用しているアンケートは、正常に動作しません。



LimeSurveyテーマエディターは、テーマのコンテンツをオンラインで編集できます。テーマエディターを起動するには、設定メニューのテーマリンクをクリックし、編集したいテーマの隣にある"テーマエディター"ボタンをクリックします。


The button to access the theme editor for Bootswatch theme


テンプレートエディターページでは、編集／閲覧したいテンプレートを選択します。



下記のオプションが使用できます。


  • 作成: 新しいテンプレートを作成します。ゼロから作るのでなければ、'default'がコピーされます。
  • インポート: ZIPファイルでテンプレートをインポートします。
  • エクスポート: 現在のテンプレートをZIPファイルにエクスポートします。
  • コピー: 現在のテンプレートを新しいテンプレートとしてコピーします。
  • 名前を変更: テンプレートの名前を変更します。通常、コピーやインポートした後に使います。
  • テンプレート: LimeSurveyで利用できる状態にあるテンプレートをドロップダウンリストで表示します。
  • 画面: It is a drop-down list which allows you to choose which particular survey page of that template you want to look at.
  • 管理パネルに戻る

テンプレートのインポート／エクスポート／コピー

テンプレートをエクスポートするとき、テンプレートを構成するすべてのファイル（.pstplファイル、画像、cssファイルなど）がアーカイブされたZIPファイルが生成されます。エクスポートしたZIPファイルをインポート機能を使って他のLimeSurveyにインポートするか、他のLimeSurveyに手動でコピーして対応するテンプレートディレクトリーに展開します。

ただし、LimeSurveyのテンプレートエディターで、テンプレート のインポート／エクスポート／コピー機能を使うことを推奨します。

ページ構成 / テンプレートの利用

  • ようこそページ: startpage.pstpl、welcome.pstpl、privacy.pstpl、navigator.pstpl、endpage.pstpl
  • 質問ページ: startpage.pstpl、survey.pstpl、startgroup.pstpl、groupdescription.pstpl、question.pstpl、endgroup.pstpl、endpage.pstpl
  • 最終ページ: startpage.pstpl、assessment.pstpl、completed.pstpl、endpage.pstpl

テンプレートファイル

以下のテンプレートファイルは、アンケート作成時に使用され、新たに作成したテンプレートフォルダーになければなりません。

  • startpage.pstpl: HTMLページのスタート部分を形成します。"<head>"タグで始まります（"<html>"タグを含んではなりません）。この、標準的なHTMLページの'冒頭部分'はスクリプトで書かれています。startpage.pstplファイルには<body>タグを含めます。多くのブラウザーは、W3 HTML標準に厳格に従わないことも許容していますが、LimeSurveyスクリプトでは、JavaScriptエレメントを実行するため、<body>タグがなければなりません。startpage.pstplファイルに、多くの'キーワード'を入れる必要はありませんが、タイトルに{SURVEYNAME}を入れたいと思うでしょう。startpage.pstplファイルには、対応するendpage.pstplファイルで閉じるコードを入れることができます。例えば、このファイルでテーブルを開始し、endpage.pstplファイルで閉じるような場合です。LimeSurveyで使用されるあらゆるページはstartpage.pstplとendpage.pstplファイルに挟まれます。
  • survey.pstpl: このテンプレートは、ほとんどのページで使用されるもので、アンケートの名前と説明を表示させます。このテンプレートは、対応する'閉じる'テンプレートはなく、このテンプレートファイルで開いたタグはすべてこのファイルの中で閉じなければなりません（例えば、閉じるものがなくなるので、テーブルを開いたままにしてはいけません）。
  • welcome.pstpl: このテンプレートはようこそ画面で使用されます（全体が1ページで構成されるアンケート画面を含みます）。歓迎のテキストのほか、アンケートを始める前に提供すべき情報を表示できます。'survey.pstpl'と同様、対応する'閉じる'テンプレートはないので、このテンプレートファイルで開いたタグは同様に閉じなければなりません。
  • startgroup.pstpl: このテンプレートは、グループの質問をくるむものです。このファイルで開いたタグを閉じることができる'endgroup.pstpl'テンプレートがあるので、この中でテーブルを開くことができます。
  • groupdescription.pstpl: このテンプレートファイルは、グループの説明を表示するために使用します。アンケート設定（プレゼンテーションタブの表示とナビゲーション設定からアクセス）から、グループの説明を表示するかどうかを設定します。表示しない設定の場合、このファイルは無視されます。
  • question.pstpl: このファイルは、アンケートの質問、回答、ヘルプテキストから構成されます。"グループごと"と"一括"型のアンケートでは、このテンプレートは質問ごとに繰り返されます。対応する'閉じる'ファイルがないので、すべてのタグを閉じる必要があります。
  • question_start.pstpl: このファイルには、質問の初めに表示される個々のエレメントが含まれます。{QUESTION}キーワードによって、'question.pstpl'ファイルに取り込まれます。これは、テンプレートデザイナーが質問のレイアウトをもっとコントロールしたい場合に使用します。このテンプレートは通常のテンプレートシステムの外にあり、LimeSurvey 1.87以降置き換えられています。このテンプレートのキーワードは、question.pstplで直接利用できます。
  • completed.pstpl: このページは、アンケートの回答が保存され、アンケートが終了したときに、最終ページとして表示されます。アンケート設計時に設定した"転送リンク"を表示する場合に使用します。
  • endgroup.pstpl: このファイルはグループを閉じるもので、startgroup.pstplファイルで開いたすべてのタグを閉じます。
  • navigator.pstpl: このファイルには、アンケートをナビゲートするための"次へ"、"前へ"、"最終"、"送信"、"保存"、"クリア"ボタンが含まれます。最終ページ以外のすべてのページで使用されます。
  • printanswers.pstpl: このファイルには、アンケートの印刷バージョンで必要なHTMLラッパーが含まれます。
  • print_group.pstpl: このファイルはstartgroup.pstplとendgroup.pstplファイルと同様で、印刷バージョンで使われます。
  • print_question.pstpl: このファイルはquestion.pstplと同様で、印刷バージョンで使われます。
  • print_survey.pstpl: このファイルはsurvey.pstplと同様で、印刷バージョンで使われます。

CSSとJavascript

template.css（CSS用）とtemplate.js（Javascript用）の二つは、テンプレートで必ず使われます。

  • {TEMPLATECSS}: 既定のCSSであるtemplate.css（RTL言語ではtemplate-rtl.css）へのリンクに置き換えられます。
  • {TEMPLATEJS}: 既定のJavascriptファイルであるtemplate.jsとLimeSurveyに必要なすべてのjsファイルへのリンクに置き換えられます。

Bootstrapの利用

LimeSurveyはBootstrap 3を組み込んでいるので、正しく記述されたBootstrapクラスによってテンプレートにスタイルを適用することができます。 詳細は、Bootstrapドキュメントを参照してください。

Awesome-Bootstrap-Checkboxプラグインも組み込まれています。これにより、Bootstrapのcolor-class（info、warning、dangerなど）と"-checkbox"や"-radio"で終わるクラスを使い、チェックボックスやラジオボタンを好きなデザインにすることができます。

既定のCSS、Javascriptを置き換える

特別なJavascript、CSSファイルを使用することができます。functionを置き換えたい場合は、カスケードシステムを使用します。Javascriptのfunctionでは、最後に読み込まれたものが使用されます。

その他のテンプレートファイル

privacy.pstpl、invitationemail.pstpl、reminderemail.pstpl、confirmationemail.pstplはLimeSurveyではもう使われておらず、既定値は言語ファイルに収録されています。メールメッセージはアンケートごとに編集することができるようになりました。

標準ページ

アンケート参加者がLimeSurveyのアプリケーションにアクセスするときに目にする標準ページが10個あります。それぞれ、アンケートの設定で指定したテンプレートの共通のファイルから構成されます。次の表はどのテンプレートファイルがそれぞれのページを構成するかを示したものです。

アンケートページ/
テンプレートファイル		 アンケートリスト
 ようこそ 質問 完了 すべてクリア 登録 読込み 保存 回答
印刷		 アンケート
印刷
SurveyList
Welcome
Privacy
Navigator
Survey
StartGroup
GroupDescription
Question*
EndGroup
Assessment
Completed
ClearAll
Register
Load
Save
PrintAnswers
Print Survey
Print Group
Print Question
StartPage
EndPage
Template.css

*注意: バージョン1.90+では、question.pstplとquestion_start.pstplが置き換えられています。古いカスタムテンプレートを使用している場合は、question.pstplの初めに次の行を追加します。

<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">

さらに、question.pstplの終わりに対応する閉じるタグを追加します。

</div>

*注意: バージョン1.91以前では、LimeSurveyのjsファイルはテンプレートに含まれません。バージョン2では、jsファイルにリンクさせるため、テンプレートファイルのひとつに{TEMPLATEJS}を入れなければなりません。startpage.pstplかendpage.pstplに追加することができます。{TEMPLATEURL}/template.jsの行を削除し、パーソナルテンプレートを更新するため、{TEMPLATEJS}に置き換えなければなりません、

ファイルコントロールセクション

左側の"ファイルコントロール"ウィンドウで、ページを編集するために使われるテンプレートファイルをクリックします。画面パーツ、JavaScript、CSSファイルがあります。そのファイルの中央のHTMLコードが"編集中"ウィンドウに表示されます。テンプレートが編集可能な場合（ディレクトリーに設定された権限による）、好きなように変更して保存することができます。


"その他のファイル"ウィンドウでは、テンプレートディレクトリーにあるその他のファイルの一覧が表示されます。右側からテンプレートを作成するために必要な画像ファイル（画像、ロゴなど）やその他のファイルのアップロードや選択ができます。


それぞれの画像へのリンクを使わずに、{TEMPLATEURL}という文字列を使います。つまり、 

img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'

ではなく、次のようにします (New in 2.50 )。 

img src='{TEMPLATEURL}files/mypicture.jpg'

LimeSurveyのバージョン2.50以前では、次のようにします。 

img src='{TEMPLATEURL}mypicture.jpg'

編集中のテンプレートページの"例"は、画面下部に表示されます。テンプレートエディタでテンプレートを削除することはできません。ディレクトリーにアクセスし、そこから手動でファイルを削除する必要があります。テンプレートの見た目をさらに評価するため、他の画面解像度を選択することもできます。

注意: 同梱のテンプレートはテンプレートエディターで編集することはできません。編集する場合は、コピーを作成し、それを編集します。

テンプレートファイルの場所

LimeSurveyでは、他のpublicファイルが格納されているpublicディレクトリーに"/templates"ディレクトリーがあり、その中のテンプレートごとのサブディレクトリーに個々の'標準'テンプレートが格納されています。カスタマイズされたユーザーテンプレートは、/upload/templatesディレクトリーに格納されています。

テンプレートディレクトリーには、必ず"default"ディレクトリーがあります。このテンプレートは、既定として使われ、テンプレートフォルダーが見つからない場合の代理として使用されます。デフォルトでインストールされています。

次の構文を使用して、テンプレート管理領域にアップロードした画像ファイルを使用することができます。 

{TEMPLATEURL}filename.xyz

CSSによる質問のスタイリング

CSSによる質問のスタイリングは簡単になりました。それぞれの質問タイプには固有のクラスがあります。必須の質問は更に必須項目としてのクラスがあります。例えば、必須ではない質問では、 

<div id="question5" class="gender">
...
</div>

となっていて、一方、必須の質問では、 

<div id="question5" class="gender mandatory">
...
</div>

となります。必須の質問でユーザーが回答しなかったり、質問で検証が設定されている場合、 

<div id="question5" class="gender mandatory input-error">
...
</div>

となります。質問に検証が適用され、回答が正しくない場合、次のようになります。 

<div id="question6" class="text-short input-error">
...
</div>

質問パート全体のクラス

このクラスはすべての質問タイプで使用されます。質問タイプにより、一つまたは複数のクラスが使われます。

グローバルクラス
クラス名 適用箇所 質問タイプ 例 備考
.question (Obsolete since 3.0) 質問ブロック全体 すべての質問タイプ <p class="question">, <ul class="question">, <table class="question">
.ls-answers (3.0 から追加) 質問ブロック全体 すべての質問タイプ <div class="ls-answers ">, <ul class="ls-answers ">, <table class="ls-answers">
.subquestions-list サブ質問のリスト 複数選択質問、配列質問タイプ <ul class="subquestions-list">, <table class="subquestions-list"> .questions-listも使われます。
.answers-list 回答リスト 択一質問、配列質問タイプ、複数入力テキスト質問 <ul class="answers-list">, <table class="answers-list">
.answer-item 回答部分: 単一の回答 択一質問、配列質問タイプ、複数入力テキスト質問 <li class="answer-item">, <td class="answer-item">
.noanswer-item 回答なしの回答部分 択一質問、配列質問タイプ <li class="noanswer-item">, <td class="noanswer-item"> 回答なしも回答であり、noanswer-itemとanswer-itemの2つのクラスを持ちます。
.question-item 回答部分: 単一の回答 複数テキスト質問、配列質問タイプ <li class="question-item">, <tr class="question-item"> 質問でもある回答があります。class="question-item answer-item"となるものが多数あります。
.checkbox-list チェックボックスのリスト 複数選択質問、数値の配列（チェックボックス）質問タイプ <ul class="checkbox-list">, <tr class="checkbox-list"> コメントつきチェックボックス: class="checkbox-list text-list"のように、multi-listクラスを使用する質問タイプがあります。
.checkbox-array (3.0 から追加) チェックボックス配列 チェックボックスオプションを使用した配列（数字） <table class="checkbox-list">
.checkbox-item チェックボックスの回答部分 複数選択質問、チェックボックスの配列（数字）質問タイプ <li class="checkbox-item">, <td class="checkbox-item">
.radio-list ラジオボタンのリスト 択一質問、配列質問タイプ（各列） <ul class="radio-list">, <tr class="radio-list">
.radio-array (New in 3.0 ) ラジオボタンのリスト 配列質問タイプ <table class="radio-array">
.radio-item ラジオボタンの回答部分 択一質問、配列質問タイプ <li class="radio-item">,
.text-list テキスト入力のリスト 複数テキスト質問タイプ、配列（テキスト） <ul class="text-list">, <tr class="text-list">
.text-item テキスト入力の回答部分 複数テキスト質問タイプ、配列（テキスト） <li class="text-item">,
.numeric-list 数字入力に限定されたテキスト入力のリスト 数値入力（複数）質問タイプ、配列（数字） <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
.number-list 数字入力に限定されたテキスト入力のリスト（各列） 数値入力（複数）質問タイプ、配列（数字） <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
.number-array (3.0 から追加) 数字入力の回答部分 配列（数字） <table class="number-array">
.select-list (Obsolete since 2.50) ドロップダウンリスト 配列（数字）、二元スケール配列（ドロップダウン） <table class="select-list">
.dropdown-list (2.50 から追加) ドロップダウンリスト 配列（数字）、二元スケール配列（ドロップダウン）（各列） <table class="dropdown-list">
.dropdown-array (3.0 から追加) ドロップダウンの配列 配列（数字）、二元スケール配列（ドロップダウン） <table class="dropdown-array">
.select-item (Obsolete since 2.50) ドロップダウンの回答部分 配列（数字）、二元スケール配列（ドロップダウン）、ドロップダウンによる択一質問 <p class="select-item">, <td class="select-item">
.dropdown-item (2.50 から追加) ドロップダウンの回答部分 配列（数字）、二元スケール配列（ドロップダウン）、ドロップダウンによる択一質問 <p class="dropdown-item">, <td class="dropdown-item">
.hide (Obsolete since 3.0) アクセシビリティ対応: CSSにより非表示となりますが、スクリーンリーダーが読み上げます。2.50以降は、bootstrapのsr-onlyを使用できます。 自由回答（短い） <label class="hide"> 他の目的で利用します。
.ls-js-hidden (3.0 から追加) JavaScriptが有効な場合に非表示となる部分で使用 例：ボタン <div class="ls-js-hidden"> LimeSurveyのコアで使用されていますが、テンプレートの中でも使用できます。
.ls-js-hidden-sr (3.0 から追加) アクセシビリティ対応: jsが有効な場合に非表示となりますが、スクリーンリーダーを利用する場合は常に表示されます。 例：ボタン <a class="ls-js-hidden-sr"> ボタン
.ls-no-js-hidden (3.0 から追加) JavaScriptが有効でない場合に非表示となる部分で使用 リンク <a class="ls-no-js-hidden"> LimeSurveyのコアで、JavaScriptが有効でない場合に非表示のリンクで使用されています。
.ls-label-xs-visibility (3.0 から追加) 大画面で非表示とし、小さい画面（テーブルなし）やスクリーンリーダーで表示されるラベル ラベル <label class="ls-no-js-hidden"> 配列質問タイプのテーブル内のラベルで使用します。
.ls-input-group-extra (3.0 から追加) bootstrapのinput-group-addonと同じ利用方法ですが、枠線と背景がありません。 右側の接尾辞 <div class="ls-input-group-extra"> 接尾辞・接頭辞で使用（グローバル）
.checkbox (Obsolete since 3.0) input[type=checkbox] チェックボックスを利用する質問タイプ <input type="checkbox" class="checkbox"> 最新のブラウザーでは必要ありませんが、古いブラウザーでは必要となります。
.radio (Obsolete since 3.0) input[type=radio] 羅時をボタンを利用する質問タイプ <input type="radio" class="radio"> 最新のブラウザーでは必要ありませんが、古いブラウザーでは必要となります。
.text input[type=text] テキスト入力を利用する質問 <textarea class="text">
.answertext 配列質問タイプ 配列質問タイプの回答部分 <th class="answertext">
.col-answers 配列質問タイプ 回答の列 <col class="col-answers">
.odd .even (Obsolete since 2.50) 配列質問タイプ 一列おき <col class="odd">
.array1 .array2 (Obsolete since 3.0) 配列質問タイプ 一行おき <tr class="array1">
.ls-odd .ls-even (3.0 から追加) 配列質問タイプ サブ質問、Y軸の一行おき <tr class="ls-odd">

質問部分のクラスの例

自由回答（短い）質問タイプ:

<p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
</p>

自由回答（短い・複数）質問タイプ

<ul class="subquestions-list questions-list text-list">
  <li class="question-item answer-item text-item" id="javatbdSGQA">
    <label for="answerSGQA">Some example subquestion</label>
     <span><input type="text" value="" id="answerSGQA" name="SGQA" size="20" class="text empty"></span>
  </li>
</ul>

配列質問タイプ

<table class="question subquestion-list questions-list ">
	<caption class="hide read">Some explanation for accessibility.</caption>
	<colgroup class="col-responses">
		<col width="50%" class="col-answers">
		<col width="25%" class="odd">
		<col width="13.3%" class="col-no-answer even">
	</colgroup>
	<thead>
		<tr class="array1 dontread">
			<td>&nbsp;</td>
			<th>1</th>
			<th>No answer</th>
		</tr>
	</thead>
	<tbody>
		<tr class="array2 answers-list radio-list" id="javatbdSGQ">
			<th width="20%" class="answertext">Some example subquestion
			</th>
			<td class="answer_cell_001 answer-item radio-item">
				<label for="answerSGQA" class="hide read">1</label>
				<input type="radio" value="1" id="answerSGQA" name="SGQA" class="radio">
			</td>
			<td class="answer-item radio-item noanswer-item">
				<label for="answerSGQA" class="hide read">No answer</label>
				<input type="radio" value="" id="answerSGQA" name="SGQA" class="radio">
			</td>
		</tr>
	</tbody>
</table>

質問のクラス一覧

質問タイプ 質問クラス 質問ID
5点尺度 .choice-5-pt-radio 5
配列（10点尺度） .array-10-pt B
配列（5点尺度） .array-5-pt A
二元スケール配列 .array-flexible-duel-scale 1
配列（増加／同じ／減少） .array-increase-same-decrease E
配列（数字） .array-multi-flexi :
配列（テキスト） .array-multi-flexi-text ;
配列（はい／いいえ／どちらでもない） .array-yes-uncertain-no C
配列 .array-flexible-row F
軸を反転した配列 .array-flexible-column H
式 .boilerplate X
日付 .date D
性別 .gender G
自由回答（非常に長い） .text-huge U
言語の変更 .language I
リスト（ドロップダウン） .list-dropdown !
リスト（ラジオボタン） .list-radio L
リスト（コメントつき） .list-with-comment O
自由回答（長い） .text-long T
数値入力（複数） .numeric-multi K
複数選択 .multiple-opt M
コメントつき複数選択 .multiple-opt-comments P
自由回答（短い・複数） .multiple-short-txt Q
数字入力 .numeric N
順位付け .ranking R
自由回答（短い） .text-short S
はい／いいえ .yes-no Y

検証のクラス一覧

注意:  1.92以前で使用できるクラスは、.mandatoryと.input-errorのみです。

これらは、ヘルプと検証TIPメッセージに適用され、タイプごとにスタイリングできます。

既定では、.hide-tipと.input-errorは連動しており、検証TIPを非表示にしておくことができます。検証エラーが発生するとTIPが現れ、エラーが解消されると再び非表示になります。

これらは、ポップアップの警告メッセージの必要性をなくすためにデザインされています。代わりに、必要に応じてTIPが表示され、回答が検証式に適合したかどうかを表示色で示します。

さらに、ページを開いたばかりの未回答状態で検証条件を満たさない場合は、検証条件を満たしていない旨のTIPはやさしい色で表示される一方、回答を送信して検証エラーが発生した場合は注意を促す色付けで表示されます。

目的 CSSクラス 説明
回答必須 .mandatory 質問への回答必須
入力エラー .input-error 少なくとも一つの検証エラーがある
TIP非表示 .hide-tip hide_tipオプションを使用した場合に追加される
数字回答 .em_num_answers min_answers、max_answers向け
値の範囲 .em_value_range min/max_num_value_n、multiflexible_min/max向け
合計の範囲 .em_sum_range min/max/equals_num_value向け
正規表現による検証 .em_regex_validation 正規表現による検証向け
質問レベルの検証機能 .em_q_fn_validation em_validation_qオプション向け
サブ質問レベルの検証機能 .em_sq_fn_validation em_validation_sqオプション向け
「その他」コメント必須 .em_other_comment_mandatory other_comment_mandatoryオプション向け（"その他"が選択されているがコメントがない場合に表示される）

カスタムテンプレートにスタイルをインポートする

カスタマイズされた質問のスタイルは、それぞれのテンプレートのCSSファイルの最後のほうにあり、次の記述から始まります。

/* --------------------------- START: Question styles  ------------------------------ */

カスタムテンプレートの他のスタイルに影響を与えずにスタイルを適用する場合は、templates/default/template.css（テーブルベースのレイアウトの場合）と/templates/limespired/template.css（CSSベースのレイアウトの場合）の中にある上記の行の後のすべての記述を独自のスタイルシートにコピーしなければなりません。

Internet Explorer向けの条件付きスタイルシート

IE6・IE7とその他のブラウザーの間のレンダリングには著しい違いがあるため、各テンプレートにはIE向けの特別な条件付きスタイルシートがあります。 

<!--[IE（IEむけ）]>
  <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]-->
<!--[if lt IE 7（IE 7以前向け）]>
  <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]-->
<!--[if IE 8（IE 8向け）]>
		<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->

上記のコードを startpage.pstplの中、/templates/default/または/templates/limespiredからテーブルベースのレイアウト用とCSSベースのレイアウト用のそれぞれのIEスタイルシートのコピーに入れます。

注意: 独自のスタイルシートにスタイルをコピーする場合、ほとんどの場合、調整を加える必要があります。

Internet explorer向けの別のソリューション

bodyの条件付きクラスをstartpage.pstplに配置し、このクラスをtemplate.cssで使用できます。このメソッドは、citronadeテンプレート (Obsolete since 2.06)で使用されます。JavaScriptが動作するシステムにはjsクラス、動作しないシステムにはno-jsクラスを追加します。 

<!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script>

また、template.cssでは次のように使用します。 

.ie6{/*internet explorer 6向け*/}
.ielt8{/*internet explorer 6、7向け*/}
.ie{/*すべてのinternet explorer向け */}

右から左に記述する（RTL）言語と均等割り付け

LimeSurveyのテキストエディターは、RTLテキストを書式設定できます。しかし、エディター自体は、均等割り付けしたときにRTL言語を左から右の形式で表示します。これはエディターの表示上の問題です。RTLで均等割り付けされた質問またはテキストは、アンケートやプレビューでは正しく右から左に表示されます。

キーワード

  非推奨 : この機能はバージョン3.0では非推奨です。


テンプレートファイル内のキーワードは、現在のアンケート情報に置き換えられます。中括弧で囲まれています（例：{SURVEYNAME}）。

次の文字列は、テンプレートファイルを解析してアンケートユーザーに提示するときにLimeSurveyに置き換えられます。これらのフィールド文字列は、'完了ページ'以外のほぼすべてのテンプレートで機能します。（これらの文字列のほとんどはcommon.phpファイルにありますが、そこにない場合はindex.phpファイルを見てください。）

キーワード テンプレートファイル 説明
{SURVEYNAME} すべてのファイル アンケートのタイトル
{SURVEYDESCRIPTION} すべてのファイル アンケートの説明
{WELCOME} すべてのファイル（主にwelcome.pstpl） アンケートの'ようこそ'テキスト
{PERCENTCOMPLETE} survey.pstpl アンケートの完了率を示す小さなグラフ
{GROUPNAME} startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl 現在のグループ名を表示します。
{GROUPDESCRIPTION} startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl 現在のグループの説明を表示します。
{NUMBEROFQUESTIONS} welcome.pstpl アンケートの質問総数（数字のみ）を表示します。
{THEREAREXQUESTIONS} welcome.pstpl 関連する言語ファイルから"このアンケートはX問あります"という文が表示されます。Xは質問の数で置き換えられます。これは、単数形または複数形に対しても適切に機能します。質問が1つしかない場合、"このアンケートは1問あります"と表示されます。
{CHECKJAVASCRIPT} すべてのファイル（主にwelcome.pstpl） エンドユーザーのブラウザでJavaScriptが無効になっているときの警告メッセージ
{QUESTION} Question.pstpl （LS1.87から置き換えられました）現在の質問のテキストを表示します（{QUESTION}の書式は、'question_start.pstpl'を編集することによってカスタマイズできます）。 次のものを使用します：{QUESTION_TEXT}、{QUESTION_MANDATORY}、{QUESTION_HELP}、{QUESTION_MAN_MESSAGE}、{QUESTION_VALID_MESSAGE}、{QUESTION_INPUT_ERROR_CLASS}、{QUESTION}の代わりのラッピングHTML
{ANSWER} question.pstpl, print_question.pstpl 現在の質問に対する回答フォームを表示します。
{SGQ} question.pstpl, question text 現在の質問のSurvey-Group-Question idを表示することにより、質問の入力フィールドを動的に参照するために、質問テキストの中で使用できます（svn build 9755現在）。
{QUESTIONHELP} question.pstpl, print_question.pstpl 現在の質問のヘルプテキスト（質問タイプごとにあらかじめ決められたヒント）を表示します。
{QUESTION_CLASS} question.pstpl, print_question.pstpl 各質問タイプに固有のクラスです（質問を包含するタグに含められます）。
{QUESTION_CODE} question.pstpl, print_question.pstpl 現在の質問コードを表示します。
{QUESTION_ESSENTIALS} question.pstpl 質問IDと（条件付き質問の場合）、'style="display:none;"'（質問を包含するタグに含められます）。
{QUESTION_HELP} question.pstp, question_start.pstpl 現在の質問に対しユーザーが定義したヘルプテキストを表示します。
{QUESTION_TYPE_HELP} print_question.pstp 現在の質問に対しユーザーが定義したヘルプテキストを表示します。
{QUESTION_INPUT_ERROR_CLASS} question.pstp, question_start.pstpl ユーザー入力エラーがあった場合に適用されるクラスです。
{QUESTION_ID} print_question.pstp 個別の質問のスタイリングを可能にするために、各質問に一意のIDを付与します。
{QUESTION_TEXT} question.pstp, print_question.pstp, question_start.pstpl 現在の質問のテキストを表示します。
{QUESTION_MANDATORY} question.pstp, print_question.pstp, question_start.pstpl 現在の質問に関する翻訳された'必須'テキストを表示します。
{QUESTION_MAN_CLASS} question.pstpl, print_question.pstpl 質問が必須の場合のクラスです（質問を包含するタグに含められます）。
{QUESTION_MAN_MESSAGE} question.pstp, print_question.pstp, question_start.pstpl 現在の質問に関する翻訳された'必須'ヘルプメッセージテキストを表示します。
{QUESTION_NUMBER} print_question.pstpl 質問番号。
{QUESTION_VALID_MESSAGE} question.pstp, print_question.pstp, question_start.pstpl 現在の質問に関する翻訳された'有効'ヘルプメッセージテキストを表示します。
{QUESTION_SCENARIO} print_question.pstp 条件付き質問の'シナリオ'テキストを印刷します。
{NAVIGATOR} navigator.pstpl ナビゲーションボタンを表示します（次へ、前へ、最後へ）
{CLEARALL} すべてのファイル （navigator.pstplが対象） "結果を破棄して終了"リンクを表示します。
{COMPLETED} completed.pstpl 登録時の'完了'メッセージを表示します（attribute_1フィールドとattribute_2フィールドが設定されているかどうかによって変化）。
{URL} completed.pstpl アンケートの'url'と'url text'を表示します。
{PRIVACYMESSAGE} privacy.pstpl アンケートを匿名に設定すると、プライバシーメッセージが表示されます。テキストは、言語ファイルで編集・翻訳することができます。privacy.pstplテンプレートを編集して手動で変更することもできます。
{TEMPLATEURL} すべてのファイル 現在のテンプレートの場所へのURLです（テンプレート内の画像ファイルを参照するのに便利）。
{SURVEYRESOURCESURL} すべてのファイル このアンケート用の現在のアップロードファイルのURLです（質問、グループなどの画像ファイルを参照するのに便利です）。
{SUBMITCOMPLETE} endpage.pstpl アンケートを完了したこととと、"送信"ボタンを押すようユーザーに知らせる（言語ファイルの）メッセージ。
{SUBMITREVIEW} survey.pstpl "<< 前へ"をクリックして回答を確認したり変更したりすることができる旨をユーザーに知らせるメッセージ（言語ファイルから）
{SAVEDID} All Files ユーザーの'回答ID'を表示します。
{QUEXMLPDF} すべてのファイル それまでに入力完了した回答を含むアンケートのqueXML PDFをエクスポートするボタンを表示します。
{TOKEN:FIRSTNAME} すべてのファイル ***アンケート回答が匿名でない場合、トークンテーブルのユーザーの名に置き換えられます。
{TOKEN:LASTNAME} すべてのファイル ***アンケート回答が匿名でない場合、トークンテーブルのユーザーの姓に置き換えられます。***
{TOKEN:EMAIL} すべてのファイル ***アンケート回答が匿名でない場合、トークンテーブルのユーザーのメールアドレスに置き換えられます。***
{TOKEN:ATTRIBUTE_1} すべてのファイル ***アンケート回答が匿名でない場合、トークンテーブルのユーザーのattribute_1に置き換えられます。***
{TOKEN:ATTRIBUTE_2} すべてのファイル ***アンケート回答が匿名でない場合、トークンテーブルのユーザーのattribute_2に置き換えられます。***
{ANSWERSCLEARED} Preferably in navigator.pstpl 言語ファイルの "回答の消去"メッセージ。
{RESTART} clearall.pstpl アンケートを再開するURL。
{REGISTERERROR} register.pstpl 登録ページにエラーメッセージが表示されます（例えば、"メールアドレスを入力する必要があります"）。
{REGISTERMESSAGE1} register.pstpl 言語ファイルの"のアンケートを実施するには、登録を行う必要があります。"というメッセージ。
{REGISTERMESSAGE2} register.pstpl 言語ファイルの登録の詳細のメッセージ
{REGISTERFORM} register.pstpl 実際の登録フォーム。attribute_1フィールドとattribute_2フィールドが設定されているかどうかによって変わります。
{SAVE} navigator.pstplで動作 '今までの回答を保存する'ボタンを表示して、後でアンケートに戻るようにすることができます。アンケートプロパティで[保存]オプションを無効にすると、タグは表示されず無視されます。
{LANGUAGECHANGER} survey.pstpl 多言語アンケートのスイッチを表示して質問を変更します。

入力／ボタン

アンケートの各"入力"タイプには独自のクラス名が与えられているため、"startpage.pstpl"ファイルにCSSを追加したり、フォームボタンや入力の外観をある程度制御することができます。クラス名は次のとおりです。

  • submit （送信ボタン）
  • text （テキスト入力 - 短い自由文、日付、数値タイプ）
  • answertext （回答のテキスト）
  • radio （ラジオボタン）
  • checkbox （チェックボックス）
  • select （セレクト／リストボックス）
  • textarea （長いテキスト入力 - 長い自由文）
  • clearall （"回答を破棄して終了"のリンク）
  • rank （順位付けスタイルの質問。選択ボックスやテキストボックスの色は設定しませんが、その他の順位付け質問の場合は背景色、テキストの色、サイズなどを変更できます）
  • graph （"完了率"のグラフテーブル）
  • innergraph （グラフテーブル内のテーブル - 0％と100％のテキストが含まれています。このテキストのサイズを変更します。）
  • question （テーブル内に表示されるすべての質問の一般的な設定です。通常は、これを使用して、他の場所で既定として使用したフォントサイズと色と同じになるようにします）
  • mandatory  （必須の質問）
  • input-error （ユーザー入力エラー - ユーザーが必須の質問や検証つきの質問で間違えた場合）
  • array1とarray2 （配列型の質問について複数の回答を提示するときに、これらの2つのスタイルが交互に繰り返されます。こうした質問タイプで背景色を交互に変えることができます。Array1は、こうした質問タイプの列見出しにも使用されます。）
  • errormandatory （"この質問は必須です"というエラーメッセージの色とスタイルを設定します。）
  • warningjs （参加者のブラウザがJavaScriptを無効にしている場合に表示される警告メッセージの色とスタイルを設定します。）

要素のIDを使用してアクセスできる要素もいくつかあります（CSSの#ID）。

  • surveycontact （開始ページに表示されるコンタクトメッセージ）
  • tokenmessage （アンケート内のメッセージ、たとえばセッションの期限切れエラーメッセージなど）

HTMLのすべての部分を編集できるため、

<div class='new_name'></div>

のようにテンプレートを囲んで、new_nameクラスのCSSを定義する必要はありません。

プログレスバーのスタイル

プログレスバーの外観はCSSで変更できます。

バーの背景色を変更するには、custom.cssファイルの最後に次のような記述を追加します（fruityテーマの例）。 

.fruity .progress-bar {
 background-color: #3300FF;
}

バーの境界線の色を変更するには、custom.cssファイルの最後に次のような記述を追加します（fruityテーマの例）。 

.fruity .progress-bar {
 border: 1px solid #FF0000;
}

開発者が利用できる高度な機能

LimeSurveyには、特別な変更を可能にするユーザー作成のパッチがいくつか統合されています。これらの非常に高度な機能は、（一般的に）LimeSurveyの根底にあるコードベースを変更する必要があり、セキュリティホールを生まないよう慎重に行う必要があります。

自作のJavascript関数のサポート

アンケートページでJavascriptを実行する必要があるユーザーもいるかもしれませんが、BODY要素でcheckconditions()を呼び出すことにより、これができなくなっています。この関数呼び出しはHEAD内の小さなJavaScript関数に置き換えられ、checkconditions()とtemplate_onload()が存在するかどうかを呼び出す前に調べます。このようにして、テンプレート作成者は、HEADに既定のものを置き換える独自のtemplate_onload()関数を作成できます。

  • XSS filterを無効にする: 全体設定 -> セキュリティで"HTMLのXSSフィルター"をオフにします。
  • 質問またはグループの説明のソースにスクリプトを入力します。
詳細については、技術的な回避策のセクションを参照してください。


TIP&トリック

言語固有の要素

アンケートに言語特有の文（例えば、各ページの最後にあるヘルプ）が必要な場合は、.pstlファイルに文を追加する（他の言語では表示しない）ことができます。template.cssで非表示にする場合、疑似セレクタ:langを使うこともできますが、互換性を高めるためにクラスを使用しています。

以下に、フランス語と英語の2つのヘルプ文があります。これをendpage.pstplに配置します。 

<div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<div class="en" lang="en">For some help, please call 000000</div>

template.cssでは次のようにします。 

.lang-fr .en{display:none}
.lang-en .fr{display:none}

アンケートページのレイアウトを変更する

テンプレートを編集して保存した後は、アンケートの設定から選択されている場合にのみ、アンケートリストページに適用されます。既定のテンプレートにするには、LimeSurveyの全体設定にある全般タブに移動し、目的のテンプレートを選択します。以降、テンプレートとして"既定"のオプションを使用するテンプレートと、新たに作成されるテンプレートを加えたすべてのテンプレートは、新しく選択された既定のテンプレートを使用します。

このページで現在のテンプレートを使用するには、全体設定から設定を変更する必要があります。以前のバージョンでは、この変更はconfigファイルで$defaulttemplate設定を編集することによって行うことができます。この設定を、config-defaults.phpから（config-defaults.phpより優先される）config.phpにコピーして次のように設定を編集します。$defaulttemplate = 'yourtemplatename';

テンプレートのインポート／エクスポート: Macユーザー

Macユーザーの場合、Mac OSXの既定のアーカイブユーティリティで"オンザフライで生成された"zipフォルダに問題がある可能性があります。

コマンドラインからunixのunzipを実行することによって回避できます。

$ unzip template.zip -d template

Archive: template.zip

 inflating: template/startpage

 inflating: ...

もう1つの回避策は、macでコンパイルされたスクリプトを使用することです。

同じテンプレートで別々のロゴを使う

すべてのアンケートに同じテンプレートを使用し、アンケートごとにロゴを変更する場合は、テンプレート.pstplファイル内の{SID}プレースホルダを使用して、別の画像を参照できます。 

<img src="{TEMPLATEURL}files/logoImage-{SID}.png">

カスタムファビコンを表示する

ファビコンは、ブラウザのアドレスバー、ブックマークのリスト、タブに表示される小さなアイコンです。次のように自分のアイコンを表示することができます。

  1. ファビコンを作成する - Googleでたくさんのフリーファビコンジェネレーターを見つけることができます。
  2. 新しいファビコンに "favicon.ico"と名前をつけ、テンプレートの/filesディレクトリーに配置します。
  3. startpage.pstplの</head>タグの前に次のコードを追加します。
<link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">

アンケート／質問ページごとに外観を変える

LimeSurveyでページごと（奇数ページ、偶数ページごと）に外観を変更したい場合は、CSSファイルの.page-oddクラスを使用して、奇数ページの外観を変更することができます。

LimeSurvey 1.91+の既定のテンプレートの例。 

.page-odd table.question-group {
 background-color: #D2F2D3;
}

偶数ページと奇数ページを同じものにしたい場合は、template.cssの.page-oddのすべてのインスタンスを見つけ、スタイルを削除します。

二元スケール配列の垂直セパレータの境界線を作成する

二元スケール配列の垂直セパレータの境界線を作成するには、template.cssファイルに次の行を追加します。 

table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
   border-right:solid 1px #00A8E1;
}

header_separatorは、ヘッダー"td"の区切り文字を入力するために使用します。"dual_scale_separator"は、二元スケール配列内のセパレータ列の指定に使用します。

独自のロゴをアンケートリストに追加する (3.0 から追加)

  1. 最初に、使用したいテーマのテーマエディターを開きます。
  2. fruityの使用をお勧めします、それは現状ベストのテーマです。
  3. その後、テーマを拡張し、後でわかるように名前を付けます。
  4. 次のビューで、使用するロゴをアップロードすることができます。
  5. 画面の右下にあるドロップダウンリストから、`アンケートリスト´というエディタ画面を選択します。
  6. 次に左側のメニューで、`layout_survey_list.twig´を選択します。
  7. エディターで126行目にスクロールし、マークされた部分をテーマにアップロードした画像のファイル名に変更します。
  8. ファイルを保存します。
  9. デフォルトテーマを拡張したテーマに変更します。

ロゴをアンケートページの中央に配置する

この例は、"extends_fruity"テンプレート用です。他のテンプレートでは、必要なCSSが異なる場合があります。

  1. LimeSurveyの管理エリアにログインします。
  2. テーマエディターを開きます。：設定 > テーマ
  3. リストから"LimeSurvey Fruityテーマ"を探し、"テーマエディター"ボタンをクリックします。
  4. ページ下部付近の左側にあるファイル一覧から"custom.css"をクリックします。
  5. そのファイルに以下のCSSをコピーし、"変更を保存"を押します。
.navbar-fixed-top > div.navbar-header {
    width: 100% !important;
}

.navbar-fixed-top > div.navbar-header > div {
    width: 100% !important;
}

.navbar-fixed-top > div.navbar-header > div > img {
    margin: 0 auto 0 auto !important;
}


カスタム質問ビュー (3.0 から追加)

注意: これは将来的に質問オブジェクトによって置き換えられる予定の一時的な機能です（カスタムビューを質問オブジェクトに移すのが非常に簡単になります）。既定では無効になっています。

バージョン2.5では、質問と組み込み要素の一部について、テンプレート固有のカスタムビューを作成できます。複数のアンケートの特定の質問タイプのHTMLレイアウトを変更する場合に便利です。

  • application/config/config.phpで、'config'=>arrayを探し、次の行を配列に加えます。'allow_templates_to_overwrite_views'=>1
  • /{your_template}/config.xmlで、"overwrite_question_views"をtrueに設定します。
  • application/views/survey/*をtemplate/{your_view_directory}/survey/にコピーします。
  • 変更するファイルのみをコピーする必要がありますが、ファイル構造はapplication/views/survey/と同じでなければなりません。

テンプレートにカスタムCSSまたはJavaScriptファイルを挿入する

バージョン2.50以降では、config.xmlファイルを使用してプラグインファイルを自動的に読み込むことができます。

  • テンプレートの/cssまたは/scriptsフォルダーにファイルをアップロードする
  • /{your_template}/config.xmlで、<css>ブロックまたは<js>ブロックにファイルパスを追加します。
    <css>
	<filename>css/jquery-ui-custom.css</filename>
	<filename>css/bootstrap-slider.css</filename>

	<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
	<filename>css/flat_and_modern.css</filename>

	<filename>css/template.css</filename>

	<filename>css/myCustomPlugin.css</filename>
</css>
<js>
	<filename>scripts/template.js</filename>
	<filename>scripts/bootstrap-slider.js</filename>

	<filename>scripts/myCustomPlugin.js</filename>
</js>

クラス定義（開発者向け）

answer-list

質問 質問タイプ 要素
arrays/5point A tr
arrays/10point B tr
arrays/array F tr
arrays/column H trとcol
arrays/dualscale 1 tr
arrays/increasesamedecrease E tr
arrays/yesnouncertain C tr
gender G divとul
list_with_comment O div
ranking R ulとdiv
yesno Y ulとdiv
ranking_advanced R ulとdiv
listradio L div
5pointchoice 5 ul
multiplechoice M div


radio-list

質問 質問タイプ 要素
yesno Y ul
gender G ul
arrays/yesnouncertain C tr
arrays/increasesamedecrease E tr
arrays/dualscale 1 tr
arrays/5point A tableとtr
arrays/10point B tr
arrays/array F tr
arrays/column H col
listradio L div
list_with_comment O divに続くul

radio-item

質問 質問タイプ 要素
arrays/yesnouncertain C td
5pointchoice 5 li
arrays/10point B td
arrays/5point A td
arrays/array F td
arrays/column H td
arrays/dualscale 1 td
arrays/increasesamedecrease E td
gender G li
listradio L li
yesno Y li
listradio L liとdiv
image_select-listradio L liとdiv
list_with_comment 0 li

list-group

質問 質問タイプ 要素
yesno Y ul
5pointchoice 5 ul
gender G ul
ranking R ul
ranking_advanced R ulとdiv
question_index_group_buttons div
question_index_questions_buttons div

list-group-horizontal

質問 質問タイプ 要素
yesno Y ul
5pointchoice 5 ul
gender G ul

list-unstyled

質問 質問タイプ 要素
list_with_comment 0 ul
listradio L ul
multiplechoice M ul
multiplechoice_with_comments P ul
multiplenumeric K ul
multipleshorttext Q ul
ranking R ul
ranking_advanced R ul
bootstrap_buttons_multi M ul
image_select-multiplechoice M ul
inputondemand/multipleshorttext Q ul
register_error ul
register_message ul
layout_survey_list ul
load ul
save ul
captcha ul

select-list

質問 質問タイプ 要素
ranking R ul
ranking_advanced R ul

checkbox-item

質問 質問タイプ 要素
multiflexi (Array numbers) : td
multiplechoice M li
multiplechoice_with_comments P div
image_select-listradio L li
image_select-multiplechoice M liとdiv
navigator span

checkbox-text-item

質問 質問タイプ 要素
multiplechoice_with_comments P li
multiplechoice M li
image_select-multiplechoice M li
Retrieved from "http://manual.limesurvey.org/index.php?title=Theme_editor/ja&oldid=323078"