Skip to content

テーマカラーの変更方法

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

概要

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

テンプレート変更手順

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

PC版テンプレート

  • レイアウトテンプレート/共通レイアウト
1
2
3
4
5
6
7
8
9
{% 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')}}

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

  • レイアウトテンプレート/共通レイアウト
1
2
3
4
5
6
7
8
9
{% 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_yellow.css')}} の部分を以下のように変更してください
      • {{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')}}