フォーラムへの返信
-
投稿者投稿
-
書き込んでいただいた CSS をインデントしてみました。↑
この CSS は問題なさそうに見えるので、おそらく「追加 CSS」内で、この CSS より前に記述している他の CSS に閉じミスがあるのだろうと思います。♥ 0Who liked: No userご紹介いただいたコードはsnow monkey blocksのほうの「メディアとテキスト」でよろしいでしょうか?
はい、そうです。
WordPressの追加CSSに書いてみたのですが、やはり画像の上下に余白が生まれてしまいました…
画像自体に白ベタの範囲があるとか、別の CSS が影響しているとか、僕の認識が間違っているとかが考えられそうです。デベロッパーツールで要素を選択して、具体的にこの部分の余白というのを明示していただけると CSS が提示しやすいです!
こちらは、セクション(ブロークングリッド)の場合は余白が無いのでデフォルトで余白の無い画像、たとえば添付画像のように下の余白が無いものだとその次のセクションや項目とピッタリくっつく、と言う理解でよろしいでしょうか?
前後ブロック間の余白は、基本的には1行分空きます。段落と段落の間に自動的に余白が空くのと同じで、セクションの前後にも空きます。例外として、全幅ブロックと全幅ブロックの間には余白が空きません。
ブロック設定のところにパディングの項目があったので0にしたところこちらでピッタリくっつきました。基本的にはセクション(ブロークングリッド)で対応すれば良さそうでしょうか…?
完成形が想像できていないのでちょっとはっきりとは言えないのですが、基本的にはコードの記述量が少なく済む方法&ご自身がやりやすい方法でやるのが良いと思います。
♥ 0Who liked: No userはい、それで大丈夫です!
ソースを確認して、追加 CSS に入力されているであろう CSS を検証してみたところ、上記のエラーがでました。閉じミスや括弧が全角になっていないかなど再度確認してみてください。
※インデントを丁寧にやると閉じミスは発見しやすいと思います。♥ 0Who liked: No user例えば追加 CSS に入力している内容に全角スペースが含まれていてそこで CSS が読み取れなくなっている、というようなことは可能性としてあるかもしれません。
実際のページの URL を共有いただければ、僕のほうで確認してみることも可能です。
♥ 0Who liked: No userこちらのアクティブなメニューに対する背景色、文字色は追加CSSで設定する必要があるのでしょうか?
いえ、カスタマイザー→デザイン→ヘッダー→グローバルナビゲーションのカレント表示エフェクトの設定に応じて、自動的に装飾がおこなわれます。
もしグローバルナビゲーションの文字色や、リンク色などを CSS で独自にカスタマイズされているのであれば、その影響で装飾が上書きされて、というのは考えられるかもしれません。
コードをコピペしましたが何も変化がありません。
これはどこにコピペされましたかね? 独自の CSS ファイルに追加している場合は、そこではなくてカスタマイザー→追加 CSS に追加するとどうでしょうか?
♥ 0Who liked: No user「メディアとテキスト」や「セクション(ブロークングリッド)」はある程度の決まった見た目のものを簡単に実現できるというブロックになります。このようなブロックに汎用的(ユーザーの多くが一般的に利用する)でない設定をブロックに持たせるのは混乱を招くので、独自にブロックスタイルを追加したり、CSS で調整してもらうのが良いかなと思います。
メディアとテキストブロックだとこういう感じでしょうか。
※下記のサンプルは全てのメディアとテキストブロックに反映されるため、本来は追加 CSS クラスを記述してそれをセレクタにしたり、ブロックスタイルを追加して CSS を書くのが良いです。.smb-media-text__contents-wrapper { margin: 0 !important; }
セクション(ブロークングリッド)については、PC では
margin
という意味での余白はないので、具体的にどういう感じが想像できませんでした。すみません…。♥ 0Who liked: No user固定ページが複数あるサイトで、各ページに遷移するリンクをメニューに設定しています。
この「メニュー」というのは、グローバルナビゲーションに割り当てているメニューのことでしょうか?
例えばこのサイトのグローバルナビゲーションは下記のメニュー項目が設定してあり、
ホーム Snow Monkey とは ドキュメント パターンライブラリー コミュニティ
「ホーム」「Snow Monkey とは」「ドキュメント」「コミュニティ」は固定ページになっていて、遷移するとそのメニュー項目の文字色が変わっているのが確認できると思います。グローバルナビゲーションであれば、このように自動的にカレントページのメニュー項目の色が変わるようになっているのですが、それがなっていない、ということでしょうか?
♥ 0Who liked: No userより正確に言えば、正しく対応しているか検証されていない、ということになります。
下記のようなテーマを使うのが一番安全なのだろうなと思います(こちらも未検証ですが)。
♥ 0Who liked: No userこれはカスタマイズのレベルではかなり難しい気がして、多分スライダーを実現している元の js のライブラリのほうに手を入れないといけないのかなという気がします。まずはできるかどうかの検証から必要だと思うので、今後の検討課題とさせてください!(GitHub に issue は立てました)
♥ 0Who liked: No userSnow Monkey をリリースした当初に多少 Elementor 用に表示を調整するコードを追加したりはしたのですが、やはり Elementor は Elementor に正しく対応したテーマを使ったほうが良いと思うので、近年は動作確認をほぼしていません。
とりあえず Elementor を入れてみて、正しく動作するか確認してみるのが良いとは思いますが、長期的に考えれば Elementor に正しく対応したテーマを使用するのが良いと思います。
♥ 0Who liked: No user良かったです! トピックのクローズをお願いします。
♥ 0Who liked: No userあれ、すみません、ちょっとよくわからなくなってきました^^;
「テキストは表示されるようになってます!」というのは、もともとは表示されていなかったけど、僕が #134633 の返信で書いたコードを追加したら表示されるようになったということですかね? だけど「String(10)〜」みたいなのが邪魔…みたいなことでしょうか?
もしそういうことであれば、トピックを立てた段階の動いていないコードは消して、僕が #134633 の返信で書いたコードの中の
var_dump(〜省略〜);
を全部消してください。♥ 0Who liked: No user -
投稿者投稿