wordpressプラグイン「WP Latest Posts Blocks」のCustom CSSへの入力方法

Question

wordpressプラグイン「WP Latest Posts Blocks」を使用しています。
設定画面に「Custom CSS」の欄がありますが入力しても反映されません。

<STYLE TYPE="text/css">

a {
	color: #c00000;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
	text-decoration: none;
	color: #37cadd;
}
</STYLE>

入力したい内容は上記です。

<STYLE TYPE="text/css"> </STYLE>

は不要かと思いなしで入力したり、ありで入力したりと試しましたが思うようにいきません。

もし、解決策をご存知の方がいらっしゃいましたらご教授よろしくお願い致します。

Answer 1

.wplp_container a,
.wplp_container a:focus,
.wplp_container a:active,
.wplp_container a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

とデフォルトの記述があります。!importantで最優先になっているようです。
colorの場合はinherit（親の値を継承）なので、親要素に指定するか、その子要素であるspanに指定してあげれば良いでしょう。

もしくは追記するCSSに更に!importantして最優先に指定する方法もあります。

.wplp_container a {
    color: #c00000!important;
    text-decoration: none!important;
}

.wplp_container a:focus {
    outline: thin dotted!important;
}

.wplp_container a:hover,
.wplp_container a:active {
    outline: 0!important;
    text-decoration: none!important;
    color: #37cadd!important;
}

Comments

[yoso]

ありがとうございます。

この中にあります

.wplp_container .title {
color: #666;
font-weight: bold;
font-size: 1.2em;
text-align: left;
line-height: 1.35;
max-width: 85%;
overflow: hidden;
}

この部分に質問しましたような、リンクのcssを適応するにはどうすればよいでしょうか。
テキスト部分にしかリンクのcssは適応されません。

ここで質問してよいものか分かりませんが、よろしくお願いいたします！！

[退会済みユーザー]

回答したCSSのセレクタに.wplp_container .titleを追加すれば良いと思いますよ。
.wplp_container .title,
.wplp_container a {

.wplp_container .title:focus,
.wplp_container a:focus {

.wplp_container .title:hover,
.wplp_container .title:active,
.wplp_container a:hover,
.wplp_container a:active {

[yoso]

ありがとうございます！
単純なこともわからず、お恥ずかしいです。

,
が抜けた状態で記載していたようです。
とても助かりました、ありがとうございます。

Answer 2

そのプラグインは使ったことが無いですが、<STYLE TYPE="text/css"></STYLE> は不要でしょう。

CSSが適用されていないのではなく、他のCSSが優先されているだけだと思います。

【!importantはもう使わない！CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ】
http://creator.aainc.co.jp/archives/4947

---

CSSの調査はデベロッパーツールで行えます。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[yoso]

ありがとうございます。
元々のcssが優先させているのだろうとは思っていたのですが、どこにあるかわからずでした。
ご提示いただいたリンク先、拝見させていただきます。

[yoso]

ありがとうございました、おかげで該当.cssにたどり着けました。
ベストアンサーは別の方を選ばせていただきましたが大変感謝しています。
意味があるか分かりませんが、上部にあります「＋高評価」を押させて戴いました。

本当にありがとうございました。