1. 背景

今回、導入した国産CMSのbaserCMSですがテーマのbc_sampleのスタイルの表のセルの余白が大きすぎて気になりました。

 

また、見出しの左余白の使い方もいま一つな気がします。

フォントも見出し3より見出し4のほうが大きい気がします。今回はこれらを修正してゆきます。

2. 対応方法

事前に現在サーバ側で適用しているbc_sample.zipをダウンロードしてください。
ダウンロードしたファイルの中にあるbc_sample/__assets/css/common/_editor.scssを修正しコンパイルします。
その後、再圧縮してサーバにbc_sample.zipを再適用します。この流れを具体的に説明します。

2.1 表のセルの余白(パディング)修正

_editor.scssの248行目付近を修正します。

修正前

th,
td {
    text-align: left;
    padding: 26px 24px;

修正後

th,
td {
    text-align: left;
    padding: 4px 2px;

2.2 見出し3のスタイル変更

_editor.scssの44行目付近を修正します。

修正前

padding: 13px 28px 12px;
font-size: 21px;
font-weight: 700;

修正後

padding: 7px 10px 6px;
font-size: 22px;
font-weight: bold;

2.3 見出し4のスタイル変更

_editor.scssの59行目付近を修正します。

修正前

padding-bottom: 12px;

修正後

padding-bottom: 6px;

3. 反映方法

1. scssをコンパイルしなおします
2. bc_sample/cssの中身が書き換わります。コンパイルで生成されたmapファイルをbc_sample/css/maps中に移動します
3. bc_sample/VERSION.txtの1行目のバーションを書き換えます
4. bc_sampleをzipで圧縮しbc_sample.zipを作成します
5. zip圧縮されたテーマを管理画面の「設定」⇒「テーマ管理」⇒「新規追加」で作成したテーマファイルをアップロードして適用します

4. 確認

サーバキャッシュをクリアした後。ブラウザ側でShift+F5で読み込みなおします。
表は以下のようになりました。

スタイルが適用され上下の無駄な余白がなくなっています。横幅が広がっているのはwidth=100%の指定に変更したからです。

見出しは以下のように表示されました。

見出し3の左側の余白が小さくなり、フォントが少し大きく太くなっています。逆に見出し4の文字から下線までのスペースは狭くなっています。

5. まとめ

スタイルのscssを書き換えてcssへとコンパイルすることで、無事にスタイルを反映させることができました。scssから変更する方法は色々と応用がききそうです。