うなこ
フォーラムへの返信
-
投稿者投稿
-
うなこモデレーターこんにちは、ちょっとうまく解釈できていないかもしれないのですが、、、
メニューのサブメニューを赤色の透過にしたいということでしょうか。
もしそうでしたら以下のcssでいかがでしょうか。.gMenu>li>ul.sub-menu { background-color: transparent; } .gMenu>li>ul.sub-menu li{ background:rgba(211,48,48,0.8)!important; } .gMenu>li>ul.sub-menu ul.sub-menu li{ background-color: transparent !important; }
うなこモデレーターおそらくですが…
iOSではbackground-attachment:fixed;が効かないようで、これが問題ではないかなと思っております。こちらに詳細が書いてありました。
background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょう解決策ではないのですが…汗
タブレットサイズ以下では「固定」にせず、標準のスクロールにする方法はいかがでしょうか?
こちらですと固定ではなくなってしまいますが… 背景画像は見えるようになります。追加cssか子テーマでしたら子テーマのcssに以下のcssを追加してみて下さい。
@media screen and (max-width: 768px){ .wp-block-vk-blocks-outer.vk_outer-bgPosition-fixed { background-attachment: scroll !important; } }
※@media screen and (max-width: 768px) の数字はお好みのサイズに変えていただいてかまいません。
うなこモデレーターOuterブロックの「背景設定」項目から画像を変更できるかと思います。
以下のリンクをご参照ください。
Outer(Pro版のみ)
うなこモデレーター取り急ぎご報告いたします。
わたしは Google Chrome で確認しておりました。
↓以下の環境で確認したところ、症状を確認できました。
- Edge → 画像がはみ出す現象が確認できましたが、最新版を入れましたところ改善
Edge最新 - Firefox(74.0) → 画像がはみ出す現象が確認できました
のちほどあらためて確認します。
うなこモデレーター1)VK BLOCKS の PR Content ですが、左右が等幅だと思うのですが、左右の幅を自由に調整できないでしょうか。
追加CSSや子テーマのcssに以下を追加するといかがでしょうか。
全部のPRコンテンツに反映されますので、もし個別で指定したい場合は高度な設定項目に追加 CSS クラスを追加して調整してみて下さい。@media (min-width: 576px){ .vk_prContent .vk_prContent_colImg{ width: 30%; max-width: 30%; flex:auto; } .vk_prContent .vk_prContent_colTxt{ width:70%; max-width: 70%; flex:auto; } }
2)画像を設置した際、そのままのサイズで表示されるようで、PR Contensの画像が上のコンテンツと重なって、結構使いづらいです。
こちらの現象はわたしの環境では見られませんでした。
VK Blocks Proは最新バージョンですか?
そのままページを表示するとはみ出しますか?Attachments:
You must be logged in to view attached files.
うなこモデレーターモバイルで画像が重複しています。(サクションの部分)
3つの画像が並んだギャラリーの下の部分のことで合っていますか?
ブラウザの検証ツールで確認しましたところ、ギャラリーの下にPタグが入っておりその中にimgが挿入されておりました。
ちょっと中を見てみないとわからないのですが、こちらのPタグの中のimage画像が不要な場合は、管理画面からこのimage部分を削除すれば直る気がします。
管理画面から該当の部分は確認できますか?Attachments:
You must be logged in to view attached files.
うなこモデレーター該当URLを確認したところ、私のPCの環境ではロゴは左、メニューは右にきています。
iPadで閲覧時はロゴとメニューが中央にきています。
PCで閲覧時でしょうか?
うなこモデレーターご連絡ありがとうございます。
なるほど、なんとなくわかった気がします。
カスタマイズ → Lightning デザイン設定 → 見出しデザイン に設定した見出しデザインが
固定ページに反映されていないということでいいでしょうか。
(管理画面上ではなく、実際の表側のページをみると見出しデザインが変わっていませんか)
カスタマイズのLightning デザイン設定から設定する見出しデザインはページ全体の見出しデザインとなります。添付していただいた写真の、固定ページから「見出しブロック」で見出しのスタイルを変更すると、そちらが優先して上書きされますので… 例えば「装飾無し」にすると装飾が無くなるはずです。
もし、カスタマイズ → Lightning デザイン設定 の見出しデザインにしたい場合は、
固定ページの「見出しブロック」の見出しスタイルは何もしなくても反映されるはずです。
もし、見出しスタイルを選択してしまった場合は一度、添付画像の「ブロックスタイル変更」から「段落」ブロックに変更し、そのあと「見出し」ブロックに戻してください。いかがでしょうか。
(質問の意図が違っていましたら教えください。)Attachments:
You must be logged in to view attached files.
うなこモデレーターこんにちは。 少し確認したいことがあります。
固定ページの方で、見出しを「標準」「装飾無し」双方で試してみたのですが、反映されません。
とありますが、固定ページで使用している見出しブロックはサブテキスト付きの「VK Blocks」の見出しをご利用でしょうか?
それとも通常のGutenbergの見出しブロックでしょうか?あと、追加CSSや子テーマでカスタマイズなどされていますか?
うなこモデレーター添付画像拝見しました。
グローバルメニューを左寄せにするより、ロゴとメニューを中央寄せにする方がバランスが良い気がします。
下のcssはロゴとグローバルナビを中央寄せにするcssとなります。
いかがでしょうか
もし左寄せが良い場合はまた教えてください。※1200px以上のサイズで適応されます。
@media (min-width: 1200px){ .navbar-header { float: none; text-align: center; } .navbar-brand { text-align: center; float: none; } .gMenu_outer { float: none; width: 100%; } ul.gMenu { float: none; position: relative; left: 50%; display: inline-block; text-align: center; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } }
うなこモデレーター応急処置としまして、
追加CSSに以下のCSSを追加するといかがでしょうか?
それでもはみ出す場合はまた教えてください。.vkvu_wrap.move_auto_reduce video { width:100vw; } @media (max-width: 1024px){ .vkvu_wrap.move_auto_reduce video { width:100vw; } }
うなこモデレーターPaleⅡはヘッダー、ヘッダー上部(最上部)ともメインの背景色と同じ色が以前からの仕様
ということでよろしいですか?Paleの説明ページを確認したところ、以前から同じ色の仕様だったと思います。
もし.headerTopの背景色を薄いグレーに変更する場合は追加CSSや子テーマのcssに以下を追記で変更できると思います。
半透明の設定はお好みで変更してください。@media (min-width: 992px){ .headerTop { background: rgba(0,0,0,.06); } }
うなこモデレーター左に寄せるのはプラグイン Invisible reCAPTCHA for WordPressで設定しているようです。
管理画面の設定→Invisible reCaptcha Settingsから添付画像の「Badge Position」を「Bottom Left」で左によると思います。プラグインの設定の仕方はご案内したページか、もしくは「Invisible reCAPTCHA for WordPress 設定」などで検索していただければ出てくるかなと思います。
Attachments:
You must be logged in to view attached files.
うなこモデレーターこちらに詳しく載っておりました。
プラグインInvisible reCAPTCHAを使ってreCAPTCHA v3のバッジを邪魔にならずに表示させる方法もしくは「Invisible reCAPTCHA for WordPress 設定」などで検索してみて下さい。
- Edge → 画像がはみ出す現象が確認できましたが、最新版を入れましたところ改善
-
投稿者投稿