「スライダー」の検索結果
-
検索結果
-
返信が含まれるトピック: 「カバー」ブロックを使ったalt属性の設定について
対馬様
ご返信ありがとうございます。【All in one SEO】の点数は悪くないので
対馬様のおっしゃる通り「気にしない」という事にします！！ちなみに、カバーブロックを使った経緯として、
スライダーブロックの中にカバーブロックを使っています。
スライダーブロックを使う際、画像のサイズを
「PC」「タブレット」「モバイル」の３つを指定すると思いますが
KATAWARAのトップページスライドショーのように、
推奨サイズなどがあればわかりやすいのですが
当方の知識およばず、そのサイズを何サイズにするのが正しいのかわからず、
いろいろ入れてみるときれいに収まらず。。。といった具合で。。。
スライダーブロックの中にカバーブロックを入れいます。長くなりましたが この度は、早々に案を授けてくださりありがとうございました！！
返信が含まれるトピック: G3でトップスライダーで画像の幅と高さの設定
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のトップページスライダーにその記述をする方法はあるのでしょうか？
(後ほどスライダーブロックで代用しようと思っていますが、
うまくスマホで小さい画像に切り替えたりする設定が出来ず。
とりあえず『トップページスライダー』で設定したいと思います。）トピック: [ 解決済 ] G3でトップスライダーの枚数
■ 利用テーマとバージョン :
問題のテーマ・プラグインのバージョン：Lightning
選択しているデザインスキンの種類（Lightningの場合）：Origin III■ 質問内容：
① Lightning Proから、G3に変更しました。
するとトップページスライダーの枚数が5枚から3枚になっていました。
5枚に増やすやり方がありましたら教えてください。②また、SEO会社からCore Web Vitals の改善施策として、
「イメージタグに直接「width」「height」を記載していただくことを推奨いたします。」という提案を受けています。
CSSで記述してはどうかと聞いてみたのですが、HTMLで書く方が望ましいということです。Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？
(後ほどスライダーブロックで代用しようと思っていますが、
うまくスマホで小さい画像に切り替えたりする設定が出来ず。
とりあえず『トップページスライダー』で設定したいと思います。）御教示いただけると有り難いです。よろしくお願いします。
返信が含まれるトピック: スライダーでエラーとなる
お世話になります。
slider-errer.pngの通りにHTML表示させたんですが・・・削除したのは絶対参照<https://〇〇.comの部分のみでして・・・
試しにもう一度新たにスライダーを設置しても<div～～～からスタートします。改善されたら良いなと思っただけなのですが、私の使い方が悪い様です。
また様子を見ます。
お手数おかけしました。ありがとうございます。返信が含まれるトピック: スライダーでエラーとなる
添付ありがとございます。
すみませんがもう一点、よろしいでしょうか。
スライダーブロックの右側の３点メニューから「HTMLとして編集」で、
HTML表示させて該当部分のhtmlをコピーしてテキストデータを貼り付けることはできますか？トピック: スライダーでエラーとなる
投稿前に以下の点を確認ください
■ 症状が発生するブラウザ :chrome
■ 利用テーマとバージョン :Lightningバージョン: 14.4.2 Lightning G3 Pro Unit
■ 質問内容：
いつもお世話になっております。
スライダーを下記の設定で使っています。スライダーアイテム
・スライダーアイテムエリア内の余白をなくす
・カバー
・縦→中央
画像
・フルサイズ100％
・横→中央
lightningデザイン設定
・サイトコンテントの上下余白を無しにする
・ヘッダーを透過
・ページヘッダーを表示しない
・パンくずリストを表示しない問題なく表示されますが、編集画面で「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されてしまいます。
ブロックのリカバリーを試行ボタンをクリックすると、回復しますが再び設定しないといけません。
エラーにならない様に出来ませんでしょうか。どうぞよろしくお願い致します。
返信が含まれるトピック: テーマのトップpe-ji スライドを１回のみにしたいのですが
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 のスライダーの使い方はこちら。
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,
お手数ですが、対応策などをご教示頂ければ幸いです。
返信が含まれるトピック: VK Blocks Pro スライダーブロックの自動再生の停止について
現在G3にてVK Blocks Pro スライダーブロックを利用し動画を埋め込んでおります。
スライダーを自動再生（スライド）させた場合
閲覧訪問者がスライド内の動画をクリックして再生した際に、
動画が再生されたままスライドしてしまい動画が見えなくなってしまいます。
これをスライド内にマウスオーバーさせることでスライドが停止することは出来ないものでしょうか？ご指摘の件につきまして社内にて検討させていただきましたが、
* スライドの中に動画を入れればご指摘のようにユーザーにとって不便な状態になるためそもそもスライド内に動画を配置するべきてはない
* タブレットの際はホバーは使えないのでタッチする事になるが、タッチした時点で動画は停止になるのでタブレットユーザーにとっては動画が止まるか、再生中にスライドされてしまうかの２択となり高確率で不快感を与える事になる
* スライド内に入れるのであれば手動でのみスライドできるように非常に長い時間で設定する事は可能という理由から対応は現実的でないため見送りとさせていただきます。
今回のご要望にお応えすることはできませんが、
また何かございましたら是非ご要望いただければと思います。今後とも何卒よろしくお願いいたします。
返信が含まれるトピック: スライダーブロック 同じペースでのスライド
一時停止する前提で、スライダーにはメリハリのある動きが設定されています。
一定速度で動かしたい場合は以下の CSS を追加すればよいです。
.vk_slider .swiper-wrapper { transition-timing-function:linear; }この CSS のままだと他のスライダーにも影響してしまうので、
スライダーに 追加 CSS クラス (下記の例では slider01) を設定して
以下のようにするのが望ましいです。.vk_slider.slider01 .swiper-wrapper { transition-timing-function:linear; }返信が含まれるトピック: スライダーブロック 同じペースでのスライド
ご確認ありがとうございます。
実現したい動きの参考サイト（http://shinka-inc.com/special/）
これはVKBLOCKではないのですが、この様な動きが設定でできるのでしたら、
実装したいと考えております。画像は上記URLのスライドする箇所のキャプチャです。
スライダーブロックですと少し忙しく感じるため、
製品を写真で紹介する時にギャラリーっぽくしたいと思っています。返信が含まれるトピック: スライダーブロック 同じペースでのスライド
VK BLOCKSのスライダーブロックで、均一のペースで画像（例えば4枚）を横にスライドさせる。
表示時間を「０」にして、切り替え時間をいくつかのパターンでテストしてみましたが、
完全に均一の流れになりません。
設定方法をご存知の方いらっしゃいましたら、よろしくお願い致します。完全に均一の流れにならないとは、どのような点でお困りでしょうか？
実際に作成されたページを添付いただくことはできますでしょうか。
あとは理想に近いスライダーのページのURLなどございますか。以下のスライダー紹介ページの使用例に、理想のものはありますか
■ 利用テーマとバージョン :
WP 5.7.2
G3PRO 0.3.5
VK Blocks Pro 1.4.6■ 質問内容：以下の様な動作をつけたいと考えております。
VK BLOCKSのスライダーブロックで、均一のペースで画像（例えば4枚）を横にスライドさせる。
表示時間を「０」にして、切り替え時間をいくつかのパターンでテストしてみましたが、
完全に均一の流れになりません。
設定方法をご存知の方いらっしゃいましたら、よろしくお願い致します。※そもそもスライダーブロックではできない動きで、何か他の方法をご存知でしたら、
ご教授ください。 - 操作に失敗すると、最悪の場合サイトが表示されなくなります。
