〜実践編〜「BurgerEditor」プラグインのスタイル調整について

「BurgerEditor」プラグインについてのご紹介をしている〜導入編〜の続きです。
〜導入編〜はこちら → https://catchup.co.jp/blog/media/archives/412

さて、大変おまたせしました。
それでは、デザインや装飾の変更方法の紹介にいってみましょー！

大前提として、baserCMS５系と４系ではファイル構造、DB構造に結構な違いがあります。
baserCMS４系だと、テーマは「theme」フォルダの中に展開されますが、５系ではテーマもプラグインも「plugins」の中で展開されます。

baserCMS５系が出てから少し経ちますが、５系だけの情報より４系もあったほうが良いかと思いますので、一緒にご紹介しますね。
といっても今回だと先述の通り、ファイルの場所が違うぐらいです。

スタイル変更については、実はプラグインの中にREADMEが用意されていて、すごく丁寧に説明があります。今回はこちらのREADMEからのご紹介です。

５系：plugins/BurgerEditor/stylesheet/README.md

４系：app/Plugin/BurgerEditor/stylesheet/README.md

ちなみに、BurgerEditorプラグイン全体のREADMEはこちら

５系：plugins/BurgerEditor/README.md

４系：app/Plugin/BurgerEditor/README.md

上書き用として準備してあるcssファイルは下記パスの場所にあります。※コピーして、利用可能です。

５系の上書き用css：plugins/BurgerEditor/stylesheet/bge_style.css
４系の上書き用css：app/Plugin/BurgerEditor/stylesheet/bge_style.css

下記の場所に上記のcssを設置します。（設置場所の説明は後述）

５系：/webroot/css/bge_style.css
４系：/css/bge_style.css

これでサイト表示の時も、管理画面の編集の時もお好みのスタイルが当てられるハズです！

ちなみに、SASSを利用する場合は、下記にファイル一式があるので、こちらからcssを生成して適応させましょう。

５系：plugins/BurgerEditor/stylesheet/sass/
４系：app/Plugin/BurgerEditor/stylesheet/sass/

READMEにもありますが、baserCMSでは読み込まれるファイルに優先順位があります。

• baserCMS５系ガイド - ファイル読み込みの優先順位：
  https://baserproject.github.io/5/theme/file_priority
• baserCMS４系ガイド - ファイル読み込みの優先順位：
  https://wiki.basercms.net/ファイル読み込みの優先順位
   

baserCMSでは、フロント／管理画面いずれも「テーマ→プラグイン→コア」の順でアセットを探します。上位に同名ファイルがあればそちらを優先して読み込みます。

今の時点だと、５系は管理画面での編集画面にスタイルが当たっている状態にするには、BurgerEditorプラグインや、管理画面のテーマを編集する必要があるため、ルート直下のwebrootにcssを置いてしまおうという訳です。
今後、BurgerEditorのバージョンアップで管理画面の編集画面もテーマ内のcssを読み込む様になったり・・・などあるかと思いますので、あくまでも「今のところ」です。
サイトを表示するフロント側のcssの読み込みに関しては、読み込みタグの他にもテーマを参照する関数タグを利用したりすることで柔軟に対応できるので、やりやすい方法で組み込んでください。

「BcThemeSample」を利用して何もパスなど変えていない時には、「bge_style.css」が読み込まれる優先順位は下記の様になっていました。（私調べ）

上から、ファイルが見つかったらそのファイルが読み込まれます。

• 5系
  • フロント

    ①：/webroot/css/bge_style.css（読み込ませる）
    ②：/plugins/BcThemeSample/webroot/css/bge_style.css
    ③：/plugins/BurgerEditor/webroot/css/bge_style.css

  • 管理画面

    ①：/webroot/css/bge_style.css
    ②：/plugins/BurgerEditor/webroot/css/bge_style.css
    

• 4系
  • フロント・管理画面

    ①：/theme/BcThemeSample/css/bge_style.css
    ②：/css/bge_style.css

少し横道にそれますが、
baserCMSをインストールする時に選んだ「BcThemeSample」テーマを元にしてサイトを構築している時など、cssやjsなどそのまま活かしたりしている時は、「/bc_front/〜・・・」が先に読み込まれたりするので、テーマ内にcss/bge_style.cssを置いても反映されないじゃん！ってなったりします。
そんな時には関数リファレンスを見てみると良いかもしれません。

• baserCMS５系ガイド-CSSの呼び出し：
  https://baserproject.github.io/5/theme/reference/#CSSの呼び出し
• baserCMS４系ガイド - css、js、imgの読み込み優先順位例：
  https://wiki.basercms.net/ファイル読み込みの優先順位#css、js、imgの読み込み優先順位例
   

「BcThemeSample」は、しっかり作り込まれていて使いやすいサンプルテーマなので、「BcThemeSample」をベースに、デザインを当てていくのも良いと思います！

baserCMS、BurgerEditorプラグインそれぞれ、今後のアップデートによって今回ご紹介した内容に変動がある可能性がありますのでご注意ください。
baserCMSのベースである、CakePHP由来の読み込みの優先順位などは面白いので、ご自身でも試してみて「ほほーん」としてみてくださいね。

デザイン上・CSSの指定上、.bge-contentsの記述をどうしても無くしたい・・・！
そんな時は、BurgerEditorプラグイン内に用意されているsettingファイルで設定できます。

５系：plugins/BurgerEditor/config/setting_customize.php
４系：app/Plugin/BurgerEditor/Config/setting_customize.php

 1.「setting_customize.php.default」を「setting_customize.php」にリネーム
 2.上書きしたい項目をsetting.phpと同じ構造で指定し変更して設定を上書き

// 自動的に bge-contentsクラスを付与する
'autoWrapper' => true,    // ← autoWrapperをfalseに変える

このファイルでは、他にも「アップロード可能な最大サイズ」の指定や、「画像リサイズ時の圧縮レベル」の指定ができる項目など用意されています。
細かく設定が必要な時にはこのファイルをチェックすると良いかもしれません。

以上です。
かなり長文になりましたが、お読みいただきありがとうございました。

もし、baserCMSに関してわからないこと、質問や相談したい！って時は、baserCMSには、ユーザーズフォーラムという助け合いのサイトもありますので、そちらでもお気軽にご相談してみると良いと思います。私たちもヘビーユーザーです。笑
https://forum.basercms.net/