[対馬 俊彦]

このトピックが参考になると思います。

カードブロックでの画像表示乱れの対処法

[対馬 俊彦]

私のサイトで確認したところ、先ほどの CSS で期待通りの表示をしています。
もしかしたら、不要な文字が入力されているとかが原因なのかもしれません。

まず、テーマエディターに入力したお問い合わせフォームに関する部分を
いったん削除するのがよさそうです。

この CSS はお問い合わせフォームだけに適用すればよいので、
CSS を書く場所としては、ひとつ前にキーマスターさまが提示された解説ページの
5.5. ExUnit のCSSカスタマイズ（指定ページ）
で説明されている カスタム CSS という入力欄がよいと思います。

私が提示した CSS をコピーして、
お問い合わせフォームを置いてある固定ページの カスタム CSS に貼り付ければいけると思うのですが…

[対馬 俊彦]

質問なのか、機能追加要望なのか、判断できかねますが、質問という前提でコメントさせていただきます。

もし機能追加要望であれば私のこのコメントはスルーしてください。

現在は、画像が中央表示にならず、１枚表示でスライドするような形で、slideするだけです。

たぶん、ご質問者のサイトで起きている動きが Lightning G3 の coverflow の仕様です。

私のサイトでも coverflow のスライドショーにしてみましたので、比べてみてください。
→ https://lightning-g3.hp1.work/

coverflowを実現できる他のスライドプラグインは、画像中央の設定、表示単位の設定、間のスペースの設定で調整できます。

現在の Lighnting G3 のスライドショーにその機能はないと思います。

[対馬 俊彦]

添付の設定と追加の仕方で間違いないでしょうか。

margin-*** の設定は { と } の間に入れないといけませんので、以下の書き方が正しいです。

.wpcf7-form-control.form-control {
width: auto;
margin-left:auto;
margin-right:auto;
}

【以下、追記です】

上記の CSS だと、入力欄だけ中央に配置されてしまいますね。

それから、スマホで表示すると入力欄が画面からはみ出してしまいますので、以下のようにするのがよさそうです。

@media (min-width: 768px) {

.wpcf7-form-control.form-control {
width: auto;
}
.wpcf7-form {
max-width: 680px;
margin-left:auto;
margin-right:auto;
}

}

• この返信は3年、 4ヶ月前に対馬 俊彦が編集しました。理由: CSS 見直し

[対馬 俊彦]

複製が使えないのは残念ですが…

全ての高さや各設定を一から行わなければいけないため
VKブロックとしての機能性がなくなり、とても残念でした…。
相当時間が掛かり現実的ではないです。

以下のようにすれば、修正待ちの間はとりあえず乗り切れます。

1. スライダーアイテムを追加
2. 背景画像を設定
3. ひとつ前のスライダーアイテムに含まれるブロックをすべて選んでコピー ～ 追加したスライダーアイテムの中に貼り付け

このやり方なら、少し多めに時間が掛かるだけで済みます。お試しください。

[対馬 俊彦]

複製しますとIDが同じになり、今回のような不具合を起こしてしまいます。

なるほど、そういうことでしたか。
WordPress 5.8 になって複製動作の仕様が変わったということなんですね。
スライダーアイテムを追加して作り直したら OK になりました。

[対馬 俊彦]

横からすみません。

私のサイトでも同じ症状が起きています。

起きている症状は以下の通りです。

• スライドが切り替わる動作はしている。
• スライダーアイテムに背景画像を設定してあると、常に先頭のスライダーアイテムの背景画像が表示されてしまう。
• その結果、背景画像だけを設定してあるフェード動作のスライダーは止まっているように見える。(ページネーションを見ると進んでいるのが確認できますが…)

以下のことを試しましたが、症状は改善しませんでした。

• Lightning G3 Pro Unit 0.6.4 / VK Blocks Pro 1.9.2 以外のプラグインをすべて無効化する
• 親テーマに戻す

以下の固定ページでは Slide 1 / Slide 2 / Slide 3 に別々の背景画像を設定してありますが、Slide 1 の背景画像が常に見えています。

VK Slider

[対馬 俊彦]

WordPress 5.7.2 + Lightning Pro 8.11.0 の環境で、WordPress 5.8 にアップデートしました、

私のサイトでは問題が起きていませんが、ググってみると 5.8 にしたら重大なエラーが起きるようになったという報告もありますので、使用しているプラグインによっては問題が起きる可能性があるみたいです。

【追記】
ご質問の内容と関係ありませんが、このサイトの マイアカウント → アカウント詳細 で [Showcase ログインID] にメールアドレスを入力されているので、お名前の下の [制作実績] のリンクでメールアドレスが見えてしまってます。

• この返信は3年、 4ヶ月前に対馬 俊彦が編集しました。

[対馬 俊彦]

横からすみません。

スマホからの検索では、アイコン表示が多いので、対応した方がよいのかな・・

WordPress のカスタマイズでサイト基本情報のサイトアイコンを設定してあれば、ファビコン(favicon.ico)を設定しなくてもスマホで検索したときにアイコンは表示されています。

経験上、そういうものだと思っていましたが、違うのでしょうか…?

[対馬 俊彦]

すみません。そういうことでしたら、私は PHP や JavaScript でセッション変数を扱った経験がないので、まともなアドバイスができる立場にありません。

どなたか詳しい方から有用な回答があるかもしれませんので、それをご期待ください。

でも…せっかくこのトピックに関わったので、勉強を兼ねてセッション変数を削除するシンプルなプログラムを作ってみました。

セッション変数のテスト（表示回数をカウントアップ）

「特定のメニュークリック」したときにサイト内のどこかのページを表示するのではないかと思いますので、上記のプログラムのような動きでもよいのかもしれません。

[対馬 俊彦]

バージョン: 14.5.6　+Lightning G3 Pro Unit　バージョン 0.2.4

縦書きの設定ができるのは G3 Pro Unit 0.4.0 以降ですので、アップデートすれば使えるようになります。

G3 Pro Unit 0.4.0 で縦書きメニューに対応しました

[対馬 俊彦]

特定のメニュークリックでイベント発生させたい

このタイトルからすると、PHP ではなく JavaScript を使う場面なのかな…という気がしましたが、もし、セッション変数に関する質問をされているのであれば、このコメントはスルーしてください。

どのような目的をお考えなのかを付け加えていただくと、もしかしたら回答が得られやすいかもしれません。

[対馬 俊彦]

サイトを拝見したところ、Gallery Custom Links というプラグインをお使いで、1番目の画像にリンクが設定されていることが原因のように思います。

1番目の画像のリンクを解除すれば解決するかもしれません。

[対馬 俊彦]

以下のような CSS を追加することにより、Header Top Navigation メニューがスマホでも表示されるようになります。

@media (max-width: 991px) {

/* ヘッダー上部エリアを表示 */
.headerTop {
display: block;
}

/* ヘッダー上部エリアを右寄せ */
.siteHeader .headerTop .container {
justify-content: flex-end;
}

/* キャッチフレーズを非表示 */
.headerTop .headerTop_description {
display: none;
}

/* Header Top Navigation を表示 */
.headerTop nav {
display: block;
}

/* お問い合わせボタンを非表示 */
.headerTop .headerTop_contactBtn {
display: none;
}

}

CSS 追加作業手順に関する参考ページ ↓

https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/

[対馬 俊彦]

こんな記事を書いてみましたので、ご参考にどうぞ…

Lightning Pro の CLS を改善するやり方

[投稿者]

投稿