テーマカラーの変更方法

フォローする

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


SOCIALCASTのデフォルトデザインでは、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')}}">
<link rel="stylesheet" href="{{asset('css/theme/yellow.css')}}">
{% 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')}}">
<link rel="stylesheet" href="{{asset('css/theme/sp_yellow.css')}}">
{% 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')}}
この記事は役に立ちましたか?
6人中6人がこの記事が役に立ったと言っています