テーマエディター

This page is a translated version of the page Theme editor and the translation is 100% complete.

はじめに

アンケートテーマは、ページレイアウト、色、フォント、ロゴ、各質問のスタイルなど、参加者に表示されるアンケートの見た目を制御します。テーマは Twig テンプレート、CSS、JavaScriptで構築されており、CSSフレームワークとして Bootstrap 5 を使用しています。

一般的な変更の多くは、コードを使わずに行えます。ロゴ、色、フォント、およびいくつかの表示設定は、テーマ設定で変更できます。独自のCSSやJavaScriptを追加する、ページのHTMLを変更する、テーマ用の画像やその他のファイルをアップロードするなど、さらに踏み込んだ変更を行う場合は、このページで説明するテーマエディターを使用してください。

LimeSurveyには、次のコアアンケートテーマが付属しています。

Fruity TwentyThree（fruity_twentythree）：デフォルトのテーマです。
Bootstrap Vanilla（vanilla）：Bootstrapベースの独自テーマを作成したい開発者向けのシンプルなベーステーマです。
Fruity（fruity）と Bootswatch（bootswatch）：どちらもBootstrap Vanillaを拡張したものです。

個々の質問タイプの外観は、アンケートテーマではなく質問テーマで制御されます。質問タイプのHTMLを変更するには、質問テーマを作成してください。

始める前に

テーマエディターを使用するには、グローバルのテーマ権限（グローバル権限を参照）が必要です。または、スーパー管理者である必要があります。テーマを拡張するには作成権限、変更を保存するには更新権限、テーマの削除やファイルのリセットには削除権限が必要です。

注意 : エラーのあるテーマは、そのテーマを使用しているすべてのアンケートを使用不能にする可能性があります。本番のアンケートでテーマを使用する前に、アンケートプレビューで変更内容をテストしてください。

コアテーマは編集できません：拡張してください

コアテーマはLimeSurveyと一緒に更新されるため、直接変更することはできません。コアテーマをカスタマイズするには、そのテーマを拡張します。拡張すると、親テーマのすべてを継承した新しいユーザーテーマが作成されます。新しいテーマには、変更したファイルだけが含まれ、それ以外はすべて親テーマから取得されます。この方法により、LimeSurveyが親テーマを更新した際に、バグ修正や改善が引き続きテーマに反映されます。

テーマを拡張するには、次のいずれかを行います。

設定 > テーマに移動し、テーマの行の末尾にあるアクションメニュー（⋯）を開いて拡張をクリックします。
テーマエディターでテーマを開き、ツールバーの拡張をクリックします。

新しいテーマの名前を入力します。すると、テーマエディターで新しいテーマが開きます。

テーマの保存場所

コアテーマ：LimeSurveyのインストール先にある themes/survey/。
ユーザーテーマ（拡張、アップロード、またはインポートしたテーマ）：upload/themes/survey/。

ユーザーテーマのファイルは、お使いのエディターを使ってサーバー上で直接編集することもできます。その後もテーマエディターを使い続けられるように、Webサーバーがファイルを読み書きできる状態にしておいてください。

テーマエディター

テーマエディターを開くには、設定 > テーマに移動し、テーマの行の末尾にあるアクションメニュー（⋯）を開いてテーマエディターをクリックします。

コアテーマを開くと、これが標準テーマであることを示す注意書きと、拡張するためのリンクが表示されます。ファイルやプレビューは確認できますが、変更を保存することはできません。

ツールバー

エクスポート： テーマをZIPファイルとしてダウンロードします。
拡張： このテーマを継承した新しいテーマを作成します（上記を参照）。
名前を変更： テーマの名前を変更します。ユーザーテーマでのみ使用できます。
削除： テーマを削除します。デフォルトテーマに設定されているテーマは削除できません。
テーマ： テーマエディターを別のテーマに切り替えます。
画面： プレビューに表示するアンケートのページと、編集用に一覧表示するファイルを選択します。画面は次のとおりです：質問、アンケート一覧、ようこそ、完了、評価、エラー、すべてクリア、読み込み、保存、登録、回答印刷、統計の公開、PDF、定員超過、ナビゲーション、参加者。

ファイルの編集

右側のパネルには、選択した画面で使用されるファイルが一覧表示されます。

画面の部品ファイル： ページを構築するTwigテンプレートです。
JavaScriptファイル
CSSファイル
他のファイル： 画像、フォント、その他のテーマのファイルです。

ファイル名をクリックすると、エディターで開きます。継承と表示されているファイルは、親テーマのものです。継承されたファイルも編集できます。その場合、エディターの下のボタンにはローカルにテーマをコピーして変更を保存と表示され、保存すると変更を加えたファイルがテーマにコピーされます。以後は、親テーマのファイルではなく、このコピーが使用されます。

テーマ独自のファイルにはリセットボタンがあります。リセットするとコピーが削除され、親テーマのファイルが再び使用されます。

ファイルのアップロード

他のファイルパネルの下部にあるアップロード欄を使って、画像、フォント、その他のファイルをテーマに追加します。アップロードしたファイルは、テーマの files/ フォルダーに保存されます。デフォルトでは、画像（gif、ico、jpg、jpeg、png）と、次のファイル形式をアップロードできます：css、js、map、json、eot、otf、ttf、woff、woff2、txt、md、xml、twig、lss、lsa、lsq、lsg。管理者は、config.php の allowedthemeimageformats と allowedthemeuploads の設定で、これらの一覧を変更できます。

アップロードした画像をTwigファイルで表示するには、image() 関数を使用します。

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

CSSファイルでは、css フォルダーからの相対パスでアップロードしたファイルを参照します。例：url('../files/background.jpg')

プレビュー

エディターの下には、選択した画面がサンプルコンテンツとともにプレビュー表示されます。モバイル、640x480、800x600、1024x768、フルの各ボタンを使って、さまざまな画面サイズでページを確認できます。

プレビューはサンプルデータを使用しているため、実際のアンケートとまったく同じようにすべてのスタイルが表示されるとは限りません。変更内容は、必ず実際のアンケートプレビューでも確認してください。

テーマのインポートとエクスポート

テーマを別のLimeSurveyインストール環境に移すには、テーマエディターのツールバーでエクスポートをクリックします。テーマがZIPファイルとしてダウンロードされます。
ZIPファイルからテーマをインストールするには、設定 > テーマに移動し、アップロードしてインストールをクリックします。

テーマの構成

テーマフォルダー

テーマフォルダーには次のものが含まれます。

config.xml: テーマのマニフェストです。名前、親テーマ、CSSファイルとJavaScriptファイル、テーマ設定、テーマエディターに表示される画面を定義します。
views/: Twigテンプレートです。layout_global.twigはほとんどのアンケートページで使われるメインレイアウトです。特別なページには別のレイアウトが使われます。たとえば、公開アンケート一覧にはlayout_survey_list.twig、エラーページにはlayout_errors.twigが使われます。views/subviews/フォルダーには、レイアウトが読み込む小さなテンプレートが入っています。
css/とscripts/: テーマのCSSファイルとJavaScriptファイルです。
files/: テーマで使用する画像などのファイルです。
options/: テーマ設定のページです。

Twigテンプレート

テンプレートは、アンケートのデータをaSurveyInfo変数で受け取ります。変数の内容をすべて確認するには、application/config/config.phpでデバッグモードを有効にし、layout_global.twigのbody要素の末尾に次の行を追加します。

{{ dump(aSurveyInfo) }}

テンプレートで使用できる関数については、使用可能なTwig関数を参照してください。セキュリティ上の理由から、テンプレートはサンドボックス内で実行されるため、ここに挙げた関数のみ使用できます。

config.xml

<files>セクションには、アンケートページで読み込まれるCSSファイルとJavaScriptファイルを一覧にします。

<add>はファイルを追加します。親テーマに同じ名前のファイルがすでにある場合は、あなたのファイルで置き換えられます。
<remove>は、親テーマのファイルが読み込まれないようにします。

親テーマのファイルを改めて一覧に記載する必要はありません。それらは自動的に読み込まれます。

LimeSurveyは、テーマのインストール時にconfig.xmlを読み込み、設定をデータベースに保存します。インストール済みテーマのconfig.xmlを変更した後は、設定 > テーマに移動し、そのテーマのアクションメニュー（⋯）を開いてリセットをクリックすると、ファイルが再読み込みされます。

独自のCSSとJavaScriptの追加

すべてのコアテーマには、独自のコード用に予約された2つのファイルがあります。

css/custom.css: 他のすべてのCSSファイルの後に読み込まれるため、このファイルのルールがテーマのスタイルより優先されます。
scripts/custom.js: テーマ自体のJavaScriptの後に読み込まれます。

テーマを拡張したときは、これらのファイルを変更します。テーマのメインCSSファイルを編集せずにcustom.cssへCSSを追加すると、親テーマの更新を引き続き受け取れます。

ファイルをさらに追加するには、ファイルをアップロードし、テーマのconfig.xmlの<files>セクションに記載します。親テーマに存在しないファイル名を使用してください。同じ名前の場合は、親テーマのファイルが置き換えられます。

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

アンケートページはデフォルトでAjaxを使って読み込まれるため、参加者が次のページに移動してもブラウザーはページ全体を再読み込みしません。JavaScriptは、最初のページ読み込み時と、Ajaxによるページ読み込みのたびの両方で実行してください。

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

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

このセクションの例はすべて、テーマのcustom.cssファイルに記述します。

ページのクラス

<html>要素と<body>要素には、ページ全体のスタイル設定に使えるクラスが付いています。

html: 言語コード（例：en）とテキストの方向（dir-ltrまたはdir-rtl）。
body: テーマ名と各親テーマの名前（例：fruity_twentythree）、フォント（例：font-ibm-sans）、言語（例：lang-en）、およびロゴが表示されている場合はbrand-logo。

質問コンテナーのクラス

各質問は、question-containerクラスを持つ要素で囲まれます。この要素には次のクラスも付きます。

質問タイプのクラス（下の表を参照）。
mandatory: 質問が必須またはソフト必須です。
input-error: 回答が検証に通らなかった、または必須質問に回答されていません。
missing: 質問にまだ未回答の部分があり、参加者がすでにその質問を通り過ぎています。
ls-hiddenとls-irrelevant: 質問が条件によって隠されています。
ls-hidden-attribute: 質問が「この質問をいつも隠す」設定によって隠されています。
質問のCSSクラス設定（表示の下）に入力したクラス。個別の質問にスタイルを適用するときに使用します。

例として、回答されなかった必須のリスト（ラジオボタン）質問を示します。

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

質問タイプのクラス一覧

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

質問の各部分のクラス

質問コンテナーの内側では、回答エリアで次のクラスが使われます。一部は質問の表示設定によって異なります。たとえば、配列（数字）は、ドロップダウンではなくチェックボックスを表示する場合に別のクラスを使用します。

クラス	用途	使用される質問（例）
.ls-answers	すべての選択肢を保持する要素	すべての質問タイプ
.answers-list	選択肢のリストまたは行	リスト（ラジオボタン）、複数選択、順位付け、ほとんどの配列の行
.subquestion-list, .questions-list	サブ質問のリストまたは表	配列、自由回答（短い・複数）、数字入力（複数）
.answer-item	1つの選択肢または入力欄	ほぼすべての質問タイプ
.noanswer-item	「無回答」の選択肢	配列、5点尺度、リスト（コメントつき）
.question-item	回答でもあるサブ質問	複数選択、自由回答（短い・複数）、数字入力（複数）
.radio-list	ラジオボタンのリストまたは行	リスト（ラジオボタン）、5点尺度、リスト（コメントつき）、ラジオボタン配列の行
.radio-array	ラジオボタンの表	配列、配列（5点尺度）、配列（10点尺度）、配列（増加／同じ／減少）、配列 ( はい・わからない・いいえ )
.radio-item	ラベル付きの1つのラジオボタン	リスト（ラジオボタン）、5点尺度、リスト（コメントつき）、ラジオボタン配列
.checkbox-list	チェックボックスのリスト	複数選択、複数選択（コメント付）
.checkbox-array	チェックボックスの表	チェックボックスレイアウトの配列（数字）
.checkbox-item	ラベル付きの1つのチェックボックス	複数選択、複数選択（コメント付）、チェックボックスレイアウトの配列（数字）
.checkbox-text-item	テキストフィールド付きのチェックボックス	複数選択（コメント付）
.comment-item	チェックボックスの横にあるコメントフィールド	複数選択（コメント付）
.text-list	テキスト入力のリスト	自由回答（短い・複数）、数字入力（複数）
.text-item	1つのテキスト入力	自由回答（短い）、自由回答（長い）、自由回答（非常に長い）、自由回答（短い・複数）、配列（テキスト）
.number-list, .numeric-item	数値入力	数字入力（複数）、数字入力
.number-array	数値入力の表	配列（数字）、配列（テキスト）
.text-array	テキスト入力の表	配列（テキスト）、配列（数字）
.dropdown-array, .dropdown-list, .dropdown-item	ドロップダウンを含む表、行、セル	配列（数字）、ドロップダウン形式の二元スケール配列
.date-item	日付入力	日時
.upload-item	ファイルアップロード領域	ファイルアップロード
.answertext	配列の行にあるサブ質問のテキスト	配列
.col-answers	サブ質問テキストの列	配列
.ls-heading	選択肢を表示するヘッダー行	配列
.ls-odd, .ls-even	交互に表示される行	配列
.ls-label-xs-visibility	小さい画面とスクリーンリーダーでのみ表示されるラベル	配列のセル
.ls-input-group-extra	入力欄の接頭辞または接尾辞	自由回答（短い）、数字入力、自由回答（短い・複数）、数字入力（複数）
.ls-js-hidden	JavaScriptが有効なときに非表示	二元スケール配列、リスト（ラジオボタン）
.ls-no-js-hidden	JavaScriptが無効なときに非表示	順位付け
.ls-js-hidden-sr	JavaScriptが有効なときは非表示ですが、スクリーンリーダーでは読み上げられます	順位付け

リスト（ラジオボタン）では、「無回答」の選択肢にnoanswer-itemではなくno-anwser-item（このスペルのまま）というクラスが付きます。

例として、リスト（ラジオボタン）質問の回答部分のHTMLを示します。

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

検証とヒントのクラス

検証ヒント（「いずれか 1 つを選択してください」や「1 から 10 の間の数値を入力してください」など）には、常に ls-em-tip クラスが付きます。参加者が回答している間、ヒントのルールが満たされると LimeSurvey は ls-em-success を、満たされていないと ls-em-error を追加します。これにより、2 つの状態を別々にスタイル設定できます。質問の TIP非表示 設定で非表示にしたヒントには、hide-tip クラスが付きます。

各ヒントには、その種類を表すクラスもあります。

クラス	ヒント
.em_default	質問タイプのデフォルトのヒント（例：「いずれか 1 つを選択してください」）
.em_num_answers	回答数の最小値または最大値
.em_value_range	値の最小値または最大値
.em_sum_range	値の合計の最小値または最大値
.em_sum_equals	値の合計が指定した値になる必要がある
.em_value_integer	整数のみ入力可能
.em_numbers_only	数値のみ入力可能
.em_other_numbers_only	「その他」フィールドには数値のみ入力可能
.em_other_comment_mandatory	「その他」の選択肢が選択されているが、テキストフィールドが空である
.em_regex_validation	回答が検証パターンに一致する必要がある
.em_q_fn_validation	質問の検証式
.em_sq_fn_validation	サブ質問の検証式

右から左に記述する（RTL）言語

右から左に記述する言語では、<html> 要素に dir-rtl クラスが付き、コアテーマはメイン CSS ファイルの RTL 版を読み込みます。右から左に記述する言語にのみ適用するルールには、CSS で .dir-rtl を使用してください。

TIP&トリック

これらのレシピは、コアテーマから拡張したテーマの custom.css（または、記載がある場合は Twig ファイル）に記述します。例の中の #c0392b は、お好みの色に置き換えてください。

ラジオボタンとチェックボックスの色を変更する

Fruity TwentyThree に付属している色のいずれかを使用するには、テーマ設定で テーマカラー を選択します。テーマ設定では、別の チェックアイコン を選択することもできます。

それ以外の色にするには、custom.css に CSS を追加します。コアテーマは、ブラウザーのデフォルトのラジオボタンやチェックボックスではなく、独自に描画したものを使用しているため、色を変更するにはこれらの描画された要素を変更する必要があります。

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla、Fruity、Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

視力の低い参加者でもどの回答が選択されているかを確認できるよう、色と背景のコントラストを十分に確保してください。

ラジオボタンとチェックボックスを大きくする

ラジオボタンとチェックボックスを大きくすると、スマートフォンやタブレットでタップしやすくなります。これはすべてのコアテーマで動作します。

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Fruity TwentyThree では、ラジオボタンと回答テキストの間にも余白を追加します。

.radio-item label {
    padding-left: 14px;
}

約 1.4 までの値であれば、追加の変更なしで動作します。それより大きい値にすると、小さい画面でコントロールが回答テキストや配列の行の端と重なり始めるため、周囲の余白も増やす必要があります。

プログレスバーの色を変更する

.progress-bar {
    background-color: #c0392b;
}

特定の言語でのみコンテンツを表示する

<body> 要素には、lang-en や lang-fr のように現在の言語を示すクラスが付いています。これを使用すると、フッターのヘルプ行など、言語ごとに異なるコンテンツを表示できます。各言語のテキストを、テーマの Twig ファイル（例：subviews/footer/footer.twig）に追加します。

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

次に、custom.css で他の言語のテキストを非表示にします。

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

アンケートごとに異なるロゴを使用する

ロゴごとに別々のテーマを用意する必要はありません。テーマ設定は 1 つのアンケートだけに設定できます。アンケートを開き、アンケートの設定 メニューの テーマ設定 をクリックして、別の ロゴファイル を選択します。テーマ設定を参照してください。

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

ファビコンとは、ブラウザーのタブやブックマークに表示される小さなアイコンのことです。コアテーマは、テーマの files/favicon.ico ファイルを表示します。独自のアイコンを使用するには、ファイル名を favicon.ico にして、拡張したテーマの 他のファイル パネルでアップロードします。親テーマのアイコンが置き換えられます。

Fruity TwentyThree でロゴを中央に配置する

テーマ設定でロゴをオンにしてから、custom.css に次の内容を追加します。

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

公開アンケートリストに独自のロゴを追加する

公開アンケートリストには、デフォルトで LimeSurvey ロゴが表示されます。独自のロゴを表示するには、次の手順に従います。

Fruity TwentyThree を拡張し、テーマエディターで作成したテーマを開きます。
他のファイル パネルでロゴをアップロードします。
アンケート一覧 画面を選択し、layout_survey_list.twig を開きます。
{{ include('./ls_logo_svg.twig') }} を含む <div> を探します。インクルード行を含め、この <div> 全体を、この手順の後に示すコードに置き換えます。
ローカルにテーマをコピーして変更を保存 をクリックします。
設定 > 全体設定 > 一般に移動し、公開アンケートリストとエラーページのテーマ として作成したテーマを選択します。

アップロードしたファイルの名前と、代替テキストとして組織名を使用してください。

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

二元スケール配列に区切り線を追加する

二元スケール配列の質問で、2つのスケールの間に縦線を引くには、次のようにします。

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

質問内の JavaScript

アンケートのすべてのページで JavaScript を実行するには、テーマの custom.js に記述します(上記を参照)。

1つの質問またはグループのテキストにスクリプトを追加することもできます。ただし、ユーザーに対して XSS フィルターがオフになっていない限り、LimeSurvey はこれらのテキストからスクリプトを削除します。このフィルターはスーパー管理者には適用されません。それ以外のユーザーの場合は、設定 > 全体設定 > セキュリティ で XSS の HTML をフィルター をオフにする必要があります。アンケートを編集できるすべてのユーザーを信頼できる場合にのみ、オフにしてください。詳細と例については、Workarounds: Manipulating a survey at runtime using Javascriptを参照してください。

主な章

テーマエディター

From LimeSurvey Manual

目次

はじめに

始める前に

コアテーマは編集できません：拡張してください

テーマの保存場所

テーマエディター

ツールバー

ファイルの編集

ファイルのアップロード

プレビュー

テーマのインポートとエクスポート

テーマの構成

テーマフォルダー

Twigテンプレート

config.xml

独自のCSSとJavaScriptの追加

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

ページのクラス

質問コンテナーのクラス

質問タイプのクラス一覧

質問の各部分のクラス

検証とヒントのクラス

右から左に記述する（RTL）言語

TIP&トリック

ラジオボタンとチェックボックスの色を変更する

ラジオボタンとチェックボックスを大きくする

プログレスバーの色を変更する

特定の言語でのみコンテンツを表示する

アンケートごとに異なるロゴを使用する

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

Fruity TwentyThree でロゴを中央に配置する

公開アンケートリストに独自のロゴを追加する

二元スケール配列に区切り線を追加する

質問内の JavaScript