baserCMS config.cssのカラー設定をrgb/ rgba()で運用してみる

2024/02/20 web

baserCMSは、テーマ管理メニューのテーマ設定で、テーマのベースカラーやテキストリンクなどのカラー設定ができるようにあらかじめUIが用意されていますが、入力する値は、hex（16進数）値です。
通常は、hex（16進数）値で全く問題ないのですが、設定したい背景色を透明度調整したい場合、hex（16進数）値では対応できません。
しかし、例えばbodyタグを赤色（#FF0000）を基調に70%不透明度の背景色に設定したい場合など、rgba()関数を使って

body {
    background: rgba(255, 0, 0, 0.7);   
}

とすれば設定は可能です。
つまり、テーマ管理メニューのテーマ設定に入力されたhex（16進数）値の色を24bitでconfig.cssに出力して、rgb/ rgba()関数などを使った柔軟な色指定ができるようにしてみようという目論見です。

画像の説明

テーマ管理メニューのテーマ設定では、メインカラー、サブカラー、テキストリンクカラー、テキストホバーカラーの4種類が設定可能です。
テーマカラーを設定した場合、利用するテーマ内のレイアウトファイル内に記述された $this->BcBaser->script() 関数の場所に /files/theme_configs/config.css のリンクタグとして書き出されます。この機能は、テーマ内にCSS設定を上書きするための設定元となるconfig.cssファイルを /theme/利用するテーマ/css/config.css に配置している必要があります。
config.cssファイルには、カラー設定を反映させたい要素とそのプロパティに MAIN SUB LINK HOVER の文字列を埋め込みます。

今回の目論見では、 MAIN SUB LINK HOVER の文字列に反映される値は、24bitのカラー値ですので、/theme/利用するテーマ/css/config.css は、例えばこんな感じに記述します。

@charset "utf-8";

.main-color {
    background: rgba(MAIN, .7) !important;
}
.sub-color {
    background: rgba(SUB, .7) !important;
}
a {
    color: rgb(LINK);
}
a:link {
    color: rgb(LINK);
}
a:visited {
    color: rgb(LINK);
}
a:hover {
    color: rgb(HOVER);
}
a:active {
    color: rgb(HOVER);
}

.btn {
    background-color: rgb(MAIN) !important;
}
.side h2 {
    background: rgb(MAIN) !important;
}

#GrobalNavi ul.dropdown-list li {
    background: rgba(MAIN, .7) !important;
}

さて、肝心のテーマ設定に入力されたhex（16進数）値を24bitでconfig.cssに出力させるためには、ThemeConfig.php ファイルを変更することになります。

手順としては、

lib/Baser/Model/ThemeConfig.php ファイルをapp/Model/ThemeConfig.php に配置（コピー）します。
その上で、app/Model/ThemeConfig.php ファイル内の「テーマカラー設定を保存する」ための public function updateColorConfig() のコード（27行目から32行目）を以下のように変更します。

    /**
     * テーマカラー設定を保存する
     *
     * @param array $data
     * @return boolean
     */
    public function updateColorConfig($data)
    {

        $configPath = getViewPath() . 'css' . DS . 'config.css';
        if (!file_exists($configPath)) {
            return false;
        }
        $File = new File($configPath);
        $config = $File->read();
        $settings = [
            'MAIN' => 'color_main',
            'SUB' => 'color_sub',
            'LINK' => 'color_link',
            'HOVER' => 'color_hover'
        ];
        $settingExists = false;
        foreach($settings as $key => $setting) {
            if (empty($data['ThemeConfig'][$setting])) {
                $config = preg_replace("/\n.+?" . $key . ".+?\n/", "\n", $config);
            } else {
                $code_hex = $data['ThemeConfig'][$setting]; //hexをrgbに変更するため
                $code_red = hexdec(substr($code_hex, 0, 2));
                $code_green = hexdec(substr($code_hex, 2, 2));
                $code_blue = hexdec(substr($code_hex, 4, 2));
                $code_rgb = $code_red . ', ' . $code_green . ', ' . $code_blue;
                $config = str_replace($key, $code_rgb, $config);
                $settingExists = true;
            }
        }
        $File = new File(WWW_ROOT . 'files' . DS . 'theme_configs' . DS . 'config.css', true, 0666);
        $File->write($config);
        $File->close();
        if (!$settingExists) {
            unlink($configPath);
        }
        return true;
    }

以上で、テーマ管理メニューのテーマ設定に入力されたhex（16進数）値が、24bit（rgb/ rgba()関数利用を前提とした）カラー値でconfig.cssに出力されるようになります。

ただ、この場合、これまでのいくつかの記事で注意喚起してきたように app/Model/ThemeConfig.php が、コアファイルのアップデートに取り残される可能性が生じるのですが、現時点で4系はすでにメンテナンスフェーズですので、ThemeConfigについての新たな改修や機能追加はおそらく無いでしょうからひとまず問題はないかと。元のhex（16進数）値の出力に戻したい場合は、app/Model/ThemeConfig.php ファイルを削除して、/theme/利用するテーマ/css/config.css のrgb/ rgba()関数の記述を元に戻すだけです。

baserCMS config.cssのカラー設定をrgb/ rgba()で運用してみる

コメント

Related posts