[Olein_jp]

Snow Monkeyは本当に奥が深いです。僕もまだまださっぱりです！w

しかし、フォーラムなどで制作者のキタジマさんから直接アドバイスを頂けるのは、とても良い機会だと思いますので、ぜひ活用してスキルアップの参考にされることをおすすめします！

お疲れ様でした。問題解決したようでしたら、トピック閉じをお願いいたしますー！

♥ 1

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

[Olein_jp]

is_tax()でいけるということは、カテゴリーではなくカスタムタクソノミーということですね！

これで問題ないと思います！そして、ご自身で調べられたという姿勢がとても素敵ですね！お疲れさまです！

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_tax

こちらのように公式ドキュメントで調べてみると間違いないかと思います！

♥ 2

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

[Olein_jp]

if ( is_post_type_archive( 'news2020' ) ) {〜

これだとnews2020というカスタム投稿タイプのスラッグ名の場合、以下を実行しますという内容になります。

ですので、仮にスラッグcustom-post-typeというカスタム投稿タイプで、かつカテゴリーがcustom-post-categoryの場合のみ実行させるという場合には、

add_action(
	'snow_monkey_before_archive_entry_content',
	function() {
		if ( is_post_type_archive('custom-post-type') && is_category( 'custom-post-category' ) ) { 
		?>
		<p>挿入したいHTMLソースコードを書く</p>
		<?php
		}
	}
);

でいけるかなーと思います。試してみてください。&&というのは、左に条件に加えて右の条件も満たした場合〜みたいな感じになります。

カスタム投稿タイプにつけているカテゴリーというのが、カスタムタクソノミーで作ってある場合には、ちょっと違ってくるかもしれませんが、一度お試しくださいませ〜

♥ 1

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

[Olein_jp]

My Snow Monkeyを用意して、my-snow-monkey.phpに以下のように書くと、上に希望されている場所にHTMLソースコードを挿入することができます。また、カスタム投稿タイプだけということですので、カスタム投稿タイプのスラッグ名で条件分岐をすると良いでしょう。

また、snow_monkey_prepend_archive_entry_contentにフック先を変えても似たような場所に出力されると思うので、適宜試してみてください。

add_action(
	'snow_monkey_before_archive_entry_content',
	function() {
		if ( is_post_type_archive('投稿タイプ名') ) { 
		?>
		<p>挿入したいHTMLソースコードを書く</p>
		<?php
		}
	}
);

https://github.com/inc2734/snow-monkey/wiki/Action-hooks#snow_monkey_before_archive_entry_content

♥ 2

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

[Olein_jp]

@キタジマタカシ

（人のトピック内で申し訳ありませんが）勉強になります！！

♥ 2

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

[Olein_jp]

こちらのトピックを参考にカスタマイズ記事を書きました。

もしよろしければ参考の１つに使ってください。

最近の投稿ブロック（レイアウト：テキスト2）に新着マークを一定期間付ける方法（デモあり）

Snow Monkey公式フォーラムに投稿されていた質問からアイデアをいただき、僕なりのカスタマイズ方法を書い…

happy-snow-monkey.olein-design.com

♥ 3

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

[Olein_jp]

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

では、after_setup_themeで読み込む方法で行きたいと思います！

♥ 1

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

[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

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

[投稿者]

投稿