スキンカスタマイズ機能を使ってテーマの見た目を調整してみる
n.yuumi
はじめに
ConcreteCMSにはスキンカスタマイズという機能があります。
これを使えば、ConcreteCMSの編集画面から簡単にカラーやフォントなどのスタイルの変更を行えます。
例えば、マルチサイトなど、ConcreteCMSのテーマは共通で使いたいが、各サイトごとに色味を変えたい時などに役立ちます。
今回は、スキンカスタマイズを使って色を調整できるようにする方法を紹介します。
カスタマイズ設定
scssファイルを準備する
まず、テーマ直下に下記フォルダとscssファイルを用意します。
css
|- features
|- imagery
|-_imagery.scss
|- presets
|- default
|- _customizable-variables.scss
|- main.scss
|- skins次に、カラー変数を設定します。
その際、「!default」を忘れずに付けてください。この設定をすることでスキンカスタマイズで変更できるようになります。
//_customizable-variables.scss
$primary: #ff69b4 !default;
$secondary:#3cb371 !default;
$tertiary:#ffff00 !default;先ほどの、 _customizable-variables.scss で指定したカラー変数を指定したクラスを作成します。
//_imagery.scss
.imagery {
&_primary {
background-color: $primary;
}
&_secondary {
background-color: $secondary;
}
&_tertiary {
background-color: $tertiary;
}
}main.scssに該当のscssファイルをインポートします。
// main.scss
@import "customizable-variables";
@import "../../features/imagery/imagery";webpack設定
テーマ直下にwebpack.mix.jsファイルを設置し、ビルド先のcssを設定します。
// webpack.mix.js
const mix = require('laravel-mix');
mix.webpackConfig({
stats: {
children: true, // このオプションを有効にすることで、Webpack が子モジュール（たとえば、css-loader や sass-loader などのローダーが生成するモジュール）の詳細な情報をログに出力するようになります。
}
});
mix.sass('css/presets/default/main.scss', 'css/skins/default.css');パッケージインストール
必要なライブラリ、モジュールをインストールします。
ビルドコマンドを実行し、「 Compiled Successfully」がログに表示され、ビルド先に指定したファイルが出力されます。
今回の場合、skinsフォルダにdefault.cssが出力されることを確認してください。
npm init -y
npm install
// 今回は、laravel-mix,resolve-url-loader,sass,sass-loaderをインストールします。
npm install laravel-mix resolve-url-loader sass sass-loader --save-dev// package.json
{
"name": "abc_theme",
"version": "1.0.0",
"main": "webpack.mix.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"production": "mix --production" // ビルドコマンドを追加します。
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"laravel-mix": "^6.0.49",
"resolve-url-loader": "^5.0.0",
"sass": "^1.86.3",
"sass-loader": "^16.0.5"
}
}<?xml version="1.0"?>
<styles version="2.0" lang="scss">
<set name="Base Colors">
<style name="Primary" variable="primary" type="color"/>
<style name="Secondary" variable="secondary" type="color"/>
<style name="Tertiary" variable="tertiary" type="color"/>
</set>
</styles>テーマスタイルを読み込む
スキンカスタマイズで更新されたスタイルを読み込みます。headタグに
<?= $view->getThemeStyles(); ?>
を追加してください。
表示確認
テーマに追加された「Customize」のページに移動します。
styles.xmlで設定したスタイルが表示されています。
右下のボタンから新しいスキンを追加できます。
今回は、「purple」というスキンを追加し、カラー設定をそれぞれ変更します。
再度テーマを確認すると、「purple」が追加されたことが確認できます。
こちらを選択し、ページを確認します。
追加されたpurpleクラスのスタイルが適用されていることが分かります。
注意点
styles.xmlに新しくスキンのスタイルを追加した場合、既に作成済みのスキンには適用されません。
新規で追加したスキンのみに適用されますので、注意が必要です。
