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

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 (ちょっと紺色っぽい青) に全置換して保存します。

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

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

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

このように変更します。

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

これで表示してみると

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

あとは

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

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

濃くなりました。

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

ロゴを入れ替える

デフォルトだと 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に書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る