対馬 俊彦
フォーラムへの返信
-
投稿
-
以下の CSS を追加すれば欠けなくなると思います。
.vk-menu-acc ul.acc-child-open {
max-height: 1200px;
}Lightning でも同じことがあったので、以下のトピックをご参考にどうぞ。
以下の CSS を追加すれば折り返すようになります。
.site-header-logo { white-space: unset; }
サイトタイトルとグローバルナビの項目名で被るものが多いので、「食品事故防止チャンネル」のロゴ画像だけの方がすっきりして見やすいような気がします。
この自動最適化はトップページだけにしかできないのでしょうか。
トップページのスライドショーはそのようなしくみを持っていますが、Web商談ページでお使いのカバーブロックにはその機能がありません。
トップページのような見た目を実現するためには、以下のページを参考に CSS でカスタマイズする必要があると思います。
【追記】
ゆっくり書いてたら回答が石川さんと被ってしまいましたが、石川さんが提示されたのが最新の教材ですので、そちらをご利用になった方がよいのではないかと思います。モバイルで表示するとカバー画像・段落内テキストの表示が両方とも大きすぎてしまいます。
カバーブロックについて以下のようにするのがよいと思います。
1. フォントサイズを小さくする
現在設定されている 60px が大き過ぎるので、小さくした方がいいと思います。
単位は px より EM の方がわずかですがメリットがあります。(スマホでフォントがちょっと小さめになるみたいです)2. 画像を作り直す
女性の手元まで画像に含めようとすると、バランス的にフォントサイズを大きくしたくなります。
ヘッドセットだけでもオンラインミーティングの雰囲気が伝わるので、肩から上だけの画像にすればフォントサイズを小さくしてもバランスが悪くならないと思います。3. 焦点ピッカーを使う
焦点ピッカーで女性の顔の位置を指定すれば、どの画面幅の端末でも女性の顔が画面の外に隠れないです。添付画像をご覧ください。4. カバー画像の最小の高さを小さくする
いま、1132px になっていますが、2. で画像を作り直したら、半分くらいの高さにすればでよいのではないかと思います。添付画像をご覧ください。最新版にアップデートした私の G3 サイトでも同じ現象が起きていますので、不具合のような気がします。
文字数の多い・少ないがあると、たしかに気になりますね。
【困った点】段落の文字数により、枠の高さが変更してしまう。
【修正作業】グリッドカラムアイテムに display: flex; の指定を追加する。【困った点】ボタンの位置が下揃えが出来なく
【修正作業】ボタンに position: absolute; の指定を追加する。先ほどお知らせした投稿で上記の修正作業を行いました。
【追記】
以前、私は HTML・CSS を書いてこのようなレイアウトを時間をかけて作っていましたが、スキルと時間の制約のためになかなか納得いくものができませんでした。
ブロックエディターに移行してからは VK Blocks Pro などのブロックをなんとか工夫・活用して楽してやろうということを考えるようになり、以前よりもはるかに短時間で納得できるものを作れるようになりました。【追記 2.】
昨晩のベクトルさんの勉強会で こうの ちあき さんがプレゼンしてくれた「飲茶の作法」というサンプルページはブロックの活用のすごいヒントになりました。Slack に登録すればこのサイトのデータをダウンロードできます。
gundam さん、すでに参加・登録されてたらご容赦ください。
実際試してみたのですが、画像上左右角丸、グループの線の太さ、
余白、等の設定が大変そうな感じがしました。今年2月に自分の勉強と備忘録のために書いた投稿があったのを思い出しました。
グリッドカラムでひとつブロックを作ってしまえば、カスタム HTML で作るよりずっと楽できますので、ご参考にどうぞ。
マイアカウントのページにはありませんが、投稿に表示されているご自分の名前 ( 参加者の上の traveller ) をクリックして、[開始したトピック] で一覧を表示できます。
このトピックが参考になると思います。
私のサイトで確認したところ、先ほどの 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; } }複製が使えないのは残念ですが…
全ての高さや各設定を一から行わなければいけないため
VKブロックとしての機能性がなくなり、とても残念でした…。
相当時間が掛かり現実的ではないです。以下のようにすれば、修正待ちの間はとりあえず乗り切れます。
- スライダーアイテムを追加
- 背景画像を設定
- ひとつ前のスライダーアイテムに含まれるブロックをすべて選んでコピー ～ 追加したスライダーアイテムの中に貼り付け
このやり方なら、少し多めに時間が掛かるだけで済みます。お試しください。
複製しますとIDが同じになり、今回のような不具合を起こしてしまいます。
なるほど、そういうことでしたか。
WordPress 5.8 になって複製動作の仕様が変わったということなんですね。
スライダーアイテムを追加して作り直したら OK になりました。
