[対馬 俊彦]

私が誤解していたかもしれません。

増田さんがご希望のレイアウトは添付画像のようなものだと、
いま理解しましたが、合っていますでしょうか？

もし私の理解と違っていたら、できればご希望のレイアウトを図示していただきたいです。
その方がうなこさんも私も明快で的確な回答を出せると思います。

もし私の理解が合っているなら、

静止画をトップカバー部分に入れる予定で、Katawaraスライドウィジェットエリアに仮画像を入れた

この時点で最適なやり方を選んでいません。

最初から用意されているスライドショーを使って、以下のようにするのがベストです。

・1枚目のスライド画像を差し替える。
・1枚目のスライドで リンク先 URL、スライドタイトル、ライドテキスト の入力欄を空にする。
・2枚目以降のスライド画像を削除する。

今回はうなこさんのOuterProのやり方を使いたいのですが…

うなこさんの Outer ブロックのやり方も、2カラムのレイアウトとは相性が悪いです。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

Lightning 14.0.17 / Lightning G3 Pro Unit 0.2.4
にアップデートして修正されたことを確認いたしました。

どうもありがとうございました。

[対馬 俊彦]

1年前にベクトルさんから Outer ブロックの背景パララックスを廃止したい旨の書き込みがありました。

Outerブロックの背景パララックス廃止についてのご相談

G3 になってパララックスが廃止になったのかもしれません。

ベクトルさんが廃止したくなるほど手間がかかる作業ですから、
Outer ブロックをなんとかしてパララックス動作をさせるのはあきらめた方が賢明です。

1年前、私が代替方法を投稿させていただいたページがありますので、ご参考にどうぞ。

Outer ブロックの背景色の表示不具合と代替方法 (Lightning Pro 4.6.0)

Outer ブロックには カバー 固定 という設定があります。

私は個人的にはパララックスの代わりに カバー 固定 で十分と思っていますが、
制作依頼をいただくお客様からのご要望でパララックスが必要なときがあります。

そのときには上記ページに書いたやり方で作っています。

[対馬 俊彦]

> 画面に合わせて表全体が小さくなるようにするにはどうしたらようでしょうか？

ご希望に合わないかもしれませんが、表を横スクロールさせる方法もあります。

手順は以下の通りです。

1. グループブロックを作成する。
2. グループブロックの 追加 CSS クラス に x-scroll と入力する。
3. 表を入力したクラシックブロックをグループブロックの中に入れる。
4. 以下の CSS を追加する。

div.x-scroll {
overflow-x: auto;
}
div.x-scroll table {
white-space: nowrap;
}

CSS に関する手順の参考になるページです。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[対馬 俊彦]

Lightning G3 で新規に作ったサイトの場合、
先ほど回答させていただいた通りに更新できました。

私のテストサイトで Lightning Pro から G3 に移行するパターンで試したところ、
ご指摘の通り、更新できない現象が起きました。

設定画面を確認したところ、この現象の原因はライセンスキーでした。

G3 に移行した場合、[設定] ⇒ [Lightning G3 Pro Unit 設定] を開いて
ここにライセンスキーを再度入力しないと更新が有効になりませんでした。

これが原因の可能性がありますので、ご確認ください。

[対馬 俊彦]

参考情報です。

マイアカウントからダウンロードした Lightning G3 Pro Unit はたしかにバージョン 0.1.4 でした。

WordPress 5.7.1 / Lightning 14.0.15 のサイトにアップロードしたところ、
添付画像のように更新のリンクが表示されて 0.2.2 にアップデートできました。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

さっそくアップデートしていただき、ありがとうございます。

Lightning G3 Pro Unit 0.2.1 にアップデートして、
サイトのトップへのリンクが設定されたことを確認いたしました。

修正が必要と思われる部分がありますので、報告させていただきます。
以下の URL と添付画像をあわせてご参照ください。

HOME

■ ロゴがグルーバルナビの下にはみ出す

ヘッダーロゴ画像のサイズを推奨の 280x60px にしてみましたが、
スクロール時に少しはみ出してしまいます。

■ スマホにロゴが表示される

スクロール時にヘッダーロゴ画像が現れてしまいます。

昨日は夜遅くまで作業していただき、申し訳ない気持ちです。
私は急ぎませんので、ぜひお体を大事になさってください。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

いつもお世話になっています。

VK Blocks Pro 1.3.6 にアップデートして、Tree shaking を有効化してもテーブルのスタイルが正しく表示されることを確認いたしました。

どうもありがとうございました。

[対馬 俊彦]

（汗）

ベクトルさんなら、即「0.2.1 にアップデートしました!」との回答をいただけそうだと思って、HTML まで見ないで気軽に要望を出しましたが、background-image になっているんですね。

きっと私以外の多くの皆さんもクリックしようとして「あれ？」となると思いますので、ご検討の程よろしくお願いいたします。

[対馬 俊彦]

質問者ではないのですが、代理(?)で返信させていただきます。

VK Blocks Pro 1.3.5 / Katawara 1.6.6 にアップデートして
問題が修正されたことを確認いたしました。

[対馬 俊彦]

参考情報です。
以下の環境で正常に問い合わせフォームから送信できています。

WordPress 5.7.1
Lightning Pro 8.9.9
Contact Form 7 5.4.1

もしかしたら原因に関係するかもしれませんが、
https://a-harmonics.com/contact/ のフォームの設定を一部削除してしまったようですね。

対面体験レッスン” “オンライン体験レッスン”]
の部分にはラジオボタンが表示されていたのだと思います。

状況からすると、フォームに設定されている送信先のメールアドレスが正しいかどうかを念のため確認した方がいいかもしれません。

[対馬 俊彦]

> 以下をCSS追加しますが反映されません。

モバイル設定なら、min-width ではなく max-width を使うべきではないでしょうか。

[対馬 俊彦]

小森さん、

ご質問の内容と違う方向に行ってしまい、すみません。
以下の CSS でご希望のことができると思います。

.global-nav-list>li>ul.sub-menu {
  background-color: #191919;
}
.global-nav-list>li.menu-item-has-children::after {
  border-bottom-color: #191919;
}
.global-nav-list .sub-menu li a:hover {
    background-color: #ff9999;
}

[対馬 俊彦]

私が気になったのは添付画像で示した部分です。

黒統一の場合は、.global-nav-list>li.menu-item-has-children::after も黒の方がいいと思います。

どちらにそろえるか？
となると、私はキーカラー連動の方がいいです。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

Header Navigationサブメニューのバックカラー
が黒固定のようなのですが

たしかに気になりますね。

ベクトル 様、

該当部分の CSS が

.global-nav-list>li>ul.sub-menu {
  background-color: #191919;
}

になっていますが、おそらく以下のようにするのがよいのではないかと思います。

.global-nav-list>li>ul.sub-menu {
  background-color: var(--vk-color-primary-dark);
}

[投稿者]

投稿