[mk]

お世話になっております。ベクトルスタッフの松田と申します。
プラグインを利用してマウスオーバーで画像切り替えする方法は思いつきませんが、ブロックを組み合わせてマウスオーバーで画像を切り替える方法として、以下をお試しいただけたら幸いです。

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パターンライブラリへの追加を検討する可能性があります。

Attachments:

You must be logged in to view attached files.

[mk]

お世話になっております。ベクトルスタッフの松田です。
これまでのスレッドを元に、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;
}

[mk]

お世話になっております。ベクトルスタッフの松田です。
ご指摘の点を確認いたしました。お手数をおかけいたし申し訳ありません。
ただいま背景色の部分を対応いたしましたので、ご確認いただけますと幸いです。

なお、文字色や背景色は
[ナビゲーション] > スタイル　> [サブメニューとオーバーレイテキスト]や[サブメニューとオーバーレイ背景]
で変更することが可能です。

何卒よろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[mk]

ご返信ありがとうございます。

おっしゃる通り、今回連絡したケースは多くあるケースではないことや、通常なら一件も記事に紐づいていないタクソノミーは表示しない方がユーザーにも適切だと感じでおります。こちらを組み込むために何か別の機能を阻害してしまったりなどありましたらお手間もありますので時間を要さないです。

もし想定の通り対応コストが高くないようでしたら、大変お手数ですが急いではおりませんので、アップデートの折などで可能でしたらご対応いただけますと大変ありがたく存じます。

何卒よろしくお願いいたします。

[mk]

> 結局私の環境で再現しなかったのですが、
> 内容からしておそらくPHPのバージョンに関係なく発生するかなと思います。

そうなのですね。詳しくありがとうございます。
念の為再度、PHP7.4にして確認をしたところ、当方の環境ではPHP7.4では発生しませんでした。
使用しているプラグインの関係かはわかりませんが、PHP8からでしか発生しなかったので、
同じような人がいた場合の備忘録として書き残しておきます。

> まず All in One Seo Pack を利用している場合は停止して症状が改善するか確認してみてください。
> その他アーカイブページのタイトルを書き換えていそうなプラグインを使っていたら停止して症状が改善するか確認してみてください。

おっしゃる通り、All in One Seo Packやその他タイトルを書き換えていそうなプラグインを停止したら症状が改善しました。

> その上で、おそらくここを直せば解消するであろうという所の修正を Lightning Pro にしましたので、
> Lightning Pro 8.17.2 にアップデートしてみてください。

上記のプラグインを有効化した後、Lightning Pro 8.17.2 にアップデートしたところ、現象が解消されました。

この度は早々にご対応いただきありがとうございました。
引き続きよろしくお願いいたします。

[mk]

すみません、肝心なことを書き忘れておりました。
Warningが発生するタイミングはサーバーをPHP8に上げた時です。ちなみにサーバーはXserverで確認しました。
お手数ですが、よろしくお願いいたします。

[mk]

アップデート＆Lightning Video Unitを無効化し、確認したところ、動画の高さにピッタリになりました。
ご対応いただきありがとうございました！

[mk]

ご対応ありがとうございます。
VKお問い合わせセクションでイメージ通りの表示になっていることを確認いたしました。

[mk]

ありがとうございます。お待ちしております。

[mk]

有料プラグインの「Lightning Video Unit」を購入すると動画を入れられます。
「Lightning Video Unit」詳細ページ、機能紹介の説明文では

無料WordPressテーマ「Lightning」 用のプラグインです。

とありますが、Lightning Proでも使うことが出来ました。

使用時のイメージは詳細ページやデモページをご覧ください。

「Lightning Video Unit」詳細ページ
https://lightning.nagoya/ja/expansion/lightning-video-unit#_ga=2.210465424.441536349.1610590036-750776265.1584435099

[mk]

ただいまこちらで確認させていただきました。
早々のご対応をありがとうございました。

[mk]

よろしくお願いいたします。

[mk]

ご返信ありがとうございます。
デザインスキンはすべてⅡ系統で作業していました。

[mk]

ご返信をありがとうございます。

テーマをアップデートし、1. 気がついた点に書いた、気がついた時の流れで確認したところ、無事非表示トグルが外れないようになっていました。

この度はご対応いただきありがとうございました。
また何かありましたらよろしくお願いいたします。

[mk]

確認したところ、0.6.3で横スクロール表示がなくなっていることを確認しました。
ありがとうございました。

[投稿者]

投稿