キタジマ様
お世話になっております。
通知に気づかず、ご返信が遅れてしまい申し訳ございません。
ご回答ありがとうございます！
問題の空白箇所ですが、「ツールバー」と「l-containerクラス」の間に存在しておりました。
また、念のためツールバーも削除してみましたが、余白は変わらずに残っておりました。
下記に添付画像について記載いたしましたので、ご確認いただけますと幸いです。
1枚目：赤丸内部のヘッダー上部部分にうっすらとですがドロップシャドウのような影が確認できました。
その上部に問題の空白部分がございます。
2枚目：bodyタグ内の範囲が青く表示されております。
3枚目：bodyタグ直下のl-containerクラスの範囲が青く表示されております。
（→bodyタグ直下の要素は様々ありましたが、検証ツール内で削除し、見やすい状態にしたものが添付画像になります。）
また、テーマカスタマイズ・テーマファイルエディタの方で、
HTMLタグやbodyタグにマイナスマージンを付与しましたが、うまく反映されませんでした。
margin-topやpadding-topの指定による余白が見当たらず、解決方法の検討がついておりません。
何か解決法等があれば、お教えいただきたいです。
よろしくお願いいたします。
画像1
画像2
画像3
かしこまりました。画像の変更だけよろしくお願いいたします。
<div class="wp-block-snow-monkey-blocks-section-break-the-grid alignfull smb-section smb-section-break-the-grid smb-section-break-the-grid--right smb-section-break-the-grid--mobile-image is-style-smb-section-undecorated-title" style="--smb-section-break-the-grid--shadow-color:#f78da7;--smb-section-break-the-grid--shadow-transform:translate(5%, 5%);--smb-section-break-the-grid--content-background-color:rgba(255, 255, 255, 0.8);padding-top:120px;padding-bottom:120px;--smb-section--fixed-background-color:#7bdcb5"><div class="smb-section__fixed-background"></div><div class="smb-section__inner"><div class="c-container"><div class="smb-section__contents-wrapper smb-section-break-the-grid__contents-wrapper"><div class="c-row c-row--lg-middle"><div class="c-row__col c-row__col--1-1 c-row__col--lg-1-2"><div class="smb-section-break-the-grid__content smb-section-break-the-grid__content--w--20 smb-section-break-the-grid__content--p-m smb-section-break-the-grid__content--horizontal-10"><div class="smb-section__header smb-section-break-the-grid__header"><h2 class="smb-section__title smb-section-break-the-grid__title">かっこいい<br>タイトルが入ります</h2><div class="smb-section__lede-wrapper smb-section-break-the-grid__lede-wrapper"><div class="smb-section__lede smb-section-break-the-grid__lede">リード分が入ります。リード分が入ります。リード分が入ります。リード分が入ります。</div></div></div><div class="smb-section__body smb-section-break-the-grid__body"><!-- wp:snow-monkey-blocks/buttons -->
<div class="wp-block-snow-monkey-blocks-buttons smb-buttons"><!-- wp:snow-monkey-blocks/btn {"borderRadius":"100px","className":"is-style-ghost"} -->
<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper is-style-ghost"><a href=""><span class="smb-btn__label">私たちについて</span></a></div>
<!-- /wp:snow-monkey-blocks/btn --></div>
<!-- /wp:snow-monkey-blocks/buttons --></div></div></div><div class="c-row__col c-row__col--1-1 c-row__col--lg-1-2"><div class="smb-section-break-the-grid__figure smb-section-break-the-grid__figure--w-40"><div class="smb-section-break-the-grid__shadow"></div><img src="http://demo.local/wp-content/uploads/2023/05/AdobeStock_319972399-1024x683.jpg" alt="" width="1024" height="683" /></div></div></div></div></div></div></div>
他のサイトではsmb-section-break-the-grid__figure--w-lというのが使われていて、アップデートでsmb-section-break-the-grid__figure--w-40に置き換わった際に異なる動きになったものかと思っています。
また、
@media (max-width:63.9375em)
.smb-section-break-the-grid--left.alignfull .smb-section-break-the-grid__figure, .smb-section-break-the-grid--right.alignfull .smb-section-break-the-grid__figure {
right: 0;
left: 0;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
というcssが当たっていて、全幅の時モバイルでも画像が全幅になるという仕様になっていました。
1つはバリエーションへの変換で、「高さ100%」から「配置可能」には変換できるのですが、その逆ができないようです。おそらくこちらは不具合かなと思います。
あれ、ほんとですね。確認します！
もう1つが、コンテンツスライダーの中にパネルを入れると、シャドウの効果が打ち消される（CSSではbox-shadow: var(–smb-panels–item-box-shadow);が残っているため可視範囲外になって見えなくなっている？）ことです。
これは仕様的にできないのです…。
Snow Monkey のスライダーブロックは独自のスライダーライブラリ（Spider）を使っていて、Spider のコンセプトは「なるべく CSS だけで動くスライダーをつくる」となっています。一般的なスライダーライブラリは CSS の translateX を js で変化させてスライド動作を実現していることが多いのですが、Spider は横スクロール機能を使ってスライド動作を実現しています。そして、横スクロールさせるにいは overflow を指定する必要があり、overflow を指定するとはみ出た部分は消えてしまう = box-shadow は見えなくなる、ということになってしまうのです。
ということで、コンテンツスライダーの子であるスライドブロックにはボックスシャドウの設定があるのですが、今試してみたところ、上下のシャドウは見えるけど左右は見えないという状態になってしました…。こちら次のアップデートで修正いれます！
↑で添付いただいたツールバーの右から二番目、下向きの「ｖ」みたいなのがあると思いますが、そこに「ハイライト」という WordPress 表示の文字色変更ツールがあると思います。で、これもカラーコードが設定できなくて、Snow Monkey Editor もこれと同じコンポーネントを使っているから WordPress コアの方でコンポーネントの不具合が修正されれば Snow Monkey Editor のほうも直るのかなと思っていました。
もし他のテーマやプラグインで、こういう部分文字列の色設定機能があって、それだと正しく動くということであれば僕のほうでもそれを調査してみたいなと思うので、もしご存知でしたら教えてください！
ウィジェットだとコントロールが難しいのでコードで書いてみました。
どこに表示させたいかでフックが変わりますが、とりあえずタイトルの上の場合を想定して snow_monkey_prepend_main を使っています。投稿タイプ名がわからなかったので、そこはご自身の環境にあわせて調整してください。素のリストで表示されるので、class をつけたりして CSS で好みのデザインに調整されると良いのかなと思います。
add_action(
'snow_monkey_prepend_main',
function() {
// news カスタム投稿アーカイブ以外では表示しない
if ( ! is_post_type_archive( 'news' ) ) {
return;
}
// カテゴリー
$categories = get_terms( [ 'taxonomy' => 'category', 'parent' => 0 ] );
// タグ
$tags = get_terms( [ 'taxonomy' => 'post_tag', ] );
?>
<div class="u-content">
<ul>
<?php foreach ( $categories as $category ) : ?>
<li><a href="<?php echo get_term_link( $category ); ?>"><?php echo esc_html( $category->name ); ?></a></li>
<?php endforeach; ?>
</ul>
<ul>
<?php foreach ( $tags as $tag ) : ?>
<li><a href="<?php echo get_term_link( $tag ); ?>"><?php echo esc_html( $tag->name ); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<?php
}
);
ご確認ありがとうございます！
私も今確認してみたところ、「段落」ブロック→Styles→色（テキスト）ではコードでの変更が可能でした！
そういえば画面右側のブロックの設定でも変更できましたね…
ただSnow Monkey Editorのツールバーでしょうか？添付画像の部分でいつも色を変更していたのですが、こちらでの変更ができなかったので投稿させていただきました。
となると、snow monkey editor周りの問題ということでしょか…？
あ、snow_monkey_prepend_archive_entry_content フックを使って独自にウィジェットエリアをつくったのかなと思ったのですがそういうことじゃなくて、普通にアーカイブ上部ウィジェットエリアにタグとカテゴリーのウィジェットを入れたけど表示が崩れるということですよね？ 確認してみます。
確認してみました！
こちらの環境だと、
## Snow Monkey
– 段落ブロック → 設定パネル → 色（テキスト）：設定できる
– ツールバー → ハイライト：設定できない
– Snow Monkey Editor → 文字色：設定できない
## TwentyTwentyThree
– 段落ブロック → 設定パネル → 色（テキスト）：設定できる
– ツールバー → ハイライト：設定できない
– Snow Monkey Editor → 文字色：設定できない
という状態でした。
「ページ編集画面で、見出しや段落など各文字色の変更ができなくなりました」というのは、ツールバーのハイライトではなくて、設定パネルの色のほうでも発生するということでしょうか？
＞キタジマさん
早速のご返信ありがとうございます！
恐らく下記のトピックと同じかなと思うのですが、他のテーマでは発生しないでしょうか？
そうです、まさにこちらのトピックやGithub内の報告と同様の現象です…！
今、他のテーマで試してみたのですが、他の有料テーマでは問題なくカラーを変更することが可能でした。
またインストールしたばかりでデフォルトテーマ(Twenty Twenty-Three)しか入っていないサイトもありましたのでこちらでも試してみましたが、変更可能でした。
※どちらもWPバージョンは最新の6.2.1です
なので、snow monkey関連の問題なのかなと思ったのですが…いかがでしょうか？
恐らく下記のトピックと同じかなと思うのですが、他のテーマでは発生しないでしょうか？
このにゅっと伸びるエフェクト、CSS 自体は書いてたから設定項目にも追加してあると思ったら無いですね…。
（↓Snow Monkey のベースになっている自作の CSS フレームワークには CSS がある）
これは Snow Monkey に入れる方向で検討します…！
徳本さん
なるほど！そういうことでしたか。いえいえ、こちらこそ読み取れず失礼しました。
それであれば下記のコードで全削除できると思うのですが、厳密なチェックはしていないのでご容赦くださいませ。
同じく1行表示の場合です。
.l-1row-header .p-global-nav .c-navbar__item :after, :before {
display: none;
}
当てたいスタイルまでは試せていませんが、参考になりましたら幸いです♪
esさん！！ありがとうございます。
後出しで申し訳ないのですが、このようなこと↓を実装したいと考えています。
ですので、できれば
.p-global-nav .c-navbar__itemのスタイルを全削除→該当のaタグにサンプルのスタイルを当てるということがしたいのです。。。
最初から言えば良かったです、申し訳ありません。
なるほどー、「コンテンツ部分のコンテナーの余白を削除」は設定項目を表示するための条件があるから、このためだけに毎回その手順を踏まないといけないのは面倒ですね…。
ちょっとスクショを。
一つ目が素のセクション。2つ目が背景色をつけたセクション。3つ目が素の段落ブロックです。で、1つ目の素のセクションはご指摘の通りコンテナーの左右余白分だけコンテンツが内側に入っています。
で、2つ目の背景色をつけたセクションですが、これは背景色があるからコンテナーの左右余白があるほうが見やすいかと思います。だから一見「サイドバーあり、かつ2カラム状態（サイドバーが折り返されていない）、かつ背景色がないときは左右余白をなくす」としたら良さそうですが、背景色は位置をずらす機能があるから、背景色がありでずらしてあるときは左右余白は無いほうが良いのか…？ 背景色はずらせるものとずらせないもの、2つ設定できるからその組み合わせのときはどうするのか…？ とか考えると結構よしなに左右余白を無くすのは難しい印象です（実はそういう時代もあったのですが、完全にコントロールできずにフォーラムでも指摘があったりしたため、よしなにするのは現状やめています）。
ということで、よしなにするのは難しかなと思うのですが、「コンテンツ部分のコンテナーの余白を削除」を表示させるために全幅にしてコンテナーの配置を設定して…みたいなのは大変なので、「コンテンツ部分のコンテナーの余白を削除」を無条件に設定できるようにしてしまったら少しラクになるかも…と思いました。そしてそのほうが実は便利そう。
背景色は全く使わないということであれば CSS で調整してもらうのが早いかなと思いますが、一応↑については軽く問題なさそうか確認してから作業しようと思います！
徳本さん
ざっくりと試してみたところでの回答で恐縮ですが、おそらくこの部分のpaddingを調整することで、意図するような感じにできるのではないかなと思います。
下記は、文字と線の余白を少し詰めて、横幅を少し広げた場合の例です。
.p-global-nav .c-navbar__item>a {
padding: 10px 30px 5px 30px;
}
※1行表示の場合です。
メニューの位置も連動しますので、その点はご留意くださいませ。
