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

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

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'],
        ],
    ];
}

サンプルに変更してみた

全然こっちの方がわかりやすいですね＾▽＾
あとは自分の好きなスタイルを当てていくだけでいいですね。

追記

記事ブロック（CKEditor）のテンプレート機能を利用するエントリを書きました。