うなこ
フォーラムへの返信
-
投稿者投稿
-
うなこモデレーターこんにちは。 少し確認したいことがあります。
固定ページの方で、見出しを「標準」「装飾無し」双方で試してみたのですが、反映されません。
とありますが、固定ページで使用している見出しブロックはサブテキスト付きの「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 設定」などで検索していただければ出てくるかなと思います。
- この返信は4年、 7ヶ月前にうなこが編集しました。
Attachments:
You must be logged in to view attached files.
うなこモデレーターこちらに詳しく載っておりました。
プラグインInvisible reCAPTCHAを使ってreCAPTCHA v3のバッジを邪魔にならずに表示させる方法もしくは「Invisible reCAPTCHA for WordPress 設定」などで検索してみて下さい。
うなこモデレーターテスト用サイトを確認しました。
カスタマイズ→「Lightningのモバイル固定ナビ」の「メニュー開閉ボタンの追加」にチェックが入っていますので、
下に固定されて出てくるメニューの中にハンバーガーメニューが含まれている状態です。もしヘッダーのロゴの右側にハンバーガーメニューを表示させたいのであれば
「メニュー開閉ボタンの追加」のチェックを外してみて下さい。あとは念のため、Lightning Proのテーマも最新版に更新してください。
いかがでしょうか。【追記】
ちなみにこのスレッドの最初のコメントに添付していただいたサイトの方で試してみるといかがでしょうか。(!important を付けた方をご使用ください。)Attachments:
You must be logged in to view attached files.
うなこモデレーターleft: inherit の後ろに「!important」をつけるとどうでしょうか。
【css解説】「!important」がついているプロパティが最優先して使用されます.vk-mobile-nav-menu-btn { right: 5px; left: inherit !important; }
- この返信は4年、 7ヶ月前にうなこが編集しました。
うなこモデレーター確認したところスマホサイズでボタンの上にsvgが乗ってしまっているのが原因のようでした。
区切りの設定のカーブを0で無効にすれば押せるようになりますが、
デザインが変わってしまうので、お急ぎでしたら追加cssなどに以下のcssを追加してみて下さい。※Outerブロック内のsvgファイルがクリックできなくなります。
SVGファイルでクリックするようなものがありましたら、ご注意ください。いかがでしょうか?
.vk_outer_separator svg{ pointer-events: none; }
- この返信は4年、 7ヶ月前にうなこが編集しました。
うなこモデレーター全く同じではないのですが、、似たようなレイアウトにするには
表示タイプを「メディア」にしてカラムを全て「1」に設定すれば一番近いかもしれません。LTG Media Postsと比べるとサムネイル画像とタイトルがやや大きくなりますので、
以下のcssで必要に応じて調整してみて下さい。
数値などはお好みの大きさに調整してください、いかがでしょうか?.mainSection .vk_post.media { padding: 1rem 0; } @media (min-width: 768px){ .mainSection .vk_post.media .media-img { width: 24%; } } .mainSection .vk_post.media .vk_post_title { font-size: 1em; } .mainSection .vk_post.media.vk_post-col-lg-12.media { padding: 1rem 0; }
- この返信は4年、 7ヶ月前にうなこが編集しました。
うなこモデレーターわたしのiphone8ではOuterブロック内に VKボタンでリンク設置したボタンは問題なく押せました。
ちょっと見てみないと詳しくわからないのですが、
もしかしたらなにか他の要素が邪魔しているのかもしれません。
差し支えなければ該当のサイトのリンクなど貼れますか?
うなこモデレーター過去の記事で、こちらに詳細が記載してありました。
・スライドナビゲーションの廃止
・メニュー展開ボタンの位置指定の廃止
https://lightning.nagoya/ja/archives/lightning-6-0モバイルのメニュー展開ボタンの位置指定はcssで解決できます。
子テーマのstyle.cssや 外観 > カスタマイズ の 追加CSS などに下記を追加してみてください。.vk-mobile-nav-menu-btn { right:5px; left:inherit; }
うなこモデレーター「PR Content」は現状は写真にキャプションは入らないので、代替案としては2つあります。
【代替案01】カラムブロックを利用する
「PR Content」ではなく「カラムブロック」を使用して「画像」「見出し」「段落テキスト」を入れて似たようなレイアウトを作る。【代替案02】cssの::after要素でimageタグの後に文字を入れる
●「PR Content」の右側の設定画面で一番下にある「高度な設定」を開き、追加CSSクラスにお好きなクラス名(添付画像参照)を入れて更新ボタンを押す。
●追加 CSSなどに以下のCSSを追加する。
※「キャプションです」の部分にお好みのテキストを入れてください。
※「PR Content」が複数ある場合は「高度な設定」の追加CSSクラスに別のクラス名を付けて
該当箇所(下のCSSで言えばpr01の箇所)を変更して文字などを変えてみて下さい。.pr01 .vk_prContent_colImg::after{ content:'キャプションです'; font-size: .75rem; display:block; text-align:center; margin-top:10px; }
少し手間がかかりますが、お試しください。
なにか他にいい方法があればいいのですが、、、- この返信は4年、 7ヶ月前にうなこが編集しました。
Attachments:
You must be logged in to view attached files. -
投稿者投稿