Kuroco管理画面のWYSIWYGエディタに任意のCSSを適用する

概要

Kuroco管理画面のWYSIWYGエディタにCSSファイルを読み込ませることで、コンテンツに任意のCSSを適用できます。

学べること

以下の手順でWYSIWYGエディタに任意のCSSを適用する方法を学びます。

• WYSIWYGエディタにHTMLを書く
• CSSファイルを作成する
• CSSをエディタに適用する
• スタイルの適用を確認する

WYSIWYGエディタにHTMLを書く

コンテンツ定義の項目設定でWYSIWYG項目を作成し、ソースモードでHTMLを書きます。この段階では、HTMLはただのテキストリンクとして表示されます。

<a class="style-button" href="">Button</a>

CSSファイルを作成する

content-styles.css というCSSファイルを作成します。ファイル名は自由に命名していただいて構いません。ただし、CSSセレクタの先頭には必ず .ck-content を付けてください。

危険

CSSセレクタの先頭に.ck-contentが無い場合、Kuroco管理画面の表示に影響を与える可能性があります。
WYSIWYGエディタに適用するCSSには、必ず.ck-content を付与してください。
参考：CKEditor-Content styles

.ck-content .style-button {
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #2C7BE5;
    color: #fff;
    text-decoration: none;
}

このCSSファイルをファイルマネージャーにアップします。ここでは /styles/wysiwyg/ というフォルダを作成し、その中にCSSファイルをアップロードします。

CSSをエディタに適用する

項目毎に設定する場合

CSSを読み込ませたいWYSIWYGエディタがあるコンテンツ定義編集ページに移動します。
項目設定でWYSIWYG項目の[カスタムテンプレート]->[カスタマイズCSS]に /files/user/styles/wysiwyg/content-styles.css と入力します。

全てのWYSIWYGに対して設定する場合

コンテンツ編集画面の全てのWYSIWYGエディタにCSSを読み込ませる場合は、コンテンツ定義の[詳細設定]->[カスタマイズCSS]に /files/user/styles/wysiwyg/content-styles.css と入力します。

スタイルの適用を確認する

WYSIWYGエディタに戻り、ソースモードで先ほどと同じHTMLを入力します。ソースモードから通常モードに切り替えると、ボタンに設定したスタイルが適用されていることが確認できます。