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

この記事は約5分で読めます。

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: "メイリオ", "MS Pゴシック", sans-serif; 
}

を

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

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

濃くなりました。

これで色については修正が終わりました。

ロゴを入れ替える

デフォルトだと baserCMSのロゴ が入っているところに、自分のサイトのロゴを入れたいと思います。

このロゴは app\webroot\theme\nada-icons_RYUS\img の logo.png です。大きさは 214×54ピクセル なので縦を54ピクセルの画像を作りました。

logo

これを app\webroot\theme\nada-icons_RYUS\img に logo.png として保存します。

読み直すと、

このように、だいぶ自分のサイトっぽくなってきました(^^)/

と、ここまで書いて衝撃の事実 もっと簡単に指定できそうでした

ここまでで本当はblogが終わっていたのですが、書いた後に別の事をしていて発見してしまいました。

テーマ管理 > テーマ設定

をクリックすると、

じゃーん、、なんということでしょう?ここまで書いたことが全部この画面からできる…ようです(^_^;。

試しにすぐ分かるようメインのテーマカラーを 赤 #f00 にしてみます。

簡単に…変わりました(^_^;。

ロゴもここからアップできそうですし、リンクの色もここから指定できそうです…。

ももも、もしかすると他のなにかできないことがあるかもしれませんがそういうところは上の記事を見ていただいて、ということで。

baserCMSは色やロゴを変えるのもとっても簡単でした!<という結論。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

全般 テーマ baserCMS
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。