[対馬 俊彦]

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

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

手順は以下の通りです。

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）カスタマイズ方法徹底解説

• この返信は3年、 6ヶ月前に対馬 俊彦が編集しました。

[対馬 俊彦]

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

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

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

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

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

• この返信は3年、 6ヶ月前に対馬 俊彦が編集しました。

[対馬 俊彦]

参考情報です。

マイアカウントからダウンロードした 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 も黒の方がいいと思います。

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

• この返信は3年、 6ヶ月前に対馬 俊彦が編集しました。

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);
}

[対馬 俊彦]

念のため、補足です。

MENU ボタンを上部に表示する場合はこれで OK ですが、
設定を変えて下部に表示するとおかしな位置になってしまいます。

そこまで考慮した CSS にはなっていませんので、
このトピックを見てやってみる方はご注意ください。

[対馬 俊彦]

ベクトルさんのサイトのテーマは Lightning ではなく、Katawara です。

Katawara はなにもしなくても MENU の文字が表示されます。

> 真似してみる場合は、どうすると良いでしょうか？

テーマを変更しましょう… だとご期待の回答にはならないと思いますので、
Lightning で MENU の文字を表示する CSS を考えてみました。

これでいけると思います。

.vk-mobile-nav-menu-btn {
  text-indent: 2px;
  font-size: 10px;
  padding-top: 28px;
  overflow: visible;
  border: none;
}
.vk-mobile-nav-menu-btn.menu-open {
  border: none;
}

[対馬 俊彦]

具体的には以下のように管理画面から登録や削除が行えると便利なのですが・・・
＜https://support.animagate.com/manual/wp-nishiki-color-palette/＞

Central Color Palette というプラグインでこれと同等のことができると思います。

[投稿者]

投稿