Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 記事の色を変えたいのですが・・・・
- このトピックには16件の返信、1人の参加者があり、最後にkokoroにより8年、 1ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年11月26日 4:43 PM #47953kokoroゲスト
トップページに出る記事の背景の色を半透明にしたいのですがどうすればいいですか?
また記事ページもトップページと同じようにしたいのです。何度もすいません・・・。
-
2016年11月26日 5:16 PM #47957みきゲスト
どの部分かが具体的にわからないので
詳しくはお答えできませんが
大体こんな感じです#ID名 { opacity: 0.5; }
ID名のところは変えてください
-
2016年11月26日 5:26 PM #47958みきゲスト
記事部分だとmainです
(IDが)
なので#main { opacity: 0.5; }
透明度を変えたい場合は
#main { opacity: 0.5;//ここを変更 0.6とか }
色を変える場合は
#main { background-color: #ffffff;//ここを変更 opacity: 0.5; }
反映されない場合はブラウザのキャッシュを削除するか
シークレットモードみたいなやつで確認してください思っていたのと違う場合は
詳しく教えてください -
2016年11月26日 6:19 PM #47959kokoroゲスト
みき様
ありがとうございます。
それは子テーマのスタイルシートに追記すればよいのでしょうか?
または、子テーマのCSSから該当部分を探して変更すればよいのでしょうか? -
2016年11月26日 6:29 PM #47962みきゲスト
すみません
子テーマのstyle.cssに追加です -
2016年11月26日 9:29 PM #47969Hidekichiゲスト
opacityだと全体的に半透明になってしまいませんかね?
色だけなら、rgbaとか、hslaなどの方が良いかも。#main { background-color: rgba(r,g,b,a); }
r,g,b は red,green,blueで0〜255までの数値
aは透明度で0〜1までの数値(0が透明1が非透明)rgba(255,255,255,1) = #ffffff
rgba(255,255,255,0.5) = #ffffffの50%の透過
rgba(0,0,0,1) = #000000255 = 16進数のff
h,s,l はhue(色相),saturation(彩度),lightness/luminance(輝度)
aは透明度で0〜1までの数値(0が透明1が非透明)hue = 0 = 赤、180 = 青の用に、色相環と言われる色のサークルに対してどの位置にある色かを指定
saturation は hueのどの濃さ(鮮やかさ)を指定
lightness は指定した色の明るさを指定。輝度0度は黒、輝度100%は白。50%の位置が純色。少しややこしいけれども50%以下は明度、50%以上は彩度とするとなんとなしにイメージしやすいhsl(0,100%,50%) = 赤
hsl(0,100%,0%) = 黒
hsl(0,100%,100%) = 白
hsla(0,100%,50%,0.5) = 赤の50%の透明(ピンクっぽくなる)
hsla(0,100%,80%,1) ぐらいにすると同じようなピンクだが非透過なのでここらで使い分ける何を使うにしても最初は基準となる色を探り探りで数値を入れていく必要があるので、color picker等を利用してどれぐらいでどういう色かを覚えていく必要があるかと思います。
色見本のサイトなどでジェネレーター(相互変換や、ずはりそのものをグラフィカルに選べたり)とかがあるサイトもあるのでそういうのを利用すると良いだろうと思います。 -
2016年11月26日 9:32 PM #47970みきゲスト
あ~確かにそうですね
Hidekichiさんのやつのほうが良いかも
(#47969) -
2016年11月27日 10:15 PM #48003kokoroゲスト
ご返答ありがとうございました。
あれからこちらで記入してみましたが透明になりません・・・。http://usayami.com/wp/wp-content/uploads/2016/11/14437.jpg
この画像の記事部分を透明にしたいのですが・・。
申し訳ございません。 -
2016年11月27日 10:22 PM #48006みきゲスト
リスト部分だと
#list { opacity: 0.5; }
これでいけると思いますが・・・
-
2016年11月27日 11:30 PM #48020Hidekichiゲスト
サンプル: #mainの背景色を半透明にする | codepen
こういうことなんだろうと思うんですけども。
cssはscssで書いてあるので、css欄の下向き三角からview compiledからcssに変更したものを子テーマstyle.cssに追記します。サンプルでは、
#main { background-color: rgba(255, 255, 255, 0.5); }
こうです。
rgbそれぞれが255でmaxの値なので、これはつまりは#ffffffの0.5(50%)の表示になります。 -
2016年11月28日 9:11 AM #48026kokoroゲスト
みき様。Hidekichi様。
ありがとうございました!!今確認したところ、無事透明になりました!!
本当にありがとうございます。またお世話になるかと思いますが、よろしくお願いいたします。
-
2016年11月28日 9:16 AM #48027kokoroゲスト
申し訳ございません・・。
あとおひとつお聞きしたいのですがサイトタイトルとサイトキャッチフレーズを消したいのですが
CSSで非表示にする方法はありますでしょうか? -
2016年11月28日 10:02 AM #48028kokoroゲスト
何度もすいません。
記事内も文字色を変えたいときは
bodyと書いて色コードを指定すればよいですか? -
2016年11月28日 10:38 AM #48029kokoroゲスト
.entry-snippet {
margin: 0 0 5px 0;
line-height: 150%;
color: ##fcc9ff;これではだめなのでしょうか?
トップページから見て、記事タイトル部分と記事の抜粋部分の色を変更したいのですが・・。
お忙しいかと思いますがご教授お願いいたします。 -
2016年11月28日 11:11 AM #48030Hidekichiゲスト
cssはセレクタがわかる必要があります。
firefox、chrome等で該当箇所を右クリックし、要素を調査(検証)で、デベロッパーツールを開き、セレクタを調べたり、一時的に変更して効果を確かめます。F12から、あるいはメニューからも開けます。
サイトタイトルの場合、上記の要領で調べたら#site-titleであるのがわかるでしょう。
#site-title, #site-description { display: none; }
とすれば非表示になりますが、見えてほしくないだけでそこに存在するようにするには、
#site-title, #site-description { visibility: hidden; }
などとする必要があります。レイアウトが崩れてしまったり諸々の条件ではこちらのほうが良い場合もあります。非表示にして影響がない場合はdisplay: none;です。
同様に文字色を変えるという場合、どこの?というのが必要になります。
bodyというのは、htmlタグに次ぐ元になる要素(この中に他の要素を入れていく器)なのでページ全体に影響します。記事内の文字色というと、#the-content p { color: #333; }
などとすることでp要素は#333に変わります。が記事内にはulもあるでしょうし他の要素もあります。なので、基本的には、それらを全て変えなければいけません。
cssの設計の問題ですが、Simplicityではカスタマイザーの設定や、他の機能との兼ね合いで無駄に多くの要素に色指定がしてあります。なので、全部を変えたい時はその全部に指定をしなくてはいけません。
基本的には色というのは親要素から引き継がれます(継承)。なのでbodyタグにcolorを設定すれば多くの要素がその色を継承しますが、セレクタの書き方や優先度によってそれらを上書きします。
なので、ベースの文字色はbodyにすればページ全体に適用されますが、個々の要素にはまた別の色指定があったりするのでそれを直していく必要があります。bodyにせずとも、#mainでもよいですし、.articleや先ほどの#the-contentでも、自分が必要とする範囲に設定していけば良いです。
.entry-snippet { margin: 0 0 5px 0; line-height: 150%; color: ##fcc9ff;
コードをフォーラムに貼る時は、cssに書いてあるそのままをコピペして上記のように範囲選択後codeボタンを押してハイライトが有効になるようにしてください。全角スペースの混入や全角の仕様などは、wordpressのセキュリティ仕様などによりフォーラム上で勝手に文字変換されたりして、本来どのように書いているのかがわからないことがあるからです。原文のまま掲載するようにするということです。
上記質問のcssで言えば、閉じ}がない、colorの部分で##と余計な#が入っているなどが挙げられます。
またline-heightは150%でもよいですが、1.5と書くのが速くて、また単位を入れると、単位を指定すると親要素で計算されたline-height値が子要素、孫要素に継承される
これを防ぐことができます。単純に倍率で書くのが他の影響を受けないため良いとされています。
-
2016年11月28日 11:14 AM #48031kokoroゲスト
解決しました!
ありがとうございました! -
2016年11月28日 11:16 AM #48032kokoroゲスト
ご返答ありがとうございます!
凄く納得しました。
ありがとうございます。
ご回答の内容で変更していきます!ありがとうございました!
-
-
投稿者投稿
- トピック「記事の色を変えたいのですが・・・・」には新しい返信をつけることはできません。