[Ha-Basic] Color CSS that makes the theme site green

【ha-Basic】テーマを使ったサイトをグリーン系にするカラーCSS

公開日: カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

テーマカスタマイザーがない=色の調整はすべてCSSからとしている【ha-Basic】。

管理画面でのカラー変更はできないようにしているものの、テーマファイルの中に「a-color-style.css」というのを設け、そこにデフォルト設定で色を指定している部分のCSSソースのみを列記し、このファイルの中を変更すればサイトの色味を変えられるようにしています。

【ha-Basic】テーマの詳細な内容についてはこちら

 Knowledge Base
Knowledge Base
https://www.momosiri.info/ha-basic/
Wordpressの使い方/サイト作り/パソコン/動物/植物などのいろいろな知識や生活の知恵などを気ままに綴ったサイト

そして、数日前に

という私の管理している別のサイトで【ha-Basic】を導入した際にグリーン系のCSSを作りました(どんな色合いかはサイトを見ていただければわかります)。

せっかく作ったので、前述した「a-color-style.css」へそのまま上書きすればグリーン系のサイトにできるCSSソースを公開します。

色の変更って結構大変ですから役に立つかと思います。

【ha-Basic】テーマを使ったサイトをグリーン系にするカラーCSSの適用方法

以下のコードをテーマの「a-insert-color.css」へ上書きし、保存します。

/*ヘッダー*/
header {border-bottom: solid 1px #03220f;}
/*ヘッダーナビ メディアクエリ PC閲覧時特有の設定*/
@media screen and  (min-width: 768px) {
	.header-nav {background: linear-gradient(#07a243,#03220f)!important;}
	.header-nav li a {color:#fff;}
	.header-nav li a:hover {background-color:#03220f;color:#fff;}
/* サブメニューの設定 */
 	.sub-menu li a:before {color: #03220f;}
	.sub-menu li a {color: #fff;background-color: #03220f;}
	.sub-menu li a:hover {background-color: #000;}
	#header-nav .sub-menu {border-top: 1px solid #07a243;}
}
/*——フッター——*/
	footer {border-top: solid 1px #07a243;}
	footer {background-color: #03220f;}
/*——サイドバー——*/
.sidebar-wrapper h4 {color: #fff;background: linear-gradient(#07a243,#03220f)!important;}
/*カテゴリウィジェット*/
.widget_categories li {background-color: #03220f;}
.widget_categories li:before {color: #fff;}
.widget_categories li a {color: #fff;}
/*タグウィジェット*/
.tagcloud a {color: #333;border: 1px solid #03220f;}
/*新着ウィジェット*/
.widget_recent_entries li:before {color: #464646;}
/*メニューウィジェット*/
.widget_nav_menu li:before {color: #464646;}
/*ループのCSS*/
.kiji-list {border: solid 1px #03220f;background-color: #fff;}
.cat-data {color: #fff;background-color: #03220f;}
/*記事のCSS*/
.kiji-tag li a {color: #464646;border: solid 1px #03220f;}
.kiji h2 {border-bottom: solid 5px #03220f;}
.kiji h3 {border-left: solid 5px #03220f;}
/*************** ホーム・トップへ戻るボタン ***************/
/* 右にページトップへのボタン */
.back{background-color:#03220f;}
/* 右にホームへのボタン */
.backhome{	background-color:#03220f;}
/*関連記事(Relation*/
#related-entries .related-entry {border: 1px solid #03220f;}
/*************** コピーライト表示のリンク文字色 ***************/
.copyright a {color: #fff;}

※大まかな部分のみのカラーCSSですので、適用後に表示を確認しながらさらにカスタマイズしてください。

※適用後デザインが変わらない場合にはブラウザのキャッシュをクリアしてください

キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報