こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

css heightについて

wordpressのテーマのCocoonというのを使用しています。
そのページにだけ適用できるカスタムCSSに下記のようにtextareaの高さを指定したのですが、まったく変わりません。他に何か指定しないといけないものがあるのでしょうか?
textarea{
height:50px;
}

投稿日時 - 2020-05-03 11:45:03

QNo.9743489

困ってます

質問者が選んだベストアンサー

>上位には何も~
それが正しいかどうかを回答者は確認出来ないので、そのズバリのwebページのソースコードを見せて貰えない限りは「はあそうですか」としか言い様がありませんね。

色だけがピンクに変わるのは当たり前と言うか、つまりは「それに影響を与えている他要素には色関係が指定されていないから」ってだけで、仮に色指定がなされていれば色も変更不可だったと思います。

まあ多分、どこかの上位レイヤに xxx * { height:auto; } みたいな指定が有って競合してるのだと思いますが…。聞く耳は持たぬという事なのでは仕方が無いので、ご存分に我が道を往くが如くに突き進んできださい。

P.S.
[F12] でデバッガー画面を出して、[セレクターモード] に切り替えてから目的の <textarea> をマウスでクリックして詳細なプロパティ情報を表示させて、[Computed] の項目で実際にスタイルを指定してる部分の詳細を確認して見てください。それで親CSSの何行目に競合してるスタイル指定が記述されているのかが分かります。ブラウザがChromeの場合ですが、FFやIEとかでも同じです。

投稿日時 - 2020-05-04 03:54:55

補足

回答ありがとうございます。
教えられた通りデバッガーでStylesタブを見たところ、自分で作成したtextareaのすぐ下にtextareaがあって、そこに下記のようなCSSが表示されていました。
textarea {
min-height: 260px;
}
なんだこれはと思いファイルの場所を探したらCocoonの親テーマのstyle.cssにありました。Cocoonのサイトでは編集する時は親テーマではなく子テーマを編集してとなっていたので、親テーマはまったく見てませんでした。
カスタムCSSに下記のようにmin-height:0px;を設定したら変更できました。ありがとうございました。
textarea{
min-height:0px;
height:50px;
}

投稿日時 - 2020-05-04 23:43:32

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

面白そうなので、私も実験してみました。
正しく動いていますね。
となれば、指定したものよりも「上位」に継承されたCSSが
いる可能性があるので、デベロッパーツールで
実際にどこが、オーバーライドしてしまっているかを
探すほうが、早いと思います。
CSSのスコア稼ぎか、だめなら最後の手段でインポータントでしょう^^

投稿日時 - 2020-05-03 13:58:25

補足

回答ありがとうございます。
上位は何もありません。新規投稿で下記だけ書いてプレビューしているのですが、定規で計るとtextareaの高さが7センチあります。textareaは右下にサイズ変更可能のマークがあるやつになっています。
<textarea></textarea>

カスタムCSSも下記だけ指定しています。色はピンクなのでCSS自体は効いていると思うのですが高さがさっぱり変わりません。
textarea{
background-color: pink;
height:50px;
}

投稿日時 - 2020-05-03 22:50:18

ANo.1

この手の無料テーマでは珍しくアフターフォローが整っているので、まずは下記URLの公式で調べたり質問してみた方が確実で早いかと思います。

- Cocoon公式FAQ https://wp-cocoon.com/manual/
- Cocoon公式フォーラム https://wp-cocoon.com/community/

P.S.
CSS(スタイルシート)はそのCSSが指定されているHTMLタグだけでは無く、それを取り囲む他のHTMLタグに指定されたCSS等が相互に影響し合って最終的な表示が決まります。

ですので「textareaの高さが変わりません」みたいに質問されても、そのwebページの全てのHTML構造等が分からないと何故その様な表示結果になっているのかは上級者であっても皆目検討が付きません。

質問者は既に自分でCSSを書き換えてみて何も変化無しだという事を確認済みなのですから、既に他の要素が影響し合っている事は間違い無いでしょう。そして運良く textarea の表示を変更出来たとしても、それがまた違う他の要素に新たな影響を与えてしまい、思わぬ部分で表示が崩れる~と言った事が連鎖的に起きるのがCSSを使ったwebデザインの日常です。

まあそんな風に一朝一夕ではにわかにはとても手に負えないからこそ、世の中で "webデザイナー" なる職業が成り立つのですけれども…

投稿日時 - 2020-05-03 13:50:17

補足

回答ありがとうございます。他の方にも補足したのですが、
新規投稿には下記のみ書いて試しています。
<textarea></textarea>
カスタムCSSも下記だけ指定しています。色はピンクなのでCSS自体は効いていると思うのですが高さがさっぱり変わりません。textareaは右下にサイズ変更可能のマークがあるやつになっています。これが関係しているのでしょうか?
textarea{
background-color: pink;
height:50px;
}
後、style.cssもfunctions.phpもいじってません。スキンが関係しているのかと思い変えてみたのですがどれも同じで、
まったく変わりません。

投稿日時 - 2020-05-03 22:55:20

あなたにオススメの質問