質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

501閲覧

CSSコードの上書きができない

bigcat

総合スコア24

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/06/09 08:49

質問したいこと:CSSのwidth: fit-content!important;を上書きで無効にしたい

WordPressのCSSについてです。

クラシックエディター(プラグイン使用)で、右寄り、または、左寄りで画像を挿入すると、alignright、alignleftのクラスが付与されます。
これらのクラス付与の画像の幅指定がWordPressのver6.0からできなくなりました。(aligncenterクラスは幅指定できます。)

ディベロッパーツールで調べると、以下のようなスタイルが適用されており、width: fit-content!important;を外すと幅指定できたため、これが原因と思われます。
このスタイルはテーマから来ていると思います。

CSS

1.alignleft, .alignright { 2 width: -moz-fit-content!important; 3 width: fit-content!important; 4}

そこで、width: fit-content!important;を無効にしたいのですが、上手く上書きできません。

試したこと

ピント外れかもしれませんが、alignleftの場合、

.alignleft{ width: auto !important ; }
.c-entry__content .alignleft{ width: auto !important ; }

それと、imgを付けたり、width: initial;なども試しました。

サイト全体に関わるので、解決したいのですが、どのようにすると上書きできるのか教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2022/06/09 12:38

上書きするcssは後から読ませていますか。
bigcat

2022/06/09 14:16 編集

ありがとうございます。 テーマの子テーマCSSの最後に記載していますが、width: fit-content!important;は自動的に付与されているので、前後関係が分かりません。 知識不足ですみません。
cerfweb

2022/06/09 14:47

当該CSSがどの順序で読み込まれているか、実際に出力されたHTMLを確認してみてください。
bigcat

2022/06/09 22:38

恐れいります、実際に出力されたHTMLは、ディベロッパーツールの内容、あるいはソースコードで確認するのでしょうか。その辺も含めて分からなかったので、質問しました。 それと、.c-entry__contentやimgなどを当てて、優先順位を強くしたつもりでしたが、反映しません。
tabuu

2022/06/09 23:38

>このスタイルはテーマから来ていると思います。 テーマは何ですか?テーマの実装方法によって対応策も変わってきます。
bigcat

2022/06/09 23:52

テーマはsnowmonkeyです。これまで続けていたサブスクを継続できないので今はサポートが受けられません。不具合かと開発者に質問しましたが、修正はしてもらえないようで、CSSの上書きで対応してはと言われました。しかし、うまくいかず、色々と試しています。
guest

回答2

0

こういう場合はwidthを上書きしよう詳細度を競うより
max-widthmin-widthで画像の幅を制限する方向でやったほうがいいです。

詳細度競争は不毛です。

投稿2022/06/10 09:06

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

ご回答、ご質問いただいた方、ありがとうございました。
max-widthもいじってみたのですが、反映されませんでした。

少し前に、無理だと思っていたテーマの修正を開発者がやってくれました。
結局、原因は分かりませんが、解決済とさせていただきます。

投稿2022/06/10 12:06

bigcat

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問