対馬 俊彦
フォーラムへの返信
-
投稿
-
ベクトルさん側で対策中でお気づきかもしれませんが、念のため報告します。
アクティブスライドを中央にする が有効になっていると、
total number of slides must be >= slidesPerView * 2
よりも多くのスライドの枚数が必要な場合があるようです。
例えば、
一度に表示するスライドアイテムの数が 5 で、アクティブスライドを中央にする が有効だと、
12枚のスライドが必要です。スライドが10枚だと最初のスライド時に左側のスライドが消えてしまいます。
アクティブスライドを中央にする が無効だと、10枚で正常動作します。
とりあえず、情報としてお伝えします。
WordPress 6.2.2
Lightning Pro 8.17.10
Lightning Skin JPNSTYLE 8.1.1の私のサイトでは改行されていません。
JPNSTYLE (非推奨)
JPNSTYLE II (Bootstrap4)のどちらでも改行されません。
可能であれば、現象が起きている URL を提示していただくと回答がつきやすいと思います。
DRILL LANCER さん、ありがとうございます。
Swiper の仕様のようです。
Swiper のバージョンアップで仕様が変わったんですね。
スライドを6枚にしたら止まらなくなりました。total number of slides must be >= slidesPerView * 2
私が関わった既存サイトで、このルールになっていないスライダーがいくつかあります。
カルーセルバナーの類はほぼすべて止まってしまいそうです。
とりあえず、スライドを複製して数を増やして対応します。
トピックのタイトルに [ 対応中 ] となっていますが、[ 解決済 ] にしてもよいでしょうか？
Lightning 15.9.1 にアップデートして、
トップページのスライドショーのページネーション位置は元に戻りました。
ありがとうございます。その他対応までいましばらくお待ちくださいませ。
もうひとつ、スライダーブロックの動作の問題を見つけました。
ひとつの例として、アイテムの複数表示設定で PC で 3 に指定すると、
2回スライドした時点で止まってしまいます。以下の URL で実際の動作をご確認ください。
Swiper って、バージョンによって仕様が違っていて、
アップデートしたときの対応作業が大変そうだなぁ、と思っていました。プラグイン側で Swiper の最新バージョンに対応してもらえるのって、
感謝!! 感謝!! 感謝!! です。Swiper 9.2.3 になると機能も増えていると思いますので、楽しみにしています。
よろしくお願いします。
カテゴリ … の投稿ページのリストの表示範囲をある期間で、… 過去の投稿ページを見つけやすくしたかったのです。
高機能でちょっとお高いプラグインですが…😅
ベクトルさんが販売しているプラグイン VK Filter Search Pro を使えば、カテゴリーと期間で絞り込むことができます。
[Lightning ヘッダー設定] → [ヘッダーレイアウト] を [タイトル中央＆ナビ貫通] にして、
以下の CSS を書くやり方でもいけそうです。/* グローバルナビを上に移動 → この時点ではグローバルナビがロゴ画像に被る */ #global-nav { margin-top: -55px; } /* 3番目のメニュー項目の右マージンを設定 */ .global-nav-list>li:nth-child(3) { margin-right: 110px; } /* 4番目のメニュー項目の左マージンを設定 */ .global-nav-list>li:nth-child(4) { margin-left: 110px; } .site-header-logo { /* ロゴ画像を手前に出す */ position: relative; z-index: 1; /* ロゴ画像がグローバルナビに被らないようにする */ width: 200px; margin-left: auto; margin-right: auto; }上記 CSS はグローバルナビのメニュー項目が6個という前提です。
ご質問者のサイトはこの ↓ プラグインを使っているのでは？
LightStart – Maintenance Mode, Coming Soon and Landing Page Builder
このプラグインが追加したテンプレートが ⇔LightStart template だと思います。
上記以外のテンプレートは(not recommended)となっているので使用しておりません。
Lightning Pro って、デフォルトテンプレート以外は非推奨(not recommended)なのだと思っていましたが、どうなんでしょう？
ご質問者のサイトは [カスタマイズ] → [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 をながめてみたところ、あんまり理解できていないのですが、
なんとなく、裏技的というか、抜け穴を通り抜けて、たまたま結果オーライとなっている気がします。そんなわけで、自己責任でお願いします。
ご質問の画面下部のメニューは Lightning や Evergreen の機能ではなく、
ベクトルさんが独自にプラグインで実装したもので、ユーザーには提供されていません(と思います)。代替案として、Lightning モバイル固定ナビ をパソコンでも表示するやり方があります。
以下の CSS を追加すると、パソコンでもモバイル固定ナビが表示されます。
@media (min-width: 992px) { .mobile-fix-nav { display: block; } }メニューを階層化しなくていいなら、これで代用できるかもしれません。
以下、参考ページです。
【モバイル固定ナビ】
【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カラムのバナー (会社案内～役立ちブログ) があります。カバーブロックの動作はご希望にマッチしていると思います。
このカラムブロックをコピーして、それを元に作ってみたらよさそうです。
以下のアクションフックを書いてサムネイルサイズを指定すればうまくいきそうです。
function my_post_thumbnail_size() { set_post_thumbnail_size( 400, 400, true ); } add_action( 'init', 'my_post_thumbnail_size' );アップロード済みのメディアには適用されませんので、
再度アップロードするか、サムネイルを再生成するプラグインを使う必要があります。
