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

概要

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

学べること

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

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

WYSIWYGエディタにHTMLを書く

WYSIWYGエディタのソースモードでHTMLを書きます。この段階では、HTMLはただのテキストリンクとして表示されます。

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をエディタに適用する

本文のWYSIWYGの場合

CSSを読み込ませたいWYSIWYGエディタがあるコンテンツ定義編集ページに移動します。
本文のWYSIWYGに読み込ませる場合は、「本文の入力方法」の「wysiwyg_options」欄に custom_css::/files/user/styles/wysiwyg/content-styles.css と入力します。

追加項目のWYSIWYGの場合

追加項目のWYSIWYGエディタにCSSを読み込ませる場合は、「設定」の「Custom CSS」欄に /files/user/styles/wysiwyg/content-styles.css と入力します。

保存するをクリックすると、設定フィールドにcustom_css::/files/user/styles/wysiwyg/content-styles.cssが表示されます。

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

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