baserCMSでテーマをコピーして色やロゴを変更するカスタマイズ

2015年4月7日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

baserCMSでサイトを構築中です。今回はテーマをコピーして色やロゴを変更するカスタマイズについて書きます。

記事をざっと見る

nada_iconsをコピーする

テーマをカスタマイズする前にnada_iconsをコピーしてオリジナルのテーマにしようと思います。

テーマ管理 をクリック

現在のテーマがnada_iconsなので、そのテーマの下にある　コピー　ボタンをクリック

このように、nada icons ( nada-icons_copy )　というテーマができました。

編集　をクリックして、

テーマ名を

変更して、

保存　をクリック。

適用をクリックして、このテーマを使うようにします。

この　nada_icons_RYUS　をカスタマイズしていきます。

色の変更

baserCMSというと

このきれいなグリーンが特徴的です。このグリーンの部分を今回は青系の色に置き換えてみたいと思います。

app\webroot\theme\nada-icons_ryus\css\style.css

を開きます。このグリーンに該当する部分は、　#6DAE0F　という色コードのようです。これを置き換えたい色、#4682B4 (ちょっと紺色っぽい青)　に全置換して保存します。

表示してみると、緑色の部分が青系の色に置き換わりました。

リンクしている文字の上にマウスを載せると、

と、今まで緑だったためにその薄い色が表示されます。ここも薄い青色に置き換えたいと思います。

a:hover {/*マウスをのせたとき*/
    color:#BAD98E;
    text-decoration:underline;
}

となっていたところを

a:hover {/*マウスをのせたとき*/
    color:#8b9fdc;
    text-decoration:underline;
}

このように変更します。

また、リンクしているときの文字の色は線の色やタイトルのバックカラーと同じ色のようなのですが、文字とするとちょっとくすんだ感じになっているので明るめの青に変更します。

a{/*リンクされた文字*/
    color:#4682B4;
    font-style:normal;
    text-decoration:underline;
}
a:link {/*未訪問のリンク*/
    color:#4682B4;
    font-style:normal;
    text-decoration:none;
}
a:visited {/*訪問後のリンク*/
    color:#4682B4;
    text-decoration:none;
}

となっているところの　#4682B4　を　#1e90ff　にしてみます。

a{/*リンクされた文字*/
    color:#1e90ff;
    font-style:normal;
    text-decoration:underline;
}
a:link {/*未訪問のリンク*/
    color:#1e90ff;
    font-style:normal;
    text-decoration:none;
}
a:visited {/*訪問後のリンク*/
    color:#1e90ff;
    text-decoration:none;
}

これで表示してみると

リンクしている文字の色が明るめになって、マウスを載せたときの色が薄い青色になりました。

あとは

本文の文字色が私のように老眼入って来た人にはちょっと薄めな感じがするので、

body {
    margin:0;
    padding:0;
    color: #666666;
    background:url(../img/icons_bg.png);
    font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; 
}

を

body {
    margin:0;
    padding:0;
    color: #333333;
    background:url(../img/icons_bg.png);
    font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; 
}

のようにちょっと濃くしてみます。わずかですが、