対馬 俊彦
フォーラムへの返信
-
投稿
-
ご回答、ありがとうございます。
もともと PR ブロック や アイコンカードブロック の代替のために作ったので、
そういう流れだったんですね。理解できました。
この件はベクトルさんが対応検討中です。
以下のトピックをご覧ください。
暫定対策overflow-y: hidden;もこのトピックに書いてあります。画像を全幅に設定する方法って何かありませんか？
添付画像のように画像ブロックを全幅に設定すればよいと思いますが、
もし違う操作のご質問でしたらすみません。いつもお世話になっています。
VK Blocks Pro 1.11.3 にアップデートして位置のずれが修正されたことを確認いたしました。
ありがとうございました。
（添付画像２）のようにするのであれば、カスタマイズ → Lightning ページヘッダー設定 → 投稿で、表示要素を 投稿タイプ名 にすればよいと思います。
添付画像をご参照ください。
「画像を設定」のボタンを押しても何も反応しない
私のサイトでも同じ現象が起きています。
使用しているバージョンは以下の通りです。
WordPress 5.8
Lightning 14.5.11
VK All in One Expansion Unit 9.63.1.0ボタンをクリックすると、Console に以下のエラーが表示されます。
widgets.php:1 Uncaught ReferenceError: vkEx_banner_addiditional is not defined
at HTMLButtonElement.onclick以下の操作をやってみましたが、状況が変わりませんでした。
* VK All in One Expansion Unit 以外のプラグインをすべて無効化した。
* 親テーマに戻した。
* ブラウザ(Chrome)のキャッシュを削除した。以下の画像を添付いたします。
* ウィジェット画面(念のため)
* Console以下の 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 で作るよりずっと楽できますので、ご参考にどうぞ。
