スライドトグルやテーブルの色変更について

[岩田]

お世話になります。

サポート様、お忙しいかとは思いますが、
以下の内容についてご回答頂けたらと思います。

MAGJAM　バージョン: 1.1.7.9
wordpress　4.6–ja

　　1：スライドトグルの外枠の色を変更したい
要素の検証ではやってみたのですが、
実際、オリジナルスタイルシートに貼り付けると
思うように反映されません。

試したみたコードは以下です。

<pre class=”lang:css decode:true ” >dl.accordion dt {
border: 1px solid rgba(17,168,255,1.22);
}

　　2：スライドトグル、テーブルのグレーになるところの色を変更したい
別々に色を変更したいのですが、
2つとも一緒に変わってしまいます。

また、こちらも要素の検証ではできているのですが、
オリジナルスタイルシートでは反映されません。

試したのはこちらのコードです。

<pre class=”lang:css decode:true ” >.content dt {
background-color: rgba(255, 206,0, 0.14);
}

.content table th {
background-color: rgba(255, 206,0, 0.14);
}

現在スタイルシートに記述しているすべてのものです。

<pre class=”lang:css decode:true ” >.entry input[type=”submit”]{
position: relative;
font-size: 20px;
font-weight: bold;
padding: 4 16px;
margin-top: 16;
line-height: 2;
cursor: pointer;
border: 0;
background-color: #e22956;
}

.entry-content h3 {
background-image: url(http://iwata-blog.jp/AFFITRIBE/wp-content/uploads/2016/07/7d087662c47f6a465d3ef17d7118c10b.png);
background-repeat: no-repeat;
background-position: left center;
padding: 10px 0px 10px 70px;
line-height: 2;
background-color: #fff;
border-left-width: 0px;
margin-left: -7px;
border-top: double 4px #343434;
border-right: solid 5px #1E7384;
}

.entry h5 {
border-bottom-style: double;
border-bottom-width: 4px;
}

.red {
color: #AD0000;
}

.yellow {
color: #f7d745;
}

.mk-yellow {
background: linear-gradient(transparent 45%,#f7d745 40%);
}

.bg-yellow {
background: linear-gradient(transparent 45%,#f7d745 40%);
}

.header_content .h_group h1.hd_title_img a, .header_content .h_group h1.hd_title_img img {
max-height: 70px;
max-width: 300px;
width: auto;
}

.header_content .h_group h2 {
margin-top: 4px;
font-size: 15px;
color: #1d1d1d;
font-weight: bold;
}

.header_content {
position: relative;
height: 130px;
margin: 0 auto;
text-align: left;
}

#searchform input.searchsubmit {
top: 13px;
}

.header_container, #global_menu_trigger {
background-color: rgba(255,255,255,0.58);

{

[DigiPress サポート]

個別に設置されたCSSの不具合に関するチェックについてはテーマとは直接的に関係がないためサポート致しかねますが、最後のセレクタの定義が閉じられていません({　でなく })。
このため、これ以降のCSSは反映されません。

.header_container, #global_menu_trigger {
background-color: rgba(255,255,255,0.58);
{

その他、CSSが反映されない場合は、一旦定義されているCSSをクリアして反映したいCSSから順に再度追加してCSSに誤りがないか確認してください。

[岩田]

ご回答ありがとうございます。

お教えいただいた通り、スタイルシートに記述したすべてを消しました。

そして、この反映されなかった部分から記述してみました。

<pre class=”lang:default decode:true ” >dl.accordion dt:hover {
background-color: rgba(211,212,0,0.75) !important;
}

ですが、反映されませんでした。

通常であれば、この状態で反映されるということで
理解してもよろしいのでしょうか？

これしか記述していないのに反映されない原因・・・

[DigiPress サポート]

対象サイトのカスタムCSSをチェックしましたが、実際に指定されているCSSは以下のものとなっており、rgbaのアルファ値(第4引数)を指定されていないため、単純にCSSの構文に誤りがあります。

dl.accordion dt {
    border: 1px solid rgb(188, 144, 44);
}
dl.accordion dt:hover {
    background-color: rgb(211, 212, 0) !important;
}

rgbaの引数はアルファ値も指定してください。
透過度が不要であればrgbaでなくHEX値(カラーコード)のみで指定してください。

[DigiPress サポート]

先の回答に誤りがありました。
ショートコードプラグインのCSSとバッティングしていますので、以下を適用してください。

.entry dl.accordion dt{
border: 1px solid rgb(188, 144, 44)!important;
}
.entry dl.accordion dt:hover{
background-color: rgb(211, 212, 0)!important;
}

[投稿者]

投稿