H2やH3の装飾が style-editor.cssでリセットできない

♥ 0

いいねをした人: 居ません

このトピックには4件の返信、2人の参加者があり、最後に藤原により3年、 9ヶ月前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2020年7月16日 3:25 PM #54157

藤原
参加者

♥ 4

【お使いの Snow Monkey のバージョン】10.10.7
【お使いのブラウザ】Chrome 84.0.4147.89

H2やH3の装飾が style-editor.cssでリセットできず困っています。

style-editor.cssには下記のように他の記述は入れていません。

サイズや余白はリセットされているのですが、なにか根本的な見落としがあるのでしょうか？
それとも、読み込み後に上書きされているのでしょうか？

♥ 0

いいねをした人: 居ません

2020年7月16日 3:31 PM #54159

キタジマタカシ
参加者

♥ 2254

こちらでも試してみたいので、style-editor.css を読み込ませるために my-snow-monkey.php に書いたコードをここに貼り付けてもらえないでしょうか？

♥ 0

いいねをした人: 居ません

2020年7月16日 3:34 PM #54162
藤原
参加者

♥ 4
```
// エディター用の CSS 読み込み
add_action(
	'after_setup_theme',
	function() {
		add_editor_style( 'https://ドメイン/wp-content/plugins/my-snow-monkey/css/style-editor.css?rev=' . date('YmdGis'));
	},
	99
);
```
こうしています。
よろしくお願します。

♥ 0

いいねをした人: 居ません
2020年7月17日 9:35 AM #54193
キタジマタカシ
参加者

♥ 2254
ありがとうございます！

all プロパティに詳しくなかったのでちょっと調べてみたのですが、all: initial はプロパティを初期値にするものらしいので、初期値が設定されていないものについてはリセットされないのかな？と思いました。

initial

initial は CSS のキーワードで、要素にプロパティの初期値 (または既定値) を設定します。どの CSS プロパティにも適用できます。

developer.mozilla.org

注: 継承プロパティでは、初期値は期待されない値かもしれません。代わりに inherit, unset, revert キーワードを使用することを検討してください。

ちなみに Chrome での h2 の初期スタイルは以下みたいでした。
```
h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
```
が、試してみると all: initial を指定すると display: inline になるし、font-weight はリセットされないしでちょっとよくわかりませんでした…。all を使わずに普通に上書きしていくほうが混乱が少ない気がします。

余談ですが、ちょっと気になったのは、add_editor_style() の引数が https:// からの URL 指定になっていることです。ちょっと具体的には忘れてしまったのですが、URL 指定は条件によって読み込まれない場合があるんですよね。なのでここはテーマからの相対パスにするのがベターです。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました

子テーマの問題点一般的に、テーマの設定では対応できないカスタマイズについては、子テーマを用意し、コードを書い…

snow-monkey.2inc.org
```
// エディター用の CSS 読み込み
add_action(
	'after_setup_theme',
	function() {
		add_editor_style( '/../../plugins/my-snow-monkey/style-editor.css' );
	}
);
```
♥ 0

いいねをした人: 居ません
2020年7月17日 11:36 AM #54204

藤原
参加者

♥ 4

ありがとうございます。
回答をいただいて「ああこれはこちらにミスがある問題だな」と再度確認しました。

結果、デベロッパーツールで見える .editor-styles-wrapper から記載し、2重に書いていたという恥ずかしい原因でした。

【こう書くと】
.editor-styles-wrapper [data-type=”core/heading”] > h2 {
border-left: none;
}

【こうなってしまう】
.editor-styles-wrapper .editor-styles-wrapper [data-type=”core/heading”] > h2 {
border-left: none;
}

【 editor-style.cssには、.editor-styles-wrapper 以下のみ記載する】
[data-type=”core/heading”] > h2 {
border-left: none;
}

個別に設定していたのですが、状況をわかりやすくするためにと思い、Allで消して問い合わせたことで余計にややこしくしてしまったかもしれません。

子テーマからmy-snow-monkeyへ移行する際に誤って移したのだと思います。
お手数をおかけしました。
ありがとうございました。

== 追記 ==
add_editor_style()に関しては、キャッシュを消したくてdate(‘YmdGis’)を付けており

クエリ文字列付きのパス (例: editor-style?ver=…) は追加に失敗します。
代わりに同等の http(s) URL を使用してください。

と関数リファレンスにあったので、（制作時は）httpから付けるようにしていました。

♥ 2

いいねをした人: 居ません
投稿者

投稿