[対馬 俊彦]

ご質問者のサイトは [カスタマイズ] → [Lightning Font Awesome] で

6 SVG with JS (非推奨)

を指定しているようです。

この指定を

6 Web Fonts with CSS

に変更すれば、Chiaki K さんが回答してくれた CSS でアイコンを表示にできると思いますし、
こうした方が (非推奨) を使わないのでよさそうです。

[対馬 俊彦]

アイディアというよりも、たまたま見つかっただけなのですが…

私の Lightning サイトでメニューをクリックしてもモバイルナビが閉じないのがあって、
調べてみたところ、その原因がわかりました。

以下の手順でモバイルナビを閉じないようになります。

【手順 1.】
メニューのナビゲーションラベルを span タグで囲みます。
添付画像をご参照ください。

【手順 2.】
以下の CSS を追加します。

.vk-mobile-nav nav ul li a span {
    display: block;
}

テーマの .js をながめてみたところ、あんまり理解できていないのですが、
なんとなく、裏技的というか、抜け穴を通り抜けて、たまたま結果オーライとなっている気がします。

そんなわけで、自己責任でお願いします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

ご質問の画面下部のメニューは Lightning や Evergreen の機能ではなく、
ベクトルさんが独自にプラグインで実装したもので、ユーザーには提供されていません(と思います)。

代替案として、Lightning モバイル固定ナビ をパソコンでも表示するやり方があります。

以下の CSS を追加すると、パソコンでもモバイル固定ナビが表示されます。

@media (min-width: 992px) {
  .mobile-fix-nav {
    display: block;
  }
}

メニューを階層化しなくていいなら、これで代用できるかもしれません。

以下、参考ページです。

【モバイル固定ナビ】

モバイル固定ナビ

【CSS】

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

[対馬 俊彦]

15.8.6 にアップデートしました。

バッチグーです 😄

ありがとうございます!!

[対馬 俊彦]

ありがとうございます。

15.8.5 にアップデートして、段落部分が見やすく、使いやすくなりました。
ブロックの下に空きがないと ＋ (ブロックを追加) が出せなくて困るんですよね。

editor.css に以下のようになっていますが…

.editor-styles-wrapper .is-layout-flow>:is(.wp-block-table,p,ul,ol,dl,blockquote,iframe) {
    -webkit-margin-after: var(--vk-margin-element-bottom);
    margin-block-end:var(--vk-margin-element-bottom)
}

以下のようにして、見出し (h1,h2,h3,h4) の後ろにも空きを作っていただくとさらに使いやすくなると思います。

.editor-styles-wrapper .is-layout-flow>:is(.wp-block-table,h1,h2,h3,h4,p,ul,ol,dl,blockquote,iframe) {
    -webkit-margin-after: var(--vk-margin-element-bottom);
    margin-block-end:var(--vk-margin-element-bottom)
}

個人的に h5,h6 は使うことはないと思うけど、一般的にはあった方がいいのかなぁ。

ご検討のほどよろしくお願いします。

　

WordPress に追加された .is-layout-flow、なくていいのに…って思っちゃいます。

きっと面倒で厄介な作業なんだろうなと推察しますが、
そういう部分をテーマ側で吸収してくれて、サイト制作する者としてすごく感謝しています。

[対馬 俊彦]

私のブラウザ (Windows 11 ＋ Chrome) で表示すると、出力される画像部分の HTML が、

<img src="https://sample.landl-w.com/cafe/wp-content/uploads/2023/04/Test_HeaderLogo-1.png" alt="喫茶お食事　ABCDEFG">

と PNG 形式になったり、

<img src="data:image/webp;base64,...(長いので略)" alt="喫茶お食事　ABCDEFG">

と WebP 形式になったりしています。

おそらく画像変換するプラグインのようなものが動作しているのだと思います。

それを停止すればなにかヒントが得られるかもしれません。

[対馬 俊彦]

用途から考えると、
ご質問の内容に加えてカバーブロック全体にリンクを設定したくなるので、
レスポンシブ対応まで考えていちからカスタマイズすると
けっこうなボリュームの CSS を書く必要があります。

そこで…

VK パターンライブラリ の 工務店TOP をコピーすると、
下の方に4カラムのバナー (会社案内～役立ちブログ) があります。

カバーブロックの動作はご希望にマッチしていると思います。

このカラムブロックをコピーして、それを元に作ってみたらよさそうです。

工務店TOP

[対馬 俊彦]

以下のアクションフックを書いてサムネイルサイズを指定すればうまくいきそうです。

function my_post_thumbnail_size() {
  set_post_thumbnail_size( 400, 400, true );
}
add_action( 'init', 'my_post_thumbnail_size' );

アップロード済みのメディアには適用されませんので、
再度アップロードするか、サムネイルを再生成するプラグインを使う必要があります。

[対馬 俊彦]

パスワードを再発行しても引き続きログインできない場合は、
メールアドレスとパスワードを以下よりご連絡くださいませ。

ありがとうございます。
その方に伝えて、うまくいかないようならベクトルさんに連絡してもらうようにします。

[対馬 俊彦]

今朝、私がオンラインでサポートをさせていただいた方のアカウントで同じ現象が起きていました。

パターンライブラリ登録完了のメールが届いていましたが、
登録したメールアドレスとパスワードを入力すると、以下のように表示されていました。

エラー: ユーザー名またはパスワードが正しくありません。
残り*回まで間違えることができます。

入力ミスの可能性がまったくないわけではありませんが、
もしかしたら関連するかもしれないので、とりあえずお伝えします。

[対馬 俊彦]

crossFade を使いたいのであれば、
VK スライダーは使えない（独自に JavaScript でコーディングが必要）
と思います。

そこまでしなくても、
以下の CSS で wkwk さんがやりたいことができる気がします。(たぶん)

.vk_slider_item {
    opacity: 0 !important;
}
.vk_slider_item.swiper-slide-active {
    opacity: 1 !important;
}

お時間があれば試してみてください。

[対馬 俊彦]

Lightning Pro 8.17.9 にアップデートして修正を確認しました。
ありがとうございます。

[対馬 俊彦]

カスタムカラーがとても便利なので、カスタムアイコンもきっと便利だと思います。

それはそれとして…

今回のご質問の場合、よく使うレビューポイントを VK ブロックパターン に登録しておくと効率アップになると思います。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

以下のトピックが参考になります。

ヘッダーメニューをヘッダー画像下に表示したい

[対馬 俊彦]

お使いのテーマが Lightning Pro ですが、
Lightning G3 Pro Unit を使うためには、
テーマを無料版の Lightning に切り替える必要があります。

Lightning G3 Pro Unit のインストール

[投稿者]

投稿