記事の色を変えたいのですが・・・・

  • このトピックには16件の返信、1人の参加者があり、最後にkokoroにより8年、 1ヶ月前に更新されました。
16件の返信スレッドを表示中
  • 投稿者
    投稿
    • #47953
      kokoro
      ゲスト

      トップページに出る記事の背景の色を半透明にしたいのですがどうすればいいですか?
      また記事ページもトップページと同じようにしたいのです。

      何度もすいません・・・。

    • #47957
      みき
      ゲスト

      どの部分かが具体的にわからないので
      詳しくはお答えできませんが
      大体こんな感じです

      #ID名 {
          opacity: 0.5;
      }

      ID名のところは変えてください

    • #47958
      みき
      ゲスト

      記事部分だとmainです
      (IDが)
      なので

      #main {
          opacity: 0.5;
      }

      透明度を変えたい場合は

      #main {
          opacity: 0.5;//ここを変更 0.6とか
      }

      色を変える場合は

      #main {
          background-color: #ffffff;//ここを変更
          opacity: 0.5;
      }

      反映されない場合はブラウザのキャッシュを削除するか
      シークレットモードみたいなやつで確認してください

      思っていたのと違う場合は
      詳しく教えてください

    • #47959
      kokoro
      ゲスト

      みき様
      ありがとうございます。
      それは子テーマのスタイルシートに追記すればよいのでしょうか?
      または、子テーマのCSSから該当部分を探して変更すればよいのでしょうか?

    • #47962
      みき
      ゲスト

      すみません
      子テーマのstyle.cssに追加です

    • #47969
      Hidekichi
      ゲスト

      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) = #000000

      255 = 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等を利用してどれぐらいでどういう色かを覚えていく必要があるかと思います。
      色見本のサイトなどでジェネレーター(相互変換や、ずはりそのものをグラフィカルに選べたり)とかがあるサイトもあるのでそういうのを利用すると良いだろうと思います。

    • #47970
      みき
      ゲスト

      あ~確かにそうですね
      Hidekichiさんのやつのほうが良いかも
      (#47969)

    • #48003
      kokoro
      ゲスト

      ご返答ありがとうございました。
      あれからこちらで記入してみましたが透明になりません・・・。

      http://usayami.com/wp/wp-content/uploads/2016/11/14437.jpg
      この画像の記事部分を透明にしたいのですが・・。
      申し訳ございません。

    • #48006
      みき
      ゲスト

      リスト部分だと

      #list {
      opacity: 0.5;
      }

      これでいけると思いますが・・・

    • #48020
      Hidekichi
      ゲスト

      サンプル: #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%)の表示になります。

    • #48026
      kokoro
      ゲスト

      みき様。Hidekichi様。
      ありがとうございました!!

      今確認したところ、無事透明になりました!!
      本当にありがとうございます。

      またお世話になるかと思いますが、よろしくお願いいたします。

    • #48027
      kokoro
      ゲスト

      申し訳ございません・・。
      あとおひとつお聞きしたいのですが

      サイトタイトルとサイトキャッチフレーズを消したいのですが
      CSSで非表示にする方法はありますでしょうか?

    • #48028
      kokoro
      ゲスト

      何度もすいません。
      記事内も文字色を変えたいときは
      bodyと書いて色コードを指定すればよいですか?

    • #48029
      kokoro
      ゲスト

      .entry-snippet {
      margin: 0 0 5px 0;
      line-height: 150%;
      color: ##fcc9ff;

      これではだめなのでしょうか?
      トップページから見て、記事タイトル部分と記事の抜粋部分の色を変更したいのですが・・。
      お忙しいかと思いますがご教授お願いいたします。

    • #48030
      Hidekichi
      ゲスト

      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値が子要素、孫要素に継承される

      これを防ぐことができます。単純に倍率で書くのが他の影響を受けないため良いとされています。

    • #48031
      kokoro
      ゲスト

      解決しました!
      ありがとうございました!

    • #48032
      kokoro
      ゲスト

      ご返答ありがとうございます!
      凄く納得しました。
      ありがとうございます。
      ご回答の内容で変更していきます!

      ありがとうございました!

16件の返信スレッドを表示中
  • トピック「記事の色を変えたいのですが・・・・」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)