mk
フォーラムへの返信
-
投稿
-
お世話になっております。ベクトルスタッフの松田です。
インラインにて失礼します。> VK Blocks Proは有効化されているのですがパターンライブラリの
> 「マウスオーバー(オンマウス)で画像を切り替え」を使おうと固定ページへ貼り付けたものの
> 6種類の動きがあるところ全て何の動きもなく一瞬で画像が切り替わるだけです。
> カスタムCSSがあるブロックパターンの場合、ブロックパターンを張り付けるだけでは動作しないのでしょうか？カスタムCSSが完全に効いていない場合、画像がただ上下に並んでいる状態です。
そのため、切り替わり方に違いがないものの、画像が切り替わるということは、カスタムCSSが効いていないということはございません。
お客様が確認したブラウザで今一度こちらでも同様の確認したところ、パターンライブラリと同様の挙動を確認できました。(WordPressやVK系統のプラグインは最新ということですので)まずは
– ブラウザやPCのアップデート等を行っていください。
– さらに症状が発生する該当のサイトでプラグインを一つずつ止めたりしてみてください。
– theme.jsonを有効にしていない場合、以下のURLを参考に有効にしてみてください。
(注:ユーザー独自に追加したCSSで .wp-block-group__inner-container に対して装飾をつけている部分については表示が崩れる可能性がありますので、事前に確認よろしくお願いいたします。)また、もしパターンを貼り付けた状態のお客様のサイトURLをご案内いただけるようでしたら、こちらの環境でもお客様のお伝えいただいた通りの症状が発生するかの確認が可能です。
よろしくお願いいたします。
ご返信ありがとうございます。
今回のご連絡を受けて、マウスオーバー(オンマウス)で画像を切り替え用のパターンを作ってみました。
こちらからお好きなものを使っていただけたら幸いです。
お世話になっております。ベクトルスタッフの松田です。
そちらの現象ですが、ライセンスキー入力ページの左側にある「更新の再取得」というテキストリンクを押すと「VK Blocks Pro : ライセンスキーが登録されていません。」が消えると思います。
詳しい位置は画像をご参照ください。お手数ですが、よろしくお願いいたします。
スクリーンショットをありがとうございます。
ただ、スクリーンショットをいただいた部分が以前よりご連絡いただいたいる部分のみであります。
スクリーンショットを求めている理由としまして、
– shさんが何を実現したいのか(確認済みではありますが、今一度認識を合わせたいため)
– shさんが何にお困りなのか(「コンテント幅を使用するインナーブロックが設定できない状態」が確認できません)
を目視で確認できるためです。現在の状態はshさんが見ている画面より限定的な状態での判断となってしまいます。色々な影響が考えられるため、可能であれば横並びブロックを囲うグループウィジェットを選択した状態で、ブラウザの画面全体をスクショいただければと思います。テキストで伏せたい部分はお手数ですが、加工してアップしてください。
よろしくお願いいたします。
ご返信ありがとうございます。
恐れ入りますが「グループのレイアウト設定がない」との記載ですと色々な状況を想定できます。
そのため、スクリーンショットをあげていただいたり、どこまでを行なっていただけたのかなど、詳しい内容をご共有くださればスムーズな解決につながります。
フォーラムでご連絡くださる際はご協力いただけたら幸いです。よろしくお願いいたします。
お世話になっております。ベクトルスタッフの松田です。
> 横並びブロックを左揃えのまま中央配置したいです。
について、画像等ありましたらイメージがしやすいのですが、こちらの憶測で返信いたします。まず実現したい状態についての確認ですが、画像1枚目の状態が実現したい内容になりますでしょうか？
画像1枚目が実現したい内容であることが前提ですが、以下で実現できると思います。(画像2枚目参照)
①横並びブロックをグループブロックで囲う
②レイアウト > 「コンテント幅を使用するインナーブロック」をオン
③コンテンツの幅を指定
④中央配置もし上記と異なるようでしたら、お手数ですが詳しい説明をお願いします。
よろしくお願いいたします。
ご返信ありがとうございます。よろしくお願いいたします。
ひとまずこちらでトピックを閉じさせていただきますので、また何かございましたら改めてトピックをお立ち上げくだされば幸いです。
引き続きよろしくお願いいたします。お世話になっております。ベクトルスタッフの松田です。
以下インラインにて失礼します。> ①『tel:〜』が機能せず
> →何も反応がないこちらの機器で確認したところ、スマホ(iOS/Safari、Chrome)、PC(Mac/Safari、Chrome、Firefox)ともにtelのリンクで電話発信を行えるようになっていました。
特記事項の通り、一部のスマホで起こっている現象ということですので、下記のようにGoogleアプリの仕様の問題の可能性があります。以下は2023年10月、11月、2024年2月のGoogleコミュニティのスレッドで、同様の現象がGoogleアプリにて複数起こっているようです。
https://support.google.com/websearch/thread/241708246/a-href-tel-%E9%9B%BB%E8%A9%B1%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8Cgoogle%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%81%8B%E3%81%91%E3%82%8C%E3%81%AA%E3%81%84?hl=ja
https://support.google.com/websearch/thread/238822274/iphone%E3%81%AEgoogle-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E3%81%A6%E9%9B%BB%E8%A9%B1%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84?hl=ja
https://support.google.com/websearch/thread/259202666/%E9%9B%BB%E8%A9%B1%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8C%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B?hl=ja> ②ハンバーガーメニュー部分のTel部分のテキストが表示されない（添付画像参照）
> →テキスト部分が真っ白になって表示されないこちらの機器で確認したところ、スマホ、PCともにtelのリンクのテキスト部分が黒で表示されており、添付画像のようにはなりませんでした。
もしかしたら何かしらのキャッシュ等が効いているかもしれません。この現象が起きている方はmorisacさん、もしくは、morisacさんがお問い合わせを受けたお客様だと思いますので、皆様のお手持ちのデバイスでキャッシュ等を削除してから確認してみてください。もし現在でも同様の状況となる場合、詳しい状況(デバイス、ブラウザ等)をお知らせいただけたら幸いです。
よろしくお願いいたします。
お世話になっております。ベクトルスタッフの松田です。
この度は VK Blocks Pro のご利用ありがとうございます。
ご質問の内容については、下記をご参照ください。もし上記で解決が難しい場合は、お手数ですが具体的なご状況をお知らせいただけたら幸いです。
こちらで解決しましたら、その旨お知らせいただければと思います。よろしくお願いいたします。
ご連絡をありがとうございます。
ソースが見られないので現状からの想定ですが、以下のCSSで対応できるかもしれません。
.site-body-bottom .widget { margin-bottom: 0; }再度となりますが、ご確認のほどよろしくお願いいたします。
ご確認をありがとうございます。
そちらの現象については過去のフォーラムで似たようなトピックスがありましたのでお役立ていただけるかもしれません。ご確認いただけたら幸いです。
よろしくお願いいたします。お世話になっております。
ベクトルスタッフの松田です。まずコラムページの設定について確認させてください。
おそらくですが、[設定] > [表示設定] > [ホームページの表示] > [投稿ページ] に「コラム」という固定ページ設定し、その場所にコラム記事の一覧が出るようにしている状態かと思います。
その固定ページ「コラム」に「LINE、メール、電話での問い合わせ（黒色帯）」、およびその下の「社名やtwitterボタン（青色帯）」を設定しているのではないでしょうか。上記の前提での返信となりますが、上記のように固定ページ「コラム」を設定している場合、WordPressの仕様で固定ページの本文に設定したブロックは出てきません。
その代わりに[外観] > [ウィジェット] > [フッター上部]にて「LINE、メール、電話での問い合わせ（黒色帯）」、およびその下の「社名やtwitterボタン（青色帯）」を設定してみてください。コラムページにも表示されるようになると思います。(画像参照)
ちなみに、フッター上部に上記を設定した場合、すでに他の固定ページで設定している上記の2つのブロックが二重で出てしまいますので、各固定ページから削除いただければと思います。もし前提が異なっているなどありましたら詳しくお伺いできればと幸いです。
ご確認のほど、よろしくお願いいたします。お世話になっております。ベクトルスタッフの松田と申します。
プラグインを利用してマウスオーバーで画像切り替えする方法は思いつきませんが、ブロックを組み合わせてマウスオーバーで画像を切り替える方法として、以下をお試しいただけたら幸いです。1. 画像ブロックで2枚の画像を用意
2. 画像ブロックの [設定] > [アスペクト比] を揃える(画像1枚目参照)
3. 2枚の画像をグループブロックで囲む(画像2枚目参照)
4. グループブロックのカスタムCSSに以下をコピペ(画像3枚目参照)selector { position: relative; } selector > .wp-block-image:first-of-type, selector > .wp-block-image:last-of-type { transition: .1s; } selector:hover .wp-block-image:first-of-type { opacity: 0; } selector .wp-block-image:last-of-type { opacity: 0; position: absolute; top: 0; margin-block-start: unset !important; } selector:hover .wp-block-image:last-of-type { opacity: 1; } /* 管理画面用 */ selector.block-editor-block-list__block { position: unset; } selector.block-editor-block-list__block .wp-block-image { opacity: 1 !important; }5. 1〜4までの状態でプレビューすると、画像4枚目のようにオンマウスで切り替わると思われます。(gif動画ですが動かなかったらすみません。)
スマホの時はオンマウスの代わりに画像と画像の外側をタッチすることで切り替わるようになってます。※上記ですが、もしご活用いただけそうでしたら、VKパターンライブラリへの追加を検討する可能性があります。
お世話になっております。ベクトルスタッフの松田です。
これまでのスレッドを元に、CSSを調整してみました。お試しくださいませ。@media (max-width: 991.98px){ .site-header-container { overflow: visible; } .global-nav { display: block; } .global-nav--layout--penetration .global-nav-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); } .global-nav-list>li .global-nav-name { width: 100%; white-space: wrap; } .global-nav-list>li>a, .device-mobile .global-nav-list>li { padding: 1em; } .device-pc .vk-menu-acc li.menu-item-has-children>a { padding-right: 1em; } .device-mobile .global-nav-list .acc-btn { top: 9px; } } .vk-mobile-nav-menu-btn { display:none; }
