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

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

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

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

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

そして、数日前にOrdinary Lifeという私の管理している別のサイトで【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ですので、適用後に表示を確認しながらさらにカスタマイズしてください。

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

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球