フォーラムへの返信
-
投稿者投稿
-
キタジマさんではないですが、よかったら参考にしてください。
現在、おそらく「最新記事」という部分は、見出しブロックのH4で実装されていると思います。こちらのみGoogle Fontを適応させたい場合には、該当ブロックを選択した状態で右サイドバーの下部に「高度な設定」という部分があると思いますので、そちらの中の「追加CSSクラス」という部分に、例えば
google-font-poppinsと入力してみてください。そして、外観→カスタマイズに移動し、追加CSSに以下のように記述してみてください。
.google-font-poppins { font-family: 'Poppins'; }そして、「最新記事」から英語表記に変えてみると、適応されると思います。
また、これも面倒な場合には、RECOMMEND 部分と同じようにセクションブロックを利用すると、
.smb-section__title, .snow-monkey-posts__title { font-family: 'Poppins'; }とスタイルがすでに用意されているようですので、同じようにフォントが適応されると思います。そして、セクションブロックのコンテンツ部分に最新投稿ブロックを設置すると同様に設定することができるかと思います。
参考になれば幸いです。
♥ 1いいねをした人: 居ません横から失礼します。
CPT UIでカスタム投稿タイプを追加し、そのカスタム投稿タイプのアーカイブを表示した場合、
<body>に記載されるクラス名にpost-type-archiveやpost-type-archive-{custom-post-type-slug-name}というCSSクラスが自動的に付与されますので、そちらからCSS指定することは可能かもしれません。また、
>ある投稿一覧をピンタレストの様なグリッドデザインにしたく思っています。
とのことですが、Snow Monkey側のスタイルをどれくらい利用するのか（or 全く利用しないのか）によって、対応方法は変わってくると思います。一覧に表示されている各投稿のマークアップ自体を独自のものにするのであれば、テンプレートファイルの書き換え（
template-parts/archive/entry/**辺り？）が必要になるかもしれませんね。その場合、子テーマでアプローチするかMy Snow Monkey（プラグイン）でアプローチするかで、また方法も変わってくるかと思います。
また、現状どのようなテンプレートファイルを読み込んでいるか簡単に確認するために Show Current Template というプラグインを利用されると良いかもしれません。実際、テンプレートの上書きなどをされた際にも正常に読み込まれているかどうかを確認することも容易になります。
以上、ご参考になれば幸いです。
♥ 2いいねをした人: 居ませんご検討いただきありがとうございました！！
♥ 1いいねをした人: 居ませんはっ…！！！！
♥ 1いいねをした人: 居ませんSnow Monkeyは本当に奥が深いです。僕もまだまださっぱりです！w
しかし、フォーラムなどで制作者のキタジマさんから直接アドバイスを頂けるのは、とても良い機会だと思いますので、ぜひ活用してスキルアップの参考にされることをおすすめします！
お疲れ様でした。問題解決したようでしたら、トピック閉じをお願いいたしますー！
♥ 1いいねをした人: 居ませんis_tax()でいけるということは、カテゴリーではなくカスタムタクソノミーということですね！これで問題ないと思います！そして、ご自身で調べられたという姿勢がとても素敵ですね！お疲れさまです！
こちらのように公式ドキュメントで調べてみると間違いないかと思います！
♥ 2いいねをした人: 居ません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いいねをした人: 居ません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いいねをした人: 居ません@キタジマタカシ
（人のトピック内で申し訳ありませんが）勉強になります！！
♥ 2いいねをした人: 居ませんこちらのトピックを参考にカスタマイズ記事を書きました。
もしよろしければ参考の１つに使ってください。
♥ 3いいねをした人: 居ませんご確認いただいてありがとうございます！
では、
after_setup_themeで読み込む方法で行きたいと思います！♥ 1いいねをした人: 居ません今回のこちらの環境としては、
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いいねをした人: 居ませんざっと見てみただけですけど、引用ブロックに使われているのはSVGなので、CSSでなんとかするのは難しそうな気がしますね。
どうしてもという場合には、代わりとなるSVG画像ファイルを用意してCSSで置き換えるのかなーと思いますが、キタジマさんのファイナルアンサーを待った方がいいかもしれません…（お力になれずすいません…
♥ 1いいねをした人: 居ません意外な方法でしたか？
h2とかは基本ブロック要素なので、コンテンツエリアに対して全幅になります。ですので、そこにそのままborder-bottomとかで下線をつけると、コンテンツ幅に対して全幅で下線が付いてしまい、ご想像されている状態にすることは難しいです。ですので、全幅の
h2のテキストを中央揃えにして、基準をposition: relativeで設定します。そして、擬似要素（
:beforeとか:after）をposition: absoluteにして、h2の中央を起点にして、borderを設置するというイメージですね。色々なところで利用できるケースですので、ぜひお試しください。
問題解決されましたらトピッククローズをお願いします〜
♥ 1いいねをした人: 居ませんこんな感じの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いいねをした人: 居ません -
投稿者投稿
