背景色をすべて1色に統一、文字の色をすべて1色に統一する方法はないでしょうか？

このトピックには10件の返信、2人の参加者があり、最後にhnにより7年、 3ヶ月前に更新されました。

10件の返信スレッドを表示中

投稿者

投稿
- 2017年1月8日 10:09 PM #49328 返信
  hn
  ゲスト
  初めまして、いつもお世話になっております。
  初心者で申し訳ありませんが、いつもsimplicity2を使わせていただいております。
  何度検索しても、いろいろ調整してもどうしても上手くいかないので質問させていただきます。
  ダッシュボードから外観＞背景＞色で設定させていただいたのですが、全部の色を変えれませんでした。
  そのため、simplicity2の子テーマをダウンロードさせていただき、そのスタイルシートに書き込んでおりますが、上手く反映しません。
  背景色をすべて#000000
  文字の色もすべて#eded00
  上記1色に統一したいのですが、子テーマのスタイルシートに下記のように記載しましたが、ウィジェットやタイトル等の色が変わってくれません。
  何が間違っているのでしょうか。
  お忙しいところお手数ですが、お手すきの時に教えていただけないでしょうか。
  よろしくお願いいたします。
  子テーマのスタイルシートに記載したのは下記のコードです。初心者すぎてわかっていないところも多々あり申し訳ありません。
```
#header {
	background: #000000;
	color: #eded00;
}
body {/* 背景色 */
	background: #000000;
	color: #eded00;
}
html {
	background: #000000;
	color: #eded00;
}
#contents #main {
	background: #000000;
	color: #eded00;
}
#sub {
background: #000000;
	color: #eded00;
}
#footer {
background: #000000;
	color: #eded00;	
}
#page {　/* サイトコンテンツ */
	background: #000000;
	color: #eded00;
}
.entry-title {
    background: #000000;
	color: #eded00;
 }

.singular .entry-title {
 background: #000000;
	color: #eded00;
     }
.entry-title a:link,
.entry-title a:visited {
	background: #000000;
	color: #eded00;

}
/* ナビメニュー */
.main-navigation li a {
color: #eded00; /* 文字色（黄） */
background: #000000;
}
```
- 2017年1月8日 11:20 PM #49329 返信
  Hidekichi
  ゲスト
  おそらく考え方が逆です。
  要素に色を追加・設定したりしていくよりも、ベースを決めたら、それ以外の色が適用されている所から色を取ればよいのです。あるいは継承します。
  
  例えばカスタマイザーを使うと色々と面倒くさいので、子テーマstyle.cssに書きます。
```
body {
  background-color: #111;
  color: #eded00;
}
```
  これがベースになります。#mainには背景色が設定されているので、
```
#main {
    background-color: inherit;
}
```
  あるいはbackground-color: transparent、もしくは、background-color: initial
  
  こんな感じで変更していきます。もしリンクも文字色と同じにするなら、
```
a {
  color: inherit;
}
```
  aは他にも、a:link等の書き方もありますが、上記のような感じでもいけます。
  
  サイドバーの人気記事とかそこらは上記だとリンクカラーがダークな色で設定されているので何もないように見えていますが、
```
.widget_new_entries a {
    color: inherit;
}
```
  こんな感じでも行けると思います。先程から出ているinheritは継承です。親要素から色を継承します。継承できないようならダイレクトに色を指定すればよいかと思います。あるいはcolor: initialなどで色を取ります。
  
  cssは親テーマに内容が書かれていて、それを子テーマで上書きすることで変更できます。つまり、
  親テーマのstyle.css等を読み込んでその後で子テーマのstyle.cssを読み込むことで、
```
.test {
  color: red; /* 親テーマのスタイル */
}
.test {
  color: blue; /* 子テーマのスタイル */
}
```
  このようなことと同じ意味があります。カスタマイザーを使うと、
```
.test {
  color: red; /* 親テーマのスタイル */
}
.test {
  color: blue; /* 子テーマのスタイル */
}
.test {
  color: green; /* カスタマイザーのスタイル */
}
```
  となってしまうため、カスタマイザーで全部設定しないといけなくなってしまいます。色々な意味でスタイル部分はカスタマイザーを使わず子テーマstyle.cssを利用するのが一番良いです。
  
  また、#000は完全な黒なので、デザインの世界ではほとんど使わない色です。#111か、それらに青を足したり他の色を足したりしてできるだけ黒に近づけて、いわゆる墨はできるだけ使わないようにします。昔から言われているのは、自然界にそんな色(墨(黒))は無いからということです。
  もちろん墨(黒)は色としてはありますが、影にしてもそれは黒ではなく黒に近い青だったりするわけですよ。また他の色に比べて圧倒的に強い色なので、そういう理由からなるべく避けるべき色なのです。
  まぁ別に使っても良いんですけどね(笑)
  
  更に、いきなり#000なり、#111等の色を設定すると、#333等の文字色と重なって設定しないといけない部分を見逃してしまうかも知れないので、ビンクとかありえないような色を背景に設定して、全体を見ながら設定して、最終的にピンク部分を#111等に変更するという手法が良いかと思います。
  
  そもそもbody以外にカラーが設定していなければ表示されるのはbodyの色のみです。bodyに設定してそれでも他の色がどこかに出てくるということは、その要素に色がつけられているわけですから、それを取り除いていくという考え方が良いということです。
- 2017年1月9日 1:10 PM #49343 返信
  hn
  ゲスト
  お忙しい中、早急な回答ありがとうございます。
  早速試してみたのですが、初心者のため知識が足りな過ぎて上手くいきません。
  もう少々お時間いただけないでしょうか。
  教えていただいたやり方で、全体の背景色とウィジェット内のリンク先は変更できました。ありがとうございます。
  下記のも色も統一したいのですが、スタイルシートに色を取り除く設定をしても変化がありませんでした。
  
  タイトルの文字とサブタイトルの文字
  ウィジェットのタイトル文字
  フッターの背景と文字の色
  ナビゲーションの背景と文字の色
  トップ画面にでる記事一覧のタイトルの色と本文の色
  記事内のタイトル
  更新履歴
  タグ
  「関連記事」自体の文字の色
  
  上記の色も統一しようと、教えていただいた色を取り除く設定をしてみましたが、上手く反映してくれません。
  子テーマのスタイルシートに丸ごと親のスタイルシートをコピーして、それぞれの場所を探した方が良いのでしょうか？
  
  下記のように子テーマのスタイルシートにそのまま記載しましたが、不足がどこなのかが分かりませんでした。
  
  何度も申し訳ございません。
```
body {
  background-color: #111;
  color: #eded00;
}

#main {
    background-color: inherit;
}

a {
  color: inherit;
}

.widget_new_entries a {
   color: inherit;}

.footer {
  background-color: initial;
　color: initial; 
 }

.header {
 background-color: initial;
 color: initial; 
 }

.entry-title {
 background-color: initial;
 color: initial; 
 }

.entry-title a:link,
 .entry-title a:visited {
 background-color: initial;
 color: initial; 
 }

.main-navigation li a {
 background-color: initial;
 color: initial; 
  }
```
- 2017年1月9日 3:04 PM #49349 返信
  hn
  ゲスト
  連続投稿で申し訳ありません。
  教えていただいたcolor: initialを使用しましてある程度上手くいきました。
  親のスタイルシートを子テーマに全部コピーしまして、
```
/************************************
** 基本設定（General Setting）
************************************/
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #111;
  color: #eded00;
}

/************************************
** 見出し（H1-6）
************************************/
h1, h2, h3, h4, h5, h6{
  color:inherit;
}
```
  colorとbackground-colorを検索し、color: inheritとbackground-color: inheritに変更したところ、2カ所以外すべて思い通りの色にできました。
  
  ありがとうございます。
  ただ、どうしても2カ所だけ変わりませんので再度質問させていただけないでしょうか。
  ブログのトップ画面に行きますと、初期表示される最新投稿記事のエントリーカード？
  この記事の枠で囲まれた部分のタイトルの色と本文の最初が表示されていると思うのですが、そこの色はスタイルシートから変えるのではないのでしょうか？
- 2017年1月9日 3:38 PM #49354 返信
  
  hn
  ゲスト
  
  何度も連続投稿すいません。
  https://wp-simplicity.com/suport/topic/%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC%E3%82%AB%E3%83%BC%E3%83%89%E5%85%A8%E4%BD%93%E3%82%92%E3%83%AA%E3%83%B3%E3%82%AF%E5%8C%96%E3%81%97%E3%81%9F%E6%99%82%E3%81%AE%EF%BD%81%E3%82%BF%E3%82%B0/
  
  こちらの説明にエントリーカードの色の変え方を見つけました。
  ありがとうございます。
  お手数をおかけいたしまして申し訳ありません。
- 2017年1月9日 3:42 PM #49355 返信
  
  わいひら
  キーマスター
  
  できれば、サイトのURLを提示していただけると、デベロッパーツールやソースコードから調べることができるので助かります。
  
  また、ソースコードの貼り方の案内は以下にあるので、ソースコードを貼り付ける場合は、以下の方法を行っていただけると助かります。
  https://wp-simplicity.com/suport/topic/first-time/
- 2017年1月9日 3:43 PM #49356 返信
  
  わいひら
  キーマスター
  
  あら、投稿がかぶりました。
  うまくいったのならよかったです。
- 2017年1月9日 3:59 PM #49362 返信
  
  hn
  ゲスト
  
  申し訳ありません。
  やり方の記載がありましたので、やってみたのですが駄目でした。
  アドレスは下記のとおりです。
  http://keibaburogu.com/
  
  トップ画面の記事リストのエントリーカード内？のタイトルとリンクの色と本文の色が他の色と同じにできません。
  本当にお手数を何度もおかけして申し訳ありませんが、トップ画面からこのカード内のタイトルと本文とリンクの色を変更する方法を教えていただけないでしょうか。
- 2017年1月9日 6:14 PM #49382 返信
  Hidekichi
  ゲスト
```
.entry h2 {
    margin-bottom: 5px;
    margin-top: 0;
    color: 設定する色;
}

.entry h2 a {
  color: inherit;
}

.entry-snippet {
  color: inherit;
}
```
  でいけるかと。h2は、オープンで(それ単体で)色設定がしてあるため、一旦.entry h2で目的の色を設定します。その後その中にあるaにその色を継承するということです。
  
  まぁずっと親要素を辿ってinheritしてもよいですが面倒くさいのと、あとで何かしらの色に.entry h2を変えたい時は、.entry h2 aはそのままに、.entry h2の色を変えればよいだけなので。
  
  ここらもわいひらさんが投稿する前ぐらいに、やり方やその他諸々だいぶ長文で書いてましたが、解決したと思ったのと、アクセスエラーがでたので消してしまいました(笑)
  
  initialは初期化なので、プロパティを初期化して色を無くせば、それ以前に継承している内容が表示されます。つまり、
```
h2 {
  color: #333;
}
```
  が.entry h2に継承されていたというわけです。なので、ここでinheritを使ってもh2を継承するだけで色は変わりません。よって、新規の値を.entry h2に入れて、その値を.entry h2 aで継承するということですね。
- 2017年1月9日 6:32 PM #49383 返信
  Hidekichi
  ゲスト
```
.entry .post-meta a {
  color: inherit;
}
```
  .post-metaは.entryのcolorをinheritで継承されているようなので、Simplicityの設定では、.entry .post-meta aに色設定がしてあるため、.post-meta内の文字色が継承されているようなら、aも継承すればいけるはずです。
  
  一旦全体的にできたら、デザイン案として、全てのリンク文字色が同じであるとわかりにくいというのもあるため、例えば、リンクの色を#eded00より少しオレンジ気味にしたり、同系色でほんの少し変えるとメリハリが効くのではなかろうかと。
```
a {
    color: #e5c339;
}
```
  とか。rgbaで半透明にすることで同じ色でもやや暗みがかった色(背景色が透ける)にすることもできます。
  
  rgbaだと、#eded00 = rgba(237,237,0,1)、でaの部分、つまり1を0.6とか何か良い感じの透明度にします。こういうのはカラーピッカーでいじって調べるのが一番良いですね。デベロッパーツールでできますし、専用のサイトで調べても良いです。
- 2017年1月9日 7:35 PM #49385 返信
  
  hn
  ゲスト
  
  何度もお忙しい中ありがとうございます！！
  ほぼ変えたい色に変更できました。
  微調整は調べるようにいたします。
  お時間いただきまして誠にありがとうございます。
  厚くお礼申し上げます。
投稿者

投稿