印刷する

高度なカスタマイズ

スタイルの作成

スタイルはCSS、画像ファイル、及びオプションでJavascriptファイルで構成されています。
スタイルを作成/編集することで、INTER-STREAMの外観を更に細かく変更する事が可能です。

ここでは"Default"のスタイルを元に新しいスタイルを作成し、"My Style"と名付けます。

1. "_theme.ini"ファイルの編集
デフォルト/クラシックテーマの定義ファイルはpublic/frontend/default/_theme.iniです。
ファイル形式はJSON、UTF-8エンコードのプレーンテキストファイルです。
Notepad、Notepad2、Notepad++、Dreamweaverのようなプレーンテキストエディタで編集可能です。

以下の箇所を探します。

"styles": {
"default" : { "title" : "Default" , "description" : "{k.lang.be.style_description_default}" },
"default_wide" : { "title" : "Default [Wide Mod]" , "description" : "{k.lang.be.style_description_default_wide}" },
"minimalism_white" : { "title" : "Minimalism:White" , "description" : "{k.lang.be.style_description_minimalism_white}" },
"minimalism_white_wide" : { "title" : "Minimalism:White [Wide Mod]" , "description" : "{k.lang.be.style_description_minimalism_white_mod}" },
"ice_blue" : { "title" : "Ice:Blue" , "description" : "{k.lang.be.style_description_ice_blue}" },
"black" : { "title" : "Back" , "description" : "{k.lang.be.style_description_black}" }
},

2. 新しいスタイルをエントリに追加して保存します。

"styles": {
"default" : { "title" : "Default" , "description" : "{k.lang.be.style_description_default}" },
"my_style" : { "title" : "My Style" , "description" : "This is My Style" },
"default_wide" : { "title" : "Default [Wide Mod]" , "description" : "{k.lang.be.style_description_default_wide}" },
"minimalism_white" : { "title" : "Minimalism:White" , "description" : "{k.lang.be.style_description_minimalism_white}" },
"minimalism_white_wide" : { "title" : "Minimalism:White [Wide Mod]" , "description" : "{k.lang.be.style_description_minimalism_white_mod}" },
"ice_blue" : { "title" : "Ice:Blue" , "description" : "{k.lang.be.style_description_ice_blue}" },
"black" : { "title" : "Back" , "description" : "{k.lang.be.style_description_black}" }
},

注：IDにスペースや特殊文字を含めることはできません。
変更を加えた後はファイル検証することを推奨します。オンライン検証ツールの利用が便利です。

3. "Default"スタイルに対応するすべてのフォルダを複製します。
public/frontend/default/css_default/
public/frontend/default/images_default/
public/frontend/default/js_default/

4. 複製したフォルダの名前を変更して、新しいスタイルIDを追記します。
public/frontend/default/css_my_style
public/frontend/default/images_my_style
public/frontend/default/js_my_style

5. 変更した"_theme.ini"ファイルと新しいフォルダをサーバーにアップロードします。
追加したスタイルがINTER-STREAMの[一般設定＞外観＞テーマ&スタイル]セクションに表示されます。

6. 新しいスタイルファイルの編集
・CSSファイル（public/frontend/default/css_my_style/ディレクトリ）
main.css："デスクトップ"インタフェース（メインインタフェース）に適用
main.mobile.css：モバイルインターフェイスに適用
popup.css：コメントとメールの共有ポップアップに適用
icons.css：SNSソーシャライズやその他の一般的なアイコンに適用
modal.css：モーダルボックスとツールチップのスタイル定義（ツールチップはフロントエンドでは使用されません）。

・スタイル固有のJavaScript（public/frontend/default/js_my_style/style.js）
スタイル固有のスクリプトをこのファイルに追加します。

・画像ファイル（public/frontend/default/images_my_style/ディレクトリ）

7. 新しいスタイルのサムネイル
対応する画像フォルダ内の"_style.jpg"という名前のファイルが新しいスタイルに表示されるサムネイル画像です。
例）public/frontend/default/images_my_style/_style.jpg