フォーラムへの返信
-
投稿者投稿
-
特に「ノーマル」については「要素間の余白」ではなく「セクションブロック内側の余白」とお伝えした方が正しかったと気付きました。失礼
添付いただいた画像の例であれば、1枚目の形で「セクション」の下部 padding を0にするよりは、2枚目の「セクション」の中に「セクション(ブロークングリッド)」を入れるほうが素直な形だと思います。
この場合は適切な余白だと思いますが、セクションの中にセクションを入れることになることから、状況によっては手間が増えたり他に影響が出たりする可能性もあるように思うため、できれば避けた方がよいのかなと思っています。
状況によってはなにかあるかもしれませんが、こちらが意図しない崩れが発生するかどうかという点でいえば、基本的には大丈夫だと考えています。
また2つの「ブロークングリッド」の間も、「全幅」以外では少し余白が入ります。このままでもよい場合が多いとも思いますが、「なし」や「幅広」の時にも2つをぴったりとくっつけたいケースもあるように思っています。
前述したように「全幅に後続する全幅」以外の場合は余白が入ります。「「なし」や「幅広」の時にも2つをぴったりとくっつけたいケースもある」とのことで、どこかに設定を追加するのも良いかなと思ったのですが、どこにどういう設定をもたせるかが悩みますね。各ブロックに設定を持たせるか、要素間余白調整用のブロックを別途つくるか…。
簡単に済ませるなら下記のような CSS を追加して、
.u-margin-top\:0 { margin-top: 0 !important; }
添付の画像でいえば画像が右寄せのセクション(ブロークングリッド)ブロックの追加 CSS クラスにクラスを追加するかですね…。
このように、ページ全体のフォントではなく、カスタマイズ画面の項目のフォントが、すべて明朝体になってしまう、という意味でした。
カスタマイザー → 追加 CSS に追加してみましたが再現しませんでした。CSS を追加したのはカスタマイザーではなくて独自の CSS ファイルですかね? 独自の CSS ファイルであれば、セレクタを調整するのが良いと思います(セクションタイトルだけを明朝にしたいのであれば
.smb-section__title
とか)。♥ 0Who liked: No user現在は「ノーマル」を除いた「ブロークングリッド」「サイド見出し」「背景画像/動画」では、高さを「フィット」にしていてもセクションの設定を「全幅」にすることで希望の状態にはなるのですが、「なし」「幅広」では余白が入ります。
全幅に後続する全幅は上余白が0になるようになっています。これは通常幅・幅広の場合は後続の要素をくっつけずに普通通りに並べる、幅広に後続する幅広の場合は要素をくっつける、という表示が一般的かなと思ったのでそういう仕様にしています。通常幅・幅広のときでもくっつけるという想像があまりできていないのですが、参考までに実際のページを見せていただくことってできますか?
なお「ノーマル」では「全幅」にしても余白がゼロにならないため、上記の「ゼロ」設定に加えて「ノーマル」でも他のセクション同様の仕様になると、なおありがたいところです。
「セクション」ブロックも、全幅に後続する全幅セクションブロックは上余白が0になります(要素間の余白は後続する要素の
margin-top
で実現されています)。これはセクションに限らずどのブロックでも同じになります。なので「「ノーマル」でも他のセクション同様」というのはなにか独自に追加された CSS が影響していたりしないのかなと思うのですがどうでしょうか?
タイトルのみ明朝体にしたく、フォント設定として「h1, h2, h3, h4, h5, h6 {font-family: serif;}」をCSSに書き入れているのですが、そうするとカスタマイズ画面のフォントもすべて明朝体になってしまいます。
カスタマイザーを開き追加 CSS に上記の CSS を追加してみたのですが、意図したとおり h1, h2, h3, h4, h5, h6 だけが明朝体になりました。「すべて」というのはこれらの見出し以外のすべての要素、という意味ですかね?
♥ 0Who liked: No userなるほど。これ、Snow Monkey 自体に変更をいれて、例えばこんな感じにしたほうが良さそうですかね?
<span class="c-hamburger-btn__label"> <?php echo wp_kses_post( $args['_label'] ); ?> </span> <span class="c-hamburger-btn__close-label"> <?php echo wp_kses_post( $args['_close-label'] ); ?> </span>
.c-hamburger-btn[aria-expanded="true"].c-hamburger-btn__label { display: none; } .c-hamburger-btn[aria-expanded="false"].c-hamburger-btn__close-label { display: none; }
Contact Form 7 は
document.addEventListener
とドキュメントが対象になっていますが、Snow Monkey Forms はフォームが対象になっているのが違う点です。const form1 = document.querySelector( '#snow-monkey-form-1' ); form1.addEventListener( 'smf.submit', ( event ) => ga( ... ) ); const form2 = document.querySelector( '#snow-monkey-form-2' ); form2.addEventListener( 'smf.submit', ( event ) => ga( ... ) );
みたいな感じではないでしょうか。
Snow Monkey Forms のカスタム DOM イベントは Google アナリティクスにデータを送信する専用のものというわけではないので、アナリティクスに送信するデータにフォームを識別できる情報を含んでおけば識別できたりしないですかね? 僕はアナリティクスのイベントのことは全然詳しくないので想像ですが…。
多分↓の関数で送信するのだと思いますが、
「eventLabel」をフォームごとに別々のものにするとか。
Snow Monkey Forms のフォーム自体の識別は、フォームについている ID(例:
snow-monkey-form-49283
)でできると思います。実は後から車ぶつけられて、これからの病院です。
わ、まじですか!気をつけててもぶつけられたらどうしょうもないですもんね…。何事もなければ良いですね><
♥ 0Who liked: No userどの部分についてのことか書かれていなかったので一番上部のセクションの背景画像かなと思ったのですがあっていますか?
一応そこをみてみたら、PC 用にもスマホ用にも同じ画像(画像ID 2560)が設定されているようです。
試しにスマホ用の画像のアップローダーで真っ黒な画像とかぜんぜん違う画像を設定してみたらどうなりますか?
♥ 0Who liked: No user2022年4月11日 12:08 PM 返信先: jquery.cookie というcookie を扱うライブラリを使い、サイトにアクセスした年月日を取得して同じ日付で2 回目以降ならローディング画面を非表示にする。 #102822wp_enqueue_script( 'cookie', // cookie 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js', ['jquery'], true );
だと第4引数(バージョン指定)が
true
になっちゃうので、wp_enqueue_script( 'cookie', // cookie 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js', ['jquery'], false, true );
みたいな感じかなと思います。
♥ 0Who liked: No userv15.0.2 で修正しました!
♥ 0Who liked: No user仕様について「キーワードが日本語の場合と英語の場合で挙動が違うのか」
こちら問い合わせた結果、「テーマ側の担当範囲の話である」とのことでした。
調べてみました。これ、TwentyTwentyOne でも英語検索だと2ページ目以降が404ステータスになる(けど
index.php
があるからページは表示される)ので、テーマではなくてプラグイン側が怪しいと思います。一応プラグインも見てみたのですが、Toolset 関連のプラグインが複数あり、それぞれが結構複雑でちょっとどこでどうなっているかわかりませんでした。ということで、Snow Monkey は
index.php
が空なので、やはり前述のコードを追加するのがベストかなと思います。下記のコードを My Snow Monkey か子テーマの
functions.php
に追加してみてください。add_filter( 'snow_monkey_template_part_render_template-parts/header/1row', function( $html ) { $html = str_replace( 'u-invisible-md-down', 'u-invisible-sm', $html ); // タブレット以下で非表示 を スマホサイズでのみ非表示に変更 $html = str_replace( 'u-invisible-lg-up', 'u-invisible-md-up', $html ); // PC サイズ以上で非表示 を タブレットサイズ以上で非表示に変更 return $html; } );
♥ 0Who liked: No userこちらの環境では確認できなかったので直接見たほうがなにかわかるかなと思いまして。見れないということであれば状況をこちらで再現したいのですが、セクションの中に入れているコンテンツ(ブロックやコンテンツ量によるのかもなので)、セクションの設定を教えてもらえますか?
また、独自に CSS を追加したりカスタマイズしている場合、それを外しても改善しないでしょうか?
♥ 0Who liked: No user -
投稿者投稿