テーマカラーの変更方法

ソーシャルキャスト

オウルキャスト

この方法はデフォルトのテンプレートを利用している場合に限った説明になります。
テンプレートの編集が難しい場合、サポートへお問い合わせ下さい。ご要望を伺い作業を承ることも可能です（有償作業となります）。

---

デフォルトデザインでは、6つの色テーマを準備しています。
ここでは、色テーマの変更方法をご説明します。

ソーシャルキャストの場合

管理画面の デザイン管理 -> テンプレート から下記のテンプレートを選択して編集します。

PC版テンプレート

「レイアウトテンプレート/共通レイアウト」を編集します。

{% block stylesheets %}
　<link rel="stylesheet" href="{{asset('lib/slick/slick.css')}}">
　<link rel="stylesheet" href="{{asset('lib/slick/slick-theme.css')}}">
　<link rel="stylesheet" href="{{asset('css/bootstrap/bootstrap.css')}}">
　<link rel="stylesheet" href="{{asset('css/font-awesome/font-awesome.css')}}">
　<link rel="stylesheet" href="{{asset('css/jq-ui/jquery-ui.min.css')}}">
　<link rel="stylesheet" href="{{asset('css/style.css')}}">

　{% if study_enable() %}
　　<link rel="stylesheet" href="{{asset('css/owl-style.css')}}">
　　<link rel="stylesheet" href="{{asset('css/theme/owl-blue.css')}}">
　{% else %}
　　<link rel="stylesheet" href="{{asset('css/theme/yellow.css')}}">
　{% endif %}
{% endblock %}

{{asset('css/theme/yellow.css')}} の部分を以下のように変更してください

• 青　{{asset('css/theme/blue.css')}}
• 赤　{{asset('css/theme/red.css')}}
• 緑　{{asset('css/theme/green.css')}}
• 紫　{{asset('css/theme/purple.css')}}
• 桃色　{{asset('css/theme/pink.css')}}

スマートフォン版テンプレート

「レイアウトテンプレート/共通レイアウト」を編集します。PC版とスマートフォン版を間違えないように注意してください。

{% block stylesheets %}
　<link rel="stylesheet" href="{{asset('lib/slick/slick.css')}}">
　<link rel="stylesheet" href="{{asset('lib/slick/slick-theme.css')}}">
　<link rel="stylesheet" href="{{asset('css/bootstrap/bootstrap.css')}}">
　<link rel="stylesheet" href="{{asset('css/font-awesome/font-awesome.css')}}">
　<link rel="stylesheet" href="{{asset('css/jq-ui/jquery-ui.min.css')}}">
　<link rel="stylesheet" href="{{asset('css/sp_style.css')}}">

　{% if study_enable() %}
　　<link rel="stylesheet" href="{{asset('css/owl-style.css')}}">
　　<link rel="stylesheet" href="{{asset('css/theme/owl-blue.css')}}">
　{% else %}
　　<link rel="stylesheet" href="{{asset('css/theme/sp_yellow.css')}}">
　{% endif %}
{% endblock %}

• 青　{{asset('css/theme/sp_blue.css')}}
• 赤　{{asset('css/theme/sp_red.css')}}
• 緑　{{asset('css/theme/sp_green.css')}}
• 紫　{{asset('css/theme/sp_purple.css')}}
• 桃色　{{asset('css/theme/sp_pink.css')}}

オウルキャストの場合

管理画面の デザイン管理 -> テンプレート から下記のテンプレートを選択して編集します。

PC版テンプレート

「レイアウトテンプレート/共通レイアウト」を編集します。

{% block stylesheets %}
　<link rel="stylesheet" href="{{asset('lib/slick/slick.css')}}">
　<link rel="stylesheet" href="{{asset('lib/slick/slick-theme.css')}}">
　<link rel="stylesheet" href="{{asset('css/bootstrap/bootstrap.css')}}">
　<link rel="stylesheet" href="{{asset('css/font-awesome/font-awesome.css')}}">
　<link rel="stylesheet" href="{{asset('css/jq-ui/jquery-ui.min.css')}}">
　<link rel="stylesheet" href="{{asset('css/style.css')}}">

　{% if study_enable() %}
　　<link rel="stylesheet" href="{{asset('css/owl-style.css')}}">
　　<link rel="stylesheet" href="{{asset('css/theme/owl-blue.css')}}">
　{% else %}
　　<link rel="stylesheet" href="{{asset('css/theme/yellow.css')}}">
　{% endif %}
{% endblock %}

{{asset('css/theme/owl-blue.css')}} の部分を以下のように変更してください

• 青　{{asset('css/theme/owl-blue.css')}}
• 赤　{{asset('css/theme/owl-red.css')}}
• 緑　{{asset('css/theme/owl-green.css')}}
• 紫　{{asset('css/theme/owl-purple.css')}}
• 桃色　{{asset('css/theme/owl-pink.css')}}

スマートフォン版テンプレート

「レイアウトテンプレート/共通レイアウト」を編集します。PC版とスマートフォン版を間違えないように注意してください。

{% block stylesheets %}
　<link rel="stylesheet" href="{{asset('lib/slick/slick.css')}}">
　<link rel="stylesheet" href="{{asset('lib/slick/slick-theme.css')}}">
　<link rel="stylesheet" href="{{asset('css/bootstrap/bootstrap.css')}}">
　<link rel="stylesheet" href="{{asset('css/font-awesome/font-awesome.css')}}">
　<link rel="stylesheet" href="{{asset('css/jq-ui/jquery-ui.min.css')}}">
　<link rel="stylesheet" href="{{asset('css/sp_style.css')}}">

　{% if study_enable() %}
　　<link rel="stylesheet" href="{{asset('css/owl-style.css')}}">
　　<link rel="stylesheet" href="{{asset('css/theme/owl-blue.css')}}">
　{% else %}
　　<link rel="stylesheet" href="{{asset('css/theme/sp_yellow.css')}}">
　{% endif %}
{% endblock %}

• 青　{{asset('css/theme/owl-blue.css')}}
• 赤　{{asset('css/theme/owl-red.css')}}
• 緑　{{asset('css/theme/owl-green.css')}}
• 紫　{{asset('css/theme/owl-purple.css')}}
• 桃色　{{asset('css/theme/owl-pink.css')}}