[Olein_jp]

今回のこちらの環境としては、editor-style.cssという編集画面用のCSSファイルに、例えば、

h2 {
border-left: none;
}

と記述したとすると、編集画面では.editor-styles-wrapperで自動的に囲ってくれるので、編集画面で読み込まれているCSSとしては、

.editor-styles-wrapper h2 {
border-left: none;
}

となります。

しかし、上でキタジマさんが言われているように

Snow Monkey の WordPress 5.5 対応のときに、コアのスタイルを打ち消すためと、エディターの見た目・フロントの見た目をより一致させるために、いくつか .is-root-container を使ったスタイルを追加しています。

の.is-root-container というクラスが以下のように影響をしてスタイルを上書きできないという状況です。

.editor-styles-wrapper .is-root-container > h2 {
  // テーマ側からのスタイル
}

解決方法としては、editor-style.cssに、.is-root-container を加えたクラスを付ければスタイルの上書きはできるので、これでやっちゃえばいいんですけどね。

あと、add_editor_styles()を行う際のフックですが、after_setup_themeでフックするとスタイルが書き出されるタイミングが遅いのか、テーマ側のスタイルを上書きできませんでした。admin_initだと同じCSSでも上書きすることができます。なので、after_setup_themeではなくadmin_initでフックするので問題ないですかねー？（別トピックにした方がいいですかね？）

♥ 0

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

[Olein_jp]

ざっと見てみただけですけど、引用ブロックに使われているのはSVGなので、CSSでなんとかするのは難しそうな気がしますね。

どうしてもという場合には、代わりとなるSVG画像ファイルを用意してCSSで置き換えるのかなーと思いますが、キタジマさんのファイナルアンサーを待った方がいいかもしれません…（お力になれずすいません…

♥ 1

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

[Olein_jp]

意外な方法でしたか？

h2とかは基本ブロック要素なので、コンテンツエリアに対して全幅になります。ですので、そこにそのままborder-bottomとかで下線をつけると、コンテンツ幅に対して全幅で下線が付いてしまい、ご想像されている状態にすることは難しいです。

ですので、全幅のh2のテキストを中央揃えにして、基準をposition: relativeで設定します。

そして、擬似要素（:beforeとか:after）をposition: absoluteにして、h2の中央を起点にして、borderを設置するというイメージですね。

色々なところで利用できるケースですので、ぜひお試しください。

問題解決されましたらトピッククローズをお願いします〜

♥ 1

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

[Olein_jp]

こんな感じのCSSで実現できるかと思います。

.midashi {
  border-left: none;
  background-color: inherit;
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 12px;
  margin-bottom: 70px;
}
.midashi:before {
  position: absolute;
  content: '';
  border: 5px solid #F2632D; // 5pxは線の太さ
  width: 60px; //線の横幅
  left: 50%;
  margin-left: -30px;
  bottom: -10px;
}

いかがでしょうか？調整は良しなに行ってみてください。

また、現在利用されているセクションブロック内の見出しだけに利用したい場合には、そのセクションブロックに任意のCSSクラス名をブロックの方で設定を行い、以下のように加えてみてください。

セクションブロックにCSSクラスadd-css-class-nameを設定したとすると、

.add-css-class-name .midashi {
  border-left: none;
  background-color: inherit;
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 12px;
  margin-bottom: 70px;
}
.add-css-class-name .midashi:before {
  position: absolute;
  content: '';
  border: 5px solid #F2632D; // 5pxは線の太さ
  width: 60px; //線の横幅
  left: 50%;
  margin-left: -30px;
  bottom: -10px;
}

お試しください。

♥ 3

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

[Olein_jp]

すいません！

テンプレートルート追加で全然できますね！できない前提で質問してましたらテストしたら普通に使えて逆にびっくりしました！

解決したので閉じます。

♥ 4

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

[Olein_jp]

ご確認いただきありがとうございます！

よろしくお願いいたします！

♥ 0

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

[Olein_jp]

'type' => 'option'を削除する形でうまく動作することを確認できました。

ありがとうございます！

♥ 0

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

[Olein_jp]

まさか同じ質問を過去にしていたとは…何も学んでいない証拠ですね…赤面しかないです。（痴呆かな？

お教えいただいた内容で理解できました。ありがとうごうございました！！

♥ 0

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

[Olein_jp]

了解です！ありがとうございます！参照してみますー！

♥ 0

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

[Olein_jp]

顔面蒼白……（認証のために子テーマからコード入れてました…消してなかった…

♥ 0

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

[Olein_jp]

現状、カスタマイザー＞広告内全ての入力欄が空欄になっています。

ウィジェットに入れてあるコードはこちらになります。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-467186**********"
     data-ad-slot="**********"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

よろしくお願いします。

♥ 0

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

[Olein_jp]

なるほど！ありがとうございます！完全理解できました！！

♥ 0

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

[Olein_jp]

ありがとうございます！

GitHub Webhooks > webhook.php > Recent Deliveries > 最新のやつ > Redeliver とクリックすると何度でも Webhook の動作を試すことができます。で、この画面でリクエストとレスポンスも確認できるので、うまくいかないときのテストに結構便利です。

こちらの方法とメールを飛ばす方法で確認してみようと思います！

♥ 0

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

[Olein_jp]

エラーらしいエラーは出てませんでしたね…

もう少しもがいてみます！ありがとうございました！！

♥ 0

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

[Olein_jp]

先ほど頂いたソースコードを適宜変更してテストしてみたのですが、デモ環境にアップデートは走っているので大丈夫なのかもしれないのですが、Releasesからパッケージが削除されていないので、それがGitHubを参照しているのか自前サーバーを参照しているのか確認できない…という状況です。

webhook.phpの最下部をコメントアウトしてみてはいるのですが…。

♥ 0

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

[投稿者]

投稿