スタイルカスタマイザーで見た目を調整する方法

n.yuumi
n.yuumi

スタイルカスタマイザーとは

Concrete CMSには、スタイルカスタマイザーという機能があり、既にテーマで設定されたフォントサイズや余白、背景色などのスタイルをオーバーライドすることができます。
プリセット機能もあり、ページごとのデザインの切り替えなども簡単に行えます。
 
 
Screen Shot 2021-11-24 at 18.54.03.png
 

LESSファイル作成

まず、LESSファイルの準備を行います。
今回は、テーマ下の/assets/css/app.cssでスタイルを設定しているので、こちらのファイルをapp.lessに変更し、/css以下に移動します。
 
Screen Shot 2021-11-16 at 15.20.58.png
 
ファイルの拡張子、フォルダ構成が変わるので、linkタグも修正していきます。
「変更後」のように記載を修正しましょう。
ページをリロードし、lessファイルが正しく読み込まれており、デザインが崩れていないことを確認してください。
 
<!--変更前-->
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/assets/css/app.css">
<!--変更後-->
<link href="<?=$view->getStylesheet('app.less')?>" rel='stylesheet' type='text/css'>

Screen Shot 2021-11-16 at 15.30.07.png

デフォルト設定ファイル作成

次に、初期設定のスタイルを定義します。
ファイルの設置場所は/css/presets/defaults.lessです。設置場所とファイル名は重要ですので間違えないようにしてください。
その後、先ほどのapp.lessでdefaults.lessファイルを読み込ませます。
ファイルの上部に下記のように記載してください。
@import "presets/defaults.less";
こちらの記載がないと、カスタマイズが反映されないので忘れないようにしましょう。
 
まず正しく読み込まれているか確認します。
defaults.lessに適当な変数を定義し、app.less側で読み込ませてみてください。
 
 
 
Screen Shot 2021-11-25 at 8.56.28.png
 
Screen Shot 2021-11-25 at 8.58.17.png
 
defaults.lessで定義したスタイルが反映されていることを確認できればOKです。
 

xmlファイル設定

デザインパネル上で設定を行えるようにするため、xmlファイルに定義していきます。
app.lessと同じ階層にstyles.xmlファイルを設定してください。
/css/presets/styles.xml
下記のようにスタイルを指定していきます。
 
名前:ここで設定した名前がデザインパネルのラベルとして使用されます。
タイプ:スタイルの種類によって指定するタイプが異なります。
変数:任意の変数名が指定可能です。
 
<?xml version="1.0"?>
<styles version="1.0">
    <set name="スタイルセットの名前">
        <style name="スタイルの名前" variable="変数" type="タイプ" />
    </set>
</styles>
タイプの設定ですが、xmlファイルでは、Size、Type、Color、Imageのタイプ設定が可能となっています。
 
Size
フォントサイズや余白サイズ、幅、高さの指定などを行いたい時に使います。
pxもしくはemでの指定ができます。
 
Color
通常のcssと同じように、背景色やフォント色などを設定したい時に使います。
 
Image
背景画像などを変更したい時などに使います。
 
変数を使う時は少し注意が必要です。
スタイルを定義する際、【styleタグで指定した変数名 + Type名(-size / -color / -image)】が変数となります。
 
Screen Shot 2021-11-16 at 17.28.48.png
 
Type
他の3つと違い、9種類の変数が用意されています。
 
{$variable}-type-font-family
{$variable}-type-font-weight
{$variable}-type-text-decoration
{$variable}-type-text-transform
{$variable}-type-font-style
{$variable}-type-color
{$variable}-type-font-size
{$variable}-type-letter-spacing
{$variable}-type-line-height
フォントスタイルの基本設定を定義できるので、ページ全体のスタイル定義を行う時に便利です。
例えば、変数をbodyとした場合、下記のように定義することができます。
 
Screen Shot 2021-11-16 at 17.43.10.png
 
また、定義した内容はデザインパネルに反映され、そこでスタイルの変更も可能です。
 
Screen Shot 2021-11-16 at 17.48.42.png
 
名前は、定義したものがそのままデザインパネル上のラベルとして表示されます。
特に決まりはありませんが、あまり長い名前を付けると読みづらいので気をつけてください。
 
Screen Shot 2021-11-16 at 17.57.27.png
 

スタイル調整

デザインパネルの設定ができたら、スタイルの調整を行っていきます。
今回は例として、Header部分の背景色とフォントサイズを変えてみます。
 
Screen Shot 2021-11-18 at 10.48.42.png
 
デザインパネルを開き、色の部分をクリックするとポップアップが表示されるので、任意の色を選択してみます。
 
Screen Shot 2021-11-18 at 10.49.50.png
 
次に、フォントサイズを変えます。
 
Screen Shot 2021-11-18 at 10.50.30.png
 
変更を保存すると、Header部分の背景色とフォントサイズが変わったことが確認できました。
 
Screen Shot 2021-11-18 at 10.51.01.png
 

プリセット設定

スタイルカスタマイザーでは、プリセット設定が可能です。
まず、defaults.lessと同じ階層に別のLESSファイルをセットしてください。
今回は、例として背景色やフォントスタイルを調整したblue.lessファイルを置いてみます。
 
Screen Shot 2021-11-17 at 9.10.58.png
 
プリセット名とアイコンの色は任意の設定が可能です。
 
@preset-name: "プリセット名"
@preset-icon: concrete-icon(color, color, color ); 
 
Screen Shot 2021-11-17 at 9.14.07.png
 
追加したプリセットを選択するとポップアップが表示され、開いているページ、もしくはページ全体にスタイルを反映するかの選択ができます。
This PageEntire Siteどちらかのボタンを押せばプリセットで設定したスタイルが適用されます。
 

Screen Shot 2021-11-17 at 9.18.42.png

Blue Styleプリセットで設定したスタイルが適用されてることが確認できました。

Screen Shot 2021-11-17 at 17.39.17.png

 

Concrete CMS バージョン9での対応

バージョン9では、SCSSをサポートした新しいカスタマイズ機能に対応しました。スキンという仕組みが導入され、カスタマイズはSassファイルを使用して行います。
今回のブログは、バージョン8でのスタイルカスタマイザーの説明になっているのでご注意ください。バージョン9での詳しい設定方法は、また他のブログで紹介したいと思います。
 

最後に

スタイルカスタマイザーであらかじめ設定しておけば、ソースを直さなくても見た目の調整が容易に行えます。
オフィシャルサイトにも詳しく記載されているので確認してみてください。