[対馬 俊彦]

小森さん、

ご質問の内容と違う方向に行ってしまい、すみません。
以下の 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);
}

[対馬 俊彦]

念のため、補足です。

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 というプラグインでこれと同等のことができると思います。

[対馬 俊彦]

参考情報です。

Lightning 14.0.12
Lightning G3 Pro Unit 0.1.5
VK Blocks Pro 1.3.5
Sample Skin G3 0.0.2

私の作業用サイトは上記バージョンですが、
デザインスキンを Sample Skin G3 にしても縦線が表示されません。

HOME

小森さんの Sample Skin G3 のバージョンは 0.0.2 でしょうか？

[対馬 俊彦]

「カスタム投稿タイプの投稿タイプID」と「カスタム投稿タイプのスラッグ」は同じ値だとNGなんでしょうか？

NG だと思います。

カスタム投稿タイプの投稿タイプID＝info
カスタム投稿タイプのスラッグ＝info-category

のようにすると気持ち悪さがかなり和らぎます。

[対馬 俊彦]

右側にチラッとサイドバーらしきものが見えるのが気になります。

昨日私が書いたやり方は以下のことが前提になっています。

• トップページのレイアウト設定が 1カラム になっている。(サイドバーを表示しない)
• トップページコンテンツエリア上部にウィジェットが配置されていない。

増田さんのサイトは上記に該当しないように見えます。

もし可能であれば、サイトの URL を提示していただくと解決が早まると思いますが…

おそらく、増田さんのサイトの場合は以下のやり方でご希望の形になると思います。

1. スライドショーの代わりに ウィジェット を表示する
2. トップページの先頭に表示したいコンテンツを 固定ページ で作成する (この固定ページに全幅のブロックを入れる)
3. スライドウィジェットエリアに VK 固定ページ本文 ウィジェットを追加して、上記の固定ページを指定する

当方OuterProではないため

Outer ブロックは VK Blocks Pro というプラグインに含まれています。

VK Blocks Pro のライセンスは Katawara に付属していますので、このサイトの マイアカウント からダウンロードして使えますよ。

VK Blocks Pro には役に立つブロックがいくつもありますので、インストールすることをおすすめします。

[対馬 俊彦]

まだダッシュボードから Lightning G3 (14.*) へのアップデートができませんね。

以下のページの最後の方に Lightning G3 (14.0.9) があります。

Home

ここからダウンロードしてアップデートを行ってください。
手順は上記ページに書かれています。

[対馬 俊彦]

横からすみません。

Katawaraスライドウィジェットエリアに仮画像を入れたところ…

添付画像のようなやり方をされているのだと思いますが、
このやり方だと全幅表示はできません。

以下のようにすればご希望の形になると思います。

1. スライドを非表示にする (ウィジェットも表示しない)
2. トップページの先頭に「Outer」や「画像」のような全幅表示できるブロックを追加する
3. トップページの編集画面で余白設定の [サイトコンテンツの上下余白を無しにする] にチェックをつける

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

Katawara 1.6.5 にアップデートして、ブロックエディターの編集領域の幅が狭い件が修正されたことを確認いたしました。

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

[対馬 俊彦]

まず原因特定が先ですけど

・プラグインをひとつずつ無効化してみる
・ブラウザのキャッシュを削除する
などが一般的な作業ですが、デベロッパーツールのコンソールからなにか情報が得られるかもしれません。

参考ページ：https://kt-life.net/error-g-preview/

[対馬 俊彦]

参考情報です。

Lightning G3βバージョン: 14.0.9
Lightning G3 Pro Unit　バージョン 0.1.4

同じ環境ですが、
カードブロックのカードアイテムの画像に WebP 画像を設定できています。

カードブロックに WebP 画像を使用

カードブロックを作り直す
プラグインを停止する
のようなことをすれば原因が絞り込めるかもしれません。

[対馬 俊彦]

私の Katawara サイトでも同じ現象になっていますが、
[カスタマイズ] ⇒ [Katawara CSS最適化(高速化)設定] で
[Tree shaking 有効化設定] を [何もしない] にすれば、
矢印が白くなり、『・・・』が表示されます。

ということで…
ベクトル開発スタッフの方が修正してくれるのを待つか、
上記の設定変更をするかのどちらかになります。

[投稿者]

投稿