ここから本文です

"blockquote"が何をやっても変わらないのは、何故でしょうか?

sag********さん

2017/3/3102:04:26

"blockquote"が何をやっても変わらないのは、何故でしょうか?

ワードプレス(simplicity)を使っています。childを使っています。
スタイルシートにh2タグなど記載して、デザインの見栄えもよくしていて、
これまで上手く行っていました。

しかし、"blockquote”をスタイルシートやCCSに記載しても、”引用”のデザインが
デフォルトのまま、全く変更できません。

記載するのは、たとえば
/* 引用 */
.post blockquote {
background-color: #d3d3d3;
padding-top: 1.7em;
padding-right: 1em;
padding-left: 1.5em;
padding-bottom: 1.2em;
margin-top: 0.5px;
margin-right: 1em;
margin-bottom: 1.5em;
border-style : solid;
border-width : 0px;
border-radius: 0px;
border-left:10px solid #808080;
}
blockquote p{
margin:0;
}

↑のようなもので、デザインを公開しているサイトから
コピーさせてもらったものです。
h2タグもコピペでスタイルシート貼り付けできちんと変更できたのに、
blockquoteだけは、かっこわるいデフォルトのまま。

どうしたら変更できますか?
よろしくお願いします。

閲覧数:
43
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ken********さん

2017/3/3109:06:26

固定ページで書かれていませんか?

質問者さんのCSSは
.post blockquote {
から始まっています。
これは、<blockquote>タグがclass名postのタグに囲まれてなければなりません。

投稿ページでは、勝手に<div class="post">で囲まれるので、上記CSSでも反映されると思いますが、固定ページでは<div class="post">が付かないので質問者さんのCSSが反映されなくなります。

一番簡単なのは、CSSでclass名を指定しないこと。
.postをはずして下記のように

blockquote {
background-color: #d3d3d3;
~~省略~~
っで書き始めたらいいと思います。

または、CSSをそのまま(.post blockquote)で行くのなら、HTMLを下記のように
<div class="post">
<blockquote>
<p>サンプルサンプルサンプル</p>
</blockquote>
</div>
class名postで囲んでやればいいと思います。


あと、<blockquote>タグに対して、before,afterで引用符も付けるようになっていると思います。
それを消す場合は、
blockquote:before, blockquote:after {
content: '';
content: none;
}
をCSSに追加して消してください。

この質問は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

gar********さん

2017/3/3107:56:02

とりあえず下のように !important を付けて変化があるか確認してみてはどうでしょうか?

変化があれば CSS の記述する優先順の問題だとすぐに分かります。

変化がないならばセレクタが正しくないか、または優先順の問題です。

これで多少は問題の幅が狭くなるかと思います。

可能であればブラウザで blockquote の場所をポイントして右クリックして「要素を検証」などから解析すると比較的直ぐに分かるかと思うのですが。

.post blockquote {
background-color: #d3d3d3 !important;
padding-top: 1.7em !important;
padding-right: 1em !important;
padding-left: 1.5em !important;
padding-bottom: 1.2em !important;
margin-top: 0.5px !important;
margin-right: 1em !important;
margin-bottom: 1.5em !important;
border-style : solid !important;
border-width : 0px !important;
border-radius: 0px !important;
border-left:10px solid #808080 !important;
}
blockquote p{
margin:0 !important;
}

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる