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

公開日:2019年7月30日 カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

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

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

詳細な内容についてはこちら

そして、数日前に

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

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

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

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

  1. 以下のCSSをコピーしてください
  2. /********** 見出しタグ **********/
    h1, h2, h3, h4, h5, h6 {color:#fff;}
    /*ヘッダー*/
    header {border-bottom: solid 2px #000;background-color:rgba(0, 0, 0, 0.88);}
    /*********** ヘッダーナビ(スマホ・パソコン共通) ***********/
    /*スマホ用のメニューボタン*/
    #navbutton {border: solid 1px #aaa;background-color: #fff;}
    #navbutton:hover {background-color: #ddd;}
    #navbutton i {color: #333;}
    /*ヘッダーナビ*/
    .header-nav li a:before {color: #555;}
    .header-nav li{color: #eee;}
    /*ヘッダーナビ メディアクエリ PC閲覧時特有の設定*/
    @media screen and  (min-width: 768px) {
    	.header-nav {background: linear-gradient(#777, #000)!important;}
    	.header-nav li a {color:#eee;}
    	.header-nav li a:hover {background-color:#555;color:#fff;}
    /* サブメニューの設定 */
     	.sub-menu li a:before {color: #777;}
    .sub-menu li a {color: #fff;background-color: #777;}
    .sub-menu li a:hover {background-color: #000;}
    	#header-nav .sub-menu {border-top: 1px solid #eee;}
    }
    /*——フッター——*/
    footer {border-top: solid 2px #000;}
    footer {background-color: #000;}
    /*フッターメニュー*/
    .footer-nav li a {color: #fff;}
    /*コピーライト*/
    .copyright p {color: #fff;}
    .copyright p a{color: #fff;}
    /*——サイドバー——*/
    .sidebar-wrapper h4 {color: #000;background: linear-gradient(#fff, #000)!important;}
    .sidebar-wrapper {background-color: rgba(0, 0, 0, 0.88);border-radius:5px;}
    /*デフォルトウィジェット*/
    .widget_recent_entries a, .widget_meta a, .widget_recent_comments a, .widget_pages a, .widget_meta a, .widget_categories a, .widget_archive a, .widget_nav_menu a {color: #fff;}
    /*カテゴリウィジェット*/
    .widget_categories li {background-color: #000;}
    .widget_categories li:before {color: #fff;}
    .widget_categories li a {color: #fff;}
    /*タグウィジェット*/
    .tagcloud a {color: #333;border: 1px solid #fff;}
    /*新着ウィジェット*/
    .widget_recent_entries li:before {color: #fff;}
    /*メニューウィジェット*/
    .widget_nav_menu li:before {color: #fff;}
    /*ループのCSS*/
    .kiji-list {border: solid 1px #ddd;background-color: #fff;}
    .kiji-list a {color: #000;}
    .kiji-list a:hover {background-color: #555;}
    .kiji-date {color: #eee;}
    .cat-data {color: #fff;background-color: #464646;}
    /*ページネーション*/
    .pagination li a, .pagination li > span {color: #eee;border: solid 1px #ccc;}
    .pagination li > span {color: #fff;background-color: #464646;}
    .pagination li a:hover {color: #fff;background-color: #464646;}
    .pagination li .dots {color: #eee;background-color: transparent;}
    /*記事のCSS*/
    .kiji-info .cat-data a {color: #fff;}
    /*タグ*/
    .kiji-tag li {color: #eee;}
    .kiji-tag li a {color: #fff;border: solid 1px #eee;}
    .kiji h2 {border-bottom: solid 5px #fff;}
    .kiji h3 {border-left: solid 5px #eee;}
    /*************** ホーム・トップへ戻るボタン ***************/
    .home-mark{color:#000;}
    /* 右にページトップへのボタン */
    .back{background-color:#eee;}
    /* 右にホームへのボタン */
    .backhome{background-color:#eee;}
    /**************************************** 関連記事(Relation)*****************************************/
    .related-entry-title a{	color:#fff;}
    .related-entry-title a:hover{color:#555;}
    #related-entries .related-entry {border: 1px solid #fff;}
    /********** 人気記事ウィジェット **********/
    .sidekiji li {border-bottom: dotted 1px #ddd;}
    .sidekiji a {color: #fff;}
    .sidekiji a:hover {background-color: #eee;}
    .rank-count {color: #fff;background: rgba(66, 66, 66, .85);}
    .r-count1 {background: rgba(189, 161, 82, .9);}
    .r-count2 {background: rgba(152, 153, 173, .9);}
    .r-count3 {background: rgba(156, 85, 34, .9);}
    /************* シェアボタン ***************/
    .share li a {color: #fff;}
    .share li a:visited {color: #fff;}
    .tweet a {background: #00acee;box-shadow: 0 5px 0 #0092ca;}
    .facebook a {background: #3b5998;box-shadow: 0 5px 0 #2c4373;}
    .hatena a {background: #5d8ac1;box-shadow: 0 5px 0 #43638b;}
    .line-sns a {background: #25af00;box-shadow: 0 5px 0 #219900;}
    .pocket a {background: #f03e51;box-shadow: 0 5px 0 #c0392b;}
    /********** フォントと文字サイズ(最下部にあったほうがいいのかも) **********/
    body {color:#fff;}
    /********** Content Cardsプラグインのパソコン用表示 **********/
    @media screen and (min-width: 768px) {
    	.content_cards_card {background-color: white;border: 1px solid;border-color: #e9eaed #dadada #ccc;}
    	.content_cards_card .content_cards_title {color: #141412;}
    	.content_cards_card .content_cards_description {color: #141412;}
    	.content_cards_card .content_cards_site_name {color: #9197a3;}
    }
    /******* 2列表示用のCSS [myphp file='テーマの中のファイル名']で挿入する *******/
    .entry-content {background-color: #eee;padding: 5px;margin-bottom: 5px;}
    .entry img {border: solid 1px #000;}
    .entry .text {color: #000;}
    /*タイトル*/
    .entry h2 {color: #000;text-decoration:none;}
    /*抜粋文*/
    #entry-list .excerpt {color: #000;text-decoration:none;}
    .entry-content .kiji-date {color: #000;}
    /********** 引用タグ **********/
    blockquote {color: #464646;background: #f5f5f5;}
    blockquote:before{color: #FFF;}
    blockquote:after{border-left: 19px solid #ff785b;border-right: 19px solid #ff785b;}
    blockquote cite {color: #888888;}
    #breadcrumb li a {color: #333;}
    /***** 追加したもの *****/
    .contents {background-color: rgba(0, 0, 0, 0.88);;color: #fff;border-radius: 10px;}
    .contents a {color: #eee;}
    #sidebar {background-color: rgba(0, 0, 0, 0);;color: #fff;border-radius: 10px;}
    #sidebar a {color: #fff;}
    .site-title h1 a {color:#fff;}
    .site-title h1 a:hover {opacity: 0.8;}
    .site-title a {color:#fff;}
    .site-title a:hover {opacity: 0.8;}
    .kiji-list {margin: 8px;border-radius: 5px;border:1px solid #eee;background-color:#000;}
    #breadcrumb li a {color: #f5f5f5;}
    #breadcrumb li a:hover {opacity: 0.8;}
    body {color: #fff;background-color: #000;}
    .sidekiji a:hover{background-color:#777;}
    /* 囲みコンテンツグリーン */
    .bb-green {background: #c3ffc3;color: #333;}
    .bb-green a{color:#000;}
    .bb-red {color: #000;}
    .bb-red a{color:#000;}
    .bb-blue {color: #000;}
    .bb-blue a{color:#000;}
    .bb-yellow {color: #000;}
    .bb-yellow a{color:#000;}
    /* 囲みリストの文字色 */
    .list-box ul>li {color: #000;}
    .list-box li a {color: #000;}
    /*********** コメント欄の文字色 ************/
    #comments{color: #333;}
    #comments a{color: #333;}
    
  3. サイトの管理画面から「外観」→「テーマ編集」を選択してください
  4. 「a-color-style.css」を開き、コピーしたソースを上書きしてください。

これで簡単に上のリンク先サイトのようなダークな色味のサイトができます。あとは好みに合わせて調整してくださいね。

※元の色に戻せるように上書き前の「a-color-style.css」はバックアップを取っておくことをお勧めします。

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

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

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


【スポンサーリンク】


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

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

関連情報