Theme editor/ja

=はじめに=

LimeSurveyには、アンケートの外観を効率的にカスタマイズできる高度なテーマとスタイルのシステムがあります. LS3以降、以前のバージョンで"テンプレート"と称していたものを"テーマ"と呼びます. テーマは、アンケート中のページの見た目をコントロールします. アンケート管理者は、既定のテーマを選択し、個々のアンケートをカスタマイズし、見た目を改善することができます. テーマには、プログラミングのスキルを要することなく、ようこそ画面にロゴを追加したり、背景色を変更したり、フォントを選択したりできるオプションがあります.

LimeSurveyには、初期状態で3つのテーマがあります. これらの初期テーマは、"themes/survey/"ディレクトリーにあります. それぞれのテーマは個々にディレクトリーを持っています. テーマのメインディレクトリーには、XMLで記述された設定ファイルのほか、themes (.twig)、cascading style sheets (.css)、scripts、images (.jpg or .png')など多くのディレクトリーがあります.

LimeSurvey 2.50以降、テーマエンジンはCSSフレームワークとして、Bootstrap 3を使用しています. Bootstrap 3は標準的なフレームワークなので、開発者はインターネットで関連のドキュメント、チュートリアル、フォーラムスレッドを利用することができます.

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

Vanillaテーマのスニペット:

テーマは、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'エレメントの多くはテーマによって調整することができます. 次のセクションでは、テーマテンプレートについて簡単に説明します.

=LimeSurveyテーマエディター=

テーマの理解を容易にし、手早く更新するため、LimeSurveyでは 管理ツールバーからテーマエディターを利用することができます. テーマエディターは、テンプレートパーミッションを有するユーザーとスーパー管理者だけが利用することができます.

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



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



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


 * 作成: 新しいテンプレートを作成します. ゼロから作るのでなければ、'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ページのスタート部分を形成します. " "タグで始まります（" "タグを含んではなりません）. この、標準的なHTMLページの'冒頭部分'はスクリプトで書かれています. startpage.pstplファイルには タグを含めます. 多くのブラウザーは、W3 HTML標準に厳格に従わないことも許容していますが、LimeSurveyスクリプトでは、JavaScriptエレメントを実行するため、 タグがなければなりません. 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個あります. それぞれ、アンケートの設定で指定したテンプレートの共通のファイルから構成されます. 次の表はどのテンプレートファイルがそれぞれのページを構成するかを示したものです.

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

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

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



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

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

ではなく、次のようにします.

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

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

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

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

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

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

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

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

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

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

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

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

質問部分のクラスの例
自由回答（短い）質問タイプ: 自由回答（短い・複数）質問タイプ 配列質問タイプ

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

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

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

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

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

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

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

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

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

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

Internet explorer向けの別のソリューション
bodyの条件付きクラスをstartpage.pstplに配置し、このクラスをtemplate.cssで使用できます. このメソッドは、citronadeテンプレートで使用されます. JavaScriptが動作するシステムにはjsクラス、動作しないシステムにはno-jsクラスを追加します.

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

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

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

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

入力／ボタン
アンケートの各"入力"タイプには独自のクラス名が与えられているため、"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のすべての部分を編集できるため、 のようにテンプレートを囲んで、new_nameクラスのCSSを定義する必要はありません.

プログレスバーのスタイル
プログレスバーの外観はCSSで変更できます.

バーの背景色を変更するには、template.cssファイルの最後に次のような記述を追加します.

バーの境界線の色を変更するには、template.cssファイルの最後に次のような記述を追加します.

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

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


 * XSS filterを無効にする: 全体設定 -> セキュリティで"HTMLのXSSフィルター"をオフにします.
 * 質問またはグループの説明のソースにスクリプトを入力します.

=テンプレートに関するビデオ=

このビデオでは、すべてのLimeSurveyユーザーが利用できる基本的なテンプレート機能と高度なテンプレート機能を紹介します. これには、特定のフォームの外観を変更したり、カスタムグラフィックスを挿入することが含まれます. さらに、特定のページテンプレートの編集やプレビュー、テンプレートのインポート／エクスポート、CSSによる質問の外観の変更、アンケートの説明ページのカスタマイズ方法について徹底的に説明します.

ビデオ - 準備中

=TIP&トリック=

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

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

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

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

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

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

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

$ unzip template.zip -d template

Archive: template.zip

inflating: template/startpage

inflating: ...

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

ヘルプアイコンの置き換え
質問のヘルプテキストが表示されると、既定のテンプレートフォルダからhelp.gifイメージが読み込まれます.

この画像を置き換えるには、カスタムテンプレートフォルダに新しいhelp.gif、help.png、help.jpgをアップロードします. 既定のヘルプアイコンの代わりに自動的に使用されます.

既存のロゴの置き換え
注意: 2.50の既定のテンプレートでは、事前に設定されたロゴはありません. 詳細は、独自のロゴを追加する方法に関するウィキを参照してください.

1. ロゴを編集するには次のように template.css ファイルを探します.



2. 検索ボタンをクリックして、ロゴ関連のスタイルの出現箇所を探し、logoを検索します.



3. メインスタイルファイルを編集します.

次のようなものが表示されます.



画像を変更したい場合は、logo.gifを別の画像リンクに置き換えてください. 例: （ logo.png または logo.jpg ）

イメージのサイズを変更する場合は、次のように幅と高さをピクセル単位で調整します.

独自のロゴを追加する
1. startpage.pstplテンプレートファイルを見つけて開きます.



2. startpage.pstplの次の部分の後に、 次の行を加えます.

3. 独自のロゴをアップロードするには、テンプレートエディターでロゴをアップロードします.



ロゴを配置するには、次のいずれかのCSSクラスを使用してください.


 * 左にロゴを配置したい場合:


 * ロゴを右側に配置する場合:


 * ロゴを中央に配置したい場合:

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

カスタムファビコンを表示する
ファビコンは、ブラウザのアドレスバー、ブックマークのリスト、タブに表示される小さなアイコンです. 次のように自分のアイコンを表示することができます.
 * 1) ファビコンを作成する - Googleでたくさんのフリーファビコンジェネレーターを見つけることができます.
 * 2) 新しいファビコンに "favicon.ico"と名前をつけ、テンプレートの/filesディレクトリーに配置します.
 * 3) startpage.pstplの タグの前に次のコードを追加します.

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

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

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

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

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

開始ページ／アンケートリストに表示されたアンケートのコンタクトメッセージを非表示にする
スタートページ（アンケートリスト付き）で、"連絡してください..."というメッセージを非表示にするには、使用するデザインテンプレートのtemplate.jsにある$(document).ready関数に次の内容を追記します.

エラーメッセージに表示されるアンケートのコンタクトメッセージを削除する
エラーメッセージからアンケートのコンタクトメッセージを削除する場合は、少々面倒です. 以下の関数を追加します. 使用するデザインテンプレートのtemplate.jsにある$(document).ready関数を呼び出します.

次に、*template.js*ファイルに次の関数を追加します.

おそらく英語のアンケートではうまくいかず、多言語アンケートに使用するときは拡張する必要がありますが、これを解決する方法のアイデア／ヒントとなります.

多言語の質問属性を扱う方法
多言語アンケートを実施する場合で、"other"フィールドに別の文字列を使用したい場合、これは基本言語でのみ行うことができます（この機能が追加されるLimeSurvey 2.0以前）. この問題を回避するには、フィールドに貼り付けて、"other"のラベルを変更します.

テンプレートのtemplate.css（/limesurvey/upload/templates/ /template.css）に以下のスタイルを追加します.

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

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

=カスタム質問ビュー =

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

バージョン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で、 ブロックまたはブロックにファイルパスを追加します.