記事ブロックのスタイルをカスタマイズする覚書

2018/09/20

記事ブロックのスタイルの部分をカスタマイズしたいなぁと思ってググったメモ。

1 Cloneamentalの使用が前提になっています
2 page_theme.phpで使用するらしい
- 2.1 エディタークラスで設定できること
3 concrete5 ver8からはCKEditorになっている
4 サンプルに変更してみた
5 追記

Cloneamentalの使用が前提になっています

マーケットプレイスで配布されているCloneamentalを使用すると「オブジェクトスタイル」として細いタイトル、大文字タイトルとかがあって、「インラインスタイル」に画像キャプションとかボタンとかある。

page_theme.phpで使用するらしい

公式サイトでも説明ページがありました。
ブロック、エリア、エディターにカスタムCSSクラスを追加する

Cloneamentalのpage_theme.phpをみると下記のような箇所があります。
getThemeEditorClasses()でスタイルの設定ができるみたいです。

エディタークラスで設定できること

title: エディターの「カスタムスタイル」プルダウンに表示される名前
menuClass（オプション）: エディターの「カスタムスタイル」プルダウンで使われる class 属性値
spanClass: エディターの「カスタムスタイル」プルダウンで選択した際に、テキストが囲まれる class 属性値。wrap または style が設定されている場合は、必須
wrap: エディターの「カスタムスタイル」プルダウンで選択した際に、デフォルトでは span で囲まれますが、任意のタグで囲むことができます。
style: エディターの「カスタムスタイル」プルダウンで選択した際に、class 属性値を付与するのではなく、インラインCSSを指定することができます。
forceBlock: エディターの「カスタムスタイル」プルダウンで選択した際に、ブロックレベル要素またはインラインレベル要素のどちらで囲むかの指定。
0 wrapタグから自動判別（デフォルト）
1 必ずブロックレベル要素で囲む
-1 ブロックレベル要素で囲まない

concrete5 ver8からはCKEditorになっている

CKEditorになってからはさらに設定ができるようになったみたいです。

public function getThemeEditorClasses()
{
    return [
        // Block-level styles
        [
            'title' => t('Blue Title'),
            'element' => 'h2',
            'styles' => ['color' => 'Blue'],
        ],
        [
            'title' => t('Red Title'),
            'element' => 'h3',
            'styles' => ['color' => 'Red'],
        ],
        // Inline styles
        [
            'title' => t('CSS Style'),
            'element' => 'span',
            'attributes' => ['class' => 'my_style'],
        ],
        [
            'title' => t('Marker: Yellow'),
            'element' => 'span',
            'styles' => ['background-color' => 'Yellow'],
        ],
    ];
}