ブロック、エリア、エディターにカスタムCSSクラスを追加する

このページの解説は、下記の動画が元になっています。動画は英語です。日本語字幕を付けるか、日本語で採録するかは検討中です。

これまで、concrete5のテーマを作成し、グリッドを有効にし、アセットの管理について学んできました。次に、ブロックやエリア、RedactorエディターのCSSをカスタマイズする方法についてご紹介しましょう。

カスタムテンプレート

concrete5では、カスタムテンプレートの仕組みを以前から提供してきました。この仕組みは、ブロックの見た目を切り替える方法です。しかし、単にブロックやエリアを囲むdivに別のclass名を指定したいだけの場合、テンプレートファイルごと複製するこのやり方では管理が煩雑になります。5.7では、テーマの PgeTheme ファイルから指定することで、セレクトメニューに簡単に表示することができるようになりました。

エリアクラス

このメソッドを PageTheme クラスに追加してください。

public function getThemeAreaClasses()
{
    return array(
        'Welcome' => array('templatemo-team')
    );
}

上記は、"Welcome" エリアのカスタムデザインツールバーのカスタムクラスメニューに "templatemo-team" クラスを表示する例です。

ブロッククラス

次のメソッドを PageTheme クラスに追加してください。

public function getThemeBlockClasses()
{
    return array(
        'image' => array(
            'img-thumbnail'
        )
    );
}

上記は画像ブロックのカスタムデザインツールバーのカスタムクラスメニューに "img-thumbnail" クラスを追加する例です。

エディタークラス

次のメソッドを PageTheme クラスに追加してください。

public function getThemeEditorClasses()
{
    return array(
        array('title' => t('Orange Button'), 'menuClass' => '', 'spanClass' => 'btn btn-orange'),
        array('title' => t('Green Button'), 'menuClass' => '', 'spanClass' => 'btn btn-green')
    );
}

これらのクラスは記事ブロックのエディタに表示されます。

これらの方法を使って、カスタムテンプレートを作成せずに、カスタムCSSを適用させることが可能になります。

原文：Adding Custom CSS Classes to Blocks, Areas and the Editor

エディタークラスのさらに詳しい設定方法（8.1.1以降）

バージョン8以降で採用されたCKEditorでは、さらに詳しいスタイルの設定が可能です。getThemeEditorClasses() から、これらの指定が行えるようになりました。

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

エディタークラスのさらに詳しい設定方法（5.7）

配列で指定する要素の説明

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

span以外で囲む例：

    public function getThemeEditorClasses()
    {
        return array(
            array(
                'title' => t('Section Heading'),
                'menuClass' => 'section__heading text-uppercase',
                'spanClass' => 'section__heading text-uppercase',
                'wrap' => 'h3'
            ),
        );
    }