「スライダー」の検索結果

[With]

WordPress5.8以前は問題ありませんでした。
検証・閲覧用にテストページを作成。
VKスライダー（別々の画像3枚）フェード。
別ページでも同様でした。
どうぞ宜しくお願いします。
編集時の画像も添付します。

保護中: test

pasword
test

Attachments:

You must be logged in to view attached files.

[Vektor,Inc]

新規で作成したのVKスライダー（複数枚）が動きません。

こちらの件ですが、
わたしのWordPress5.8の環境では再現できませんでした。（フェードでスライドアイテム８枚設置で確認）
もし可能であれば、症状の起きているページのURLを添付いただくことはできますでしょうか。

あとは、一度バックアップをとっていただき、以下の点をご確認いただけますでしょうか。

• 関連しそうなプラグインを一つずつ停止して症状が改善するかどうか？
• 独自に追加したCSSがあれば削除して改善するかどうか？
• 子テーマの場合は親テーマに設定して改善するかどうか？

[Vektor,Inc]

既に作成済のVKスライダー（複数枚）の編集画面の画像高さが狭くなりました。

編集画面で、スライダー設定の「高さ」に入力した高さが出力されていないのを確認しました。
（フロント画面は出力されている）

新規で作成したのVKスライダー（複数枚）が動きません。

こちらは確認中です。

また、既存のVKスライダー（複数枚）の編集時の見た目が変わりましたので
アップデートで修正できるのでしょうか。

編集画面で高さが出力されていない問題は確認できましたので、
ご不便おかけしますがしばらくお待ちください。

[With]

WordPress5.8にアップデートしてから
・Lightning G3でVKスライダー（複数枚）の編集画面の画像高さが狭くなりました。
・Lightning G3でVKスライダー（複数枚）のフェードが動かない

以下に訂正します。
　　　↓↓
Lightning G3 Pro で運用しております。
Lightning Proから G3 Proに変更したのは約4週間前です。
こちらは特に問題ありません。

WordPress5.8にアップデートして
数日経過して改めて検証しました。

既に作成済のVKスライダー（複数枚）の編集画面の画像高さが狭くなりました。
実際のホームページ表示は変わりないのですが
編集時の画像高さが1/3になってしまったため
新規で作り直そうと考えました。

新規で作成したのVKスライダー（複数枚）が動きません。
1枚のままです。
フェードとスライダーとも検証をお願いします。
また、既存のVKスライダー（複数枚）の編集時の見た目が変わりましたので
アップデートで修正できるのでしょうか。
既にあるVKスライダー（複数枚）は多ページにあるため、
新規で作り直すのは大変です。

どうぞ宜しくお願いします。

[With]

■ 利用テーマとバージョン :
Lightning G3 Pro Unit バージョン 0.6.4
Lightning Original Brand Unit バージョン 0.0.4
Lightningバージョン: 14.5.6
■ 質問内容：
Lightning G3 Pro で運用しております。
Lightning Proから G3 Proに変更して数日経過して改めて検証しました。
既に作成済のVKスライダー（複数枚）の編集画面の画像高さが狭くなりました。
実際のホームページ表示は変わりないのですが
編集時の画像高さが1/3になってしまったため
新規で作り直そうと考えました。

新規で作成したのVKスライダー（複数枚）が動きません。
1枚のままです。
フェードとスライダーとも検証をお願いします。
また、既存のVKスライダー（複数枚）の編集時の見た目が変わりましたので
アップデートで修正できるのでしょうか。
既にあるVKスライダー（複数枚）は多ページにあるため、
新規で作り直すのは大変です。

どうぞ宜しくお願いします。

[のりまきプリンセス]

■ 利用テーマとバージョン :Lightning Pro　8.11.0　の子テーマ

■ 質問内容：
カスタマイズ画面のLightning トップぺージスライドショーの設定部分にて、モバイル用の画像を設定したのですが、更新しても反映されません。
リロードしたりシークレットモードで開いても更新されません（スライドショーの２番目に設定されているモバイル用画像はなぜか反映されます。。。。）
対応方法はありますでしょうか。
お手数ですが、よろしくお願いいたします。

[ミスズユニム]

対馬様
ご返信ありがとうございます。

【All in one SEO】の点数は悪くないので
対馬様のおっしゃる通り「気にしない」という事にします！！

ちなみに、カバーブロックを使った経緯として、
スライダーブロックの中にカバーブロックを使っています。
スライダーブロックを使う際、画像のサイズを
「PC」「タブレット」「モバイル」の３つを指定すると思いますが
KATAWARAのトップページスライドショーのように、
推奨サイズなどがあればわかりやすいのですが
当方の知識およばず、そのサイズを何サイズにするのが正しいのかわからず、
いろいろ入れてみるときれいに収まらず。。。といった具合で。。。
スライダーブロックの中にカバーブロックを入れいます。

長くなりましたが　この度は、早々に案を授けてくださりありがとうございました！！

[対馬 俊彦]

Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？

おすすめできるようなものではありませんが、どうしてもやりたい!! という場合の方法を紹介します。

この方法には以下の注意点があります。(やるなら自己責任で)

• 操作に失敗すると、最悪の場合サイトが表示されなくなります。
  必ず変更するファイルのバックアップをとってから作業を行ってください。
• テーマがアップデートされるたびに書き換えた部分が上書きされてしまう(たぶん)。
• 違うサイズ(縦横比)のスライド画像に差し替えるときに、また作業を行う必要があります。

■ ■ ■ 作業手順 ■ ■ ■

/wp-content/themes/lightning/_g3/inc/ltg-g3-slider/package/class-ltg-g3-slider.php
の 742行目 あたりを以下のように書き換えます。

【変更前】

$slide_html .= '<picture>';

// If Mobile Image exist.
if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) {
	$slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '">';
}

$slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img">';
$slide_html .= '</picture>';

【変更後】

$slide_html .= '<picture>';

// If Mobile Image exist.
if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) {
	$slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '" width="△" height="△">';
}

$slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img" width="○" height="○">';
$slide_html .= '</picture>';

○ がスライド画像のサイズ、△ がモバイル用スライド画像のサイズの指定です。

たしかに、SEO会社が言う Core Web Vitals のスコア改善は期待できますが、手間とリスクを考えるとあまりおすすめできるやり方ではありません。その労力を他の部分でサイト改善に回した方がよいと私は思います。

それなら回答しなくていいのに…というご意見もあるかもしれませんが、「この方法しかなさそう」という参考情報として書かせていただきました。ご容赦ください。

[直美野寺]

■ 利用テーマとバージョン :
問題のテーマ・プラグインのバージョン：Lightning
選択しているデザインスキンの種類（Lightningの場合）：Origin III

■ 質問内容：
SEO会社からCore Web Vitals の改善施策として、
「イメージタグに直接「width」「height」を記載していただくことを推奨いたします。」という提案を受けています。
　CSSで記述してはどうかと聞いてみたのですが、HTMLで書く方が望ましいということです。

　Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？

　(後ほどスライダーブロックで代用しようと思っていますが、
　うまくスマホで小さい画像に切り替えたりする設定が出来ず。
　とりあえず『トップページスライダー』で設定したいと思います。）

[直美野寺]

■ 利用テーマとバージョン :
問題のテーマ・プラグインのバージョン：Lightning
選択しているデザインスキンの種類（Lightningの場合）：Origin III

■ 質問内容：
① Lightning Proから、G3に変更しました。
　するとトップページスライダーの枚数が5枚から3枚になっていました。
　5枚に増やすやり方がありましたら教えてください。

②また、SEO会社からCore Web Vitals の改善施策として、
「イメージタグに直接「width」「height」を記載していただくことを推奨いたします。」という提案を受けています。
　CSSで記述してはどうかと聞いてみたのですが、HTMLで書く方が望ましいということです。

　Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？

　(後ほどスライダーブロックで代用しようと思っていますが、
　うまくスマホで小さい画像に切り替えたりする設定が出来ず。
　とりあえず『トップページスライダー』で設定したいと思います。）

御教示いただけると有り難いです。よろしくお願いします。

[masako.s]

お世話になります。
slider-errer.pngの通りにHTML表示させたんですが・・・削除したのは絶対参照<https://〇〇.comの部分のみでして・・・
試しにもう一度新たにスライダーを設置しても<div～～～からスタートします。

改善されたら良いなと思っただけなのですが、私の使い方が悪い様です。
また様子を見ます。
お手数おかけしました。ありがとうございます。

[Vektor,Inc]

添付ありがとございます。

すみませんがもう一点、よろしいでしょうか。
スライダーブロックの右側の３点メニューから「HTMLとして編集」で、
HTML表示させて該当部分のhtmlをコピーしてテキストデータを貼り付けることはできますか？

Attachments:

You must be logged in to view attached files.

[masako.s]

投稿前に以下の点を確認ください

■ 症状が発生するブラウザ :chrome

■ 利用テーマとバージョン :Lightningバージョン: 14.4.2　Lightning G3 Pro Unit

■ 質問内容：
いつもお世話になっております。
スライダーを下記の設定で使っています。

スライダーアイテム
・スライダーアイテムエリア内の余白をなくす
・カバー
・縦→中央
画像
・フルサイズ100％
・横→中央
lightningデザイン設定
・サイトコンテントの上下余白を無しにする
・ヘッダーを透過
・ページヘッダーを表示しない
・パンくずリストを表示しない

問題なく表示されますが、編集画面で「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されてしまいます。
ブロックのリカバリーを試行ボタンをクリックすると、回復しますが再び設定しないといけません。
エラーにならない様に出来ませんでしょうか。

どうぞよろしくお願い致します。

[対馬 俊彦]

Lightning Pro はカスタマイズ画面でスライドショーを繰り返さないように設定することができませんが、以下のどちらかの方法でご希望の動きにすることはできます。

1. テンプレートファイルに手を加える方法
2. VK Blocks Pro のスライダーに置き換える方法 (こちらがおすすめ)

　

■ ■ ■ 1. テンプレートファイルに手を加える方法 ■ ■ ■

デザインスキン Origin II をお使いの前提で書きます。

このやり方はテーマのアップデートにより問題が起きる可能性があります。
問題が起きた場合は同様の作業をまた行えばよいですが、この将来的なリスクに対応できるか不安であればやめておくのが無難です。

親テーマの /wp-content/themes/lightning-pro/template-parts/slide-bs4.php を子テーマの template-parts フォルダーにコピーして、このファイルの23行目を以下のように書き換えます。

子テーマを使っていなければ、直接親テーマのファイルを書き換えればよいですが、バックアップはとっておいた方がいいです。

【変更前】
<div id="top__fullcarousel" data-interval="<?php echo $interval; ?>" class="carousel slide slide-main<?php echo $effect; ?>" data-ride="carousel">

【変更後】
<div id="top__fullcarousel" data-interval="<?php echo $interval; ?>" class="carousel slide slide-main<?php echo $effect; ?>" data-ride="carousel" data-wrap="false">

【変更点】
オプション data-wrap=”false” を追加している。

　

■ ■ ■ 2. VK Blocks Pro のスライダーに置き換える方法 ■ ■ ■

スライドショーを非表示にして、代わりに VK Blocks Pro のスライダーを置きます。

VK Blocks Pro のスライダーは繰り返しを する・しない の指定ができます。
添付画像をご参照ください。

VK Blocks Pro のスライダーの使い方はこちら。

スライダー（Pro版のみ）

Attachments:

You must be logged in to view attached files.

[hij.kumagai]

CSSなどもあまりいじれない初心者ですが会社のHP作成担当をしています。

■ 質問内容：
Lightning Pro V8.10.2 から Lightning v14.3.7 + G3 Pro Unit v0.3.5へ移行する為
現在テスト環境にて移行テスト＆修正作業をしています。うまくいけばそのまま本番環境でも
同じ作業をする予定ですが、1点困ってます。

https://homestay-in-japan.com/guest/en/
上記は弊社英語トップページ（他言語プラグインをBogoを使用）です。
また”Lightningトップページスライドショー”を表示させず、SmartSliderプラグインを使用しています。
このサイトをテスト環境へ移植後G3へ変更するとトップページのスライダーの上部に灰色の余白が表示されました。
そこで、固定ページの編集から「サイトコンテントの上下余白を無しにする」をチェックすると灰色の余白は消えたのですが、代わりにスライドショーより下のコンテンツが左にずれて右に余白ができてしまいました。
その後、サイトコンテントの上下余白を無しにする」のチェックを外して更新しても、左にずれるのが元に戻りません！
添付”スクショ１”をご確認ください。

（補足情報）
●日本語トップページでは問題が発生せず
http://homestay-in-japan.com.testrs.jp/guest/
英語トップページだけで問題が発生
http://homestay-in-japan.com.testrs.jp/guest/en
テスト版サイトの為、アクセスには下記が必要です。
ユーザー名 f7s54735
パスワード T,j4J357n;

●その他の英語の固定ページで同様の操作をしても発生しない。
つまり、問題はこのページのみ　http://homestay-in-japan.com.testrs.jp/guest/en

■ 症状が発生するブラウザ :Chrome & Firefox で発生したため、ブラウザ依存しなそう

■ 利用テーマとバージョン :　Lightning v14.3.7, G3Pro Unit v0.3.5,

お手数ですが、対応策などをご教示頂ければ幸いです。

Attachments:

You must be logged in to view attached files.