対馬 俊彦
フォーラムへの返信
-
投稿者投稿
-
モバイル下部には「スクロールすると横からでてくるCTA」で電話番号を固定表示させているため、上部に全ての科目のボタンを固定で設置するのも画面が狭くなるので難しく…。
モバイルナビ上部ウィジェットは固定表示ではなく、ハンバーガーボタンをタップするとハンバーガーメニューの上に表示されますので、画面が狭くなるという心配はありません。
それでも11個のボタンは多いので、モバイルナビ上部ウィジェットにアコーディオンブロックを置くやり方がいいかもしれません。
Attachments:
You must be logged in to view attached files.「診療案内」(余白部分と「V」も含め)の行のどこをタップしても、
アコーディオンが下りてくるようにしたいです。診療案内ページを経由せずに、閲覧者がすばやく個々の診療科目の案内ページに辿り着けるようにしたい、ということが目的なのだと理解しました。
モバイルナビ上部 または モバイルナビ下部 のウィジェットにボタンを置く、ってのはいかがでしょうか?
Attachments:
You must be logged in to view attached files.検索フォームにマウスオーバーすると「検索フォームを編集」と表示されるボタン
このボタンは私のサイト(テーマは Lightning)では表示されていません。
検索結果に設置した検索フォーム下に表示される「編集」
こちらのボタンは私のサイトではフォームの直後に配置されていますので、
以下の CSS を書いて消すことができています。body.logged-in form.vk-filter-search + a.btn { display: none; }
横から失礼します。
VKパターンライブラリではないのですが、
私のサイトでも Lightning をアップデートしたら、
レイアウトが変わってしまったページがありました。調べたところ、/lightning/_g3/assets/css/style-theme-json.css
に以下の margin-block-end が追加されたことが原因でした。.wp-block-column[class*=wp-container-]>:is(p,ul,ol,dl), .wp-block-group[class*=wp-container-]>:is(p,ul,ol,dl) { margin-block-start: unset; margin-block-end: var(--vk-margin-element-bottom); }
このトピックの症状も同じ原因のようです。
以上、とりあえず報告させていただきます。
グリッドカラムカードアイテムを少なくしたものを固定ページで複数作って、
その複数の固定ページを VK 固定ページ本文 ブロックで読み込むようにしたら
この問題が解決するかもしれません。横から失礼します。
以下のように理解しました。
違ってたらご指摘ください。>質問者様[1] ページ先頭を表示しているときはグローバルナビを表示しない。
[2] スクロールするとグローバルナビが現れる。
[3] トップページだけ [1] [2] のようにしたい。[1] [2] だけでよいなら(すべてのページに適用するなら)、
.global-nav { display:none; }
[1] [2] [3] をやりたいなら、
body.home .global-nav { display:none; }
という CSS でいけそうです。
該当URL をシェアデバッガーで試したところ、
閲覧禁止を意味するレスポンスコード 403 が返ってきますね。この現象について Facebook の開発者コミュニティフォーラムでも話題になってますが、
[ 未解決 ] のままです。https://developers.facebook.com/community/threads/825654679324994/?locale=ja_JP
なんとなく、解決が難しいような…
なんとなく、放っておけば、そのうちに 403 が解消するような…
そんな気がします。← 根拠はないです。なんとなく経験的に…
Lightning G3 のトップページのスライドショーのフォントサイズの CSS は以下のようになっています。
/* スライドタイトル */ .ltg-slide .ltg-slide-text-title { font-size: clamp(16px,3dvw,32px); } /* スライドテキスト */ .ltg-slide .ltg-slide-text-caption { font-size: clamp(12px,2dvw,18px); }
とりあえず、
スライドタイトルの16px
スライドテキストの12px
の部分を書き換えればスマホ表示に反映されます。お時間があれば、VK Blocks のスライダーブロックを使ってみるといいと思います。
https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/vk-blocks-blocks/block-slider/
ちょっとだけ手間は増えますが、
Lightning 標準のスライドショーよりもできることがはるかに多いし、柔軟な設定が可能です。[ 解決済 ] となりましたが、横から失礼します。
ベクトルさんがまだ修正作業中でしたら、ご容赦ください。
今回の問題の原因は、
VK Blocks Pro 1.84 にアップデートすると
ブロックの カスタム CSS に入力した>
が>
に置き換わって出力されるようになったということなので、それを修正する必要があると思います。
カスタム CSS に
selector > p { font-size: 1.5em; }
と入力すると、VK Blocks Pro 1.83 までは
.vk_custom_css_1 > p { font-size: 1.5em; }
と出力されていましたが、1.84 になって出力が以下のようになりました。
.vk_custom_css_1 > p { font-size: 1.5em; }
※内容が伝わるように > を全角文字にしてあります。
Attachments:
You must be logged in to view attached files. -
投稿者投稿