[うなこ]

編集ロックを解除してしまうと、おそらくですが別々の色に設定した背景色などが解除されてしまうと思われますので、
お手数ですが、編集モードは「このカラムのみ」で編集ロックをかけたまま、グリッドカラムカードアイテムを選択して、カラムの余白を設定すると数値が適応されると思いますがいかがでしょうか。

Attachments:

You must be logged in to view attached files.

[うなこ]

jkwebさま

　Lightningのご利用ありがとうございます。
WordPressの子カラムの角丸の設定はできないようでしたので、CSSで調整していただくか、もしくは　VK Blocks Pro　のグリッドカラムカードブロックを使用していただくのはいかがでしょうか。

グリッドカラムカードブロックの、グリッドカラムカードアイテムを選択して「編集ロック」をオンにしますと、それぞれカラムごとに背景色を変えたりできます。
カラムの角丸の大きさも設定できます。

グリッドカラムカード ( Pro版のみ )

いかがでしょうか。

Attachments:

You must be logged in to view attached files.

[うなこ]

Peaceさま

お世話になっております、X-T9のご利用ありがとうございます。

VK Dynamic If Blockで実現できないか試そうとしましたが、ナビゲーションの下位階層で選択できるブロックに表示されません。

ナビゲーションブロックの後にVK Dynamic If Block を挿入するのはいかがでしょうか。
もし見当違いのことをいっていたらすみません。

可能でしたら画面キャプチャなどで、どこにどのようなブロックを設置したいなど、具体的な指示など書いていただけましたら、返信がつきやすくなります。

どうぞよろしくおねがいいたします。

Attachments:

You must be logged in to view attached files.

[うなこ]

idfさま
お世話になっております、VK パターンライブラリのご利用ありがとうございます。

こちらのパターンのカラムブロックの写真が交互になっているデザインは、「VK Block Patterns」プラグインで実装していますので、プラグインをインストールして有効化してください。

VK Block Patterns

もしくは、VK Blocks 1.73.0 で WordPress 標準のカラムブロックに逆向き設定が追加されましたので、そちらをご利用ください。

【ご利用のテーマにつきまして】
Lightning Pro をご利用とのことですが、もし Vektor Passportをご購入されたと言うことでしたら、Lightning Proテーマは旧製品となりますので、もしこれから新規でサイトを制作すると言うことでしたら、LightningテーマとLightning G3 Pro Unit プラグイン（Lightning のPro機能）を推奨しております。

一度ご確認くださいませ。どうぞ宜しくおねがいいたします。

—-

【Lightning G3 Pro Unit ランディングページの作成】
こちらはLightning と　Lightning G3 Pro Unit でのランディングページの設定方法です。
よろしければご参考にしてください。

Lightning G3 Pro Unit ランディングページの作成

[うなこ]

gundam さま　

おはようございます、いつもお世話になっております。

グリッドカラムでも、同じようにスマホの場合は真ん中が幅広くなってしまいます。

グリッドカラムブロックは「カラム間の余白」が設定できませんので、「グリッドカラムカードブロック」を使用するのはいかがでしょうか。
グリッドカラムカードブロックでしたら、「カラムの余白」が設定できます。(余白は共通になりますので、デバイスごとには設定できません)

いかがでしょうか、一度ご確認お願いいたします。
よろしくお願いいたします。

[うなこ]

前嶋美佐子さま

お世話になっております。

ロゴ左側の余白等はCSSなどで調整するということになりますでしょうか（SP用ロゴは画像で配置しました）。
また、ロゴを中心に配置する場合もCSSで調整することになりますでしょうか。

【余白の件】
余白の件ですが、モバイル用のヘッダーの内側の余白は、一番外側の親のブロックを選択して（添付画像参照：添付画像の場合は“ヘッダー_モバイル用”という名前のグループブロック）右側のブロックの設定画面から、サイズの「パディング」から設定可能です。

【モバイルでのロゴ中央の件】
ロゴを中心にする件ですが、ロゴを中央でナビゲーションを右寄せというイメージであっておりますか？
もしそうでしたら、こちらのパターン「ヘッダー サイトロゴメニュー中央 / ナビゲーション」がイメージに近いと思います。

現状ですと横並びブロックでロゴとナビゲーションを横並びにしています。横並びブロックですと、ロゴだけ中央寄せにはできないため（配置からロゴとナビゲーションを中央寄せにはできます）、“ヘッダー_モバイル用”のグループブロック部分を、上記のパターン「ヘッダー サイトロゴメニュー中央 / ナビゲーション」の“ヘッダー_モバイル用”のグループブロックと差し替えるか、該当箇所を参考にして調整してみてください。

Attachments:

You must be logged in to view attached files.

[うなこ]

前嶋美佐子さま

Block Template Partsにてモバイル用メニューを追加しましたが、PCで表示されてしまうのとSPのメニューバーは表示されるようになりましたが、位置・動作が正しいのか不安がございます。

「保育園・幼稚園02_トップページ」のパターンの、モバイル用のヘッダーの設置方法です。

1. ［添付画像1枚目参照］ モバイル用のナビゲーションメニューが設置し終わりましたら、編集画面の「ナビゲーション」ブロックを選択して、右側のブロックの設定画面の「オーバーレイメニュー」を「常時」に変更します。
2. ［添付画像2枚目参照］ 次に、モバイル用のヘッダーの一番親のブロック（添付画像では“ヘッダー_モバイル用”という名前のグループブロック）を選択して、右側のグループブロックの設定画面の下の方にある「非表示設定」をクリックで展開して、「画面サイズ : md 、　画面サイズ : lg、画面サイズ : xl、画面サイズ : xxl 」をONにします。そうしますと画面サイズがsm と xsサイズのみで表示されるようになります。

添付いただきました該当URLを確認しましたところ、モバイル用のヘッダーがうまく設置できていないようですので、
ブロックの構成などは、添付画像の2枚目を参考にしながら、設置してみてください。

もしくは、適当に固定ページを新規で作って、「保育園・幼稚園02_トップページ」をコピペして、“ヘッダー_モバイル用”のグループブロックを参考にしてください。

いかがでしょうか？
不明な点などございましたらご連絡ください。

Attachments:

You must be logged in to view attached files.

[うなこ]

前嶋美佐子さま

お世話になっております、VK Pattern Libraryのご利用ありがとうございます。

「保育園・幼稚園02_トップページ」のパターンの、PCとタブレットサイズ用のヘッダーナビ部分は、カラムブロックとVK Blocks のボタンブロックを組み合わせて作っています。モバイルのサイズではコアのナビゲーションブロックを使用しています。
※理由としましては、コアのナビゲーションブロックは現時点（2024年5月現在）では、ラベルにHTMLが入力できないため、ラベルにFontAwesomeのタグが挿入できませんでしたので、このような作りにしています。

上記の作りのため、モバイルサイズでのナビゲーションブロックは、添付画像のように「新しいメニューを作成しますか」をクリックして新規で新しいメニューを作成する必要があります。

右のナビゲーションブロック設定画面の「新しいメニューを作成しますか」をクリックしますと、添付画像2枚目のように、「＋」ボタンがでてきますので、ここからメニューを設定していきます。

ナビゲーションブロック

ランディングページ（LP）で、ナビゲーションブロックでページ内リンク（カスタムリンク）を設置する方法

一度、上記のマニュアルを見ながら、設定をしてみてください。

もしわからない箇所がございましたらお知らせください。

よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[うなこ]

解決したようで安心しました。こちら「解決済み」とさせていただきました。

今後ともよろしくお願いいたします。

[うなこ]

gundamさま

調整いたしまして、一旦は以下のCSSでいかがでしょうか。

/* レイアウト：カード */
/* 767.98以下 */
@media (max-width: 767.98px){
.vk_posts.vk_posts-layout-card {
justify-content: space-between;
margin-left: 0;
margin-right: 0;
}

.vk_post.card.vk_post-col-xs-6.vk_post-col-sm-6 {
width: calc(50% - 7px);
margin-left: 0px;
margin-right: 0px;
margin-bottom:14px;
}
}

CSSにつきましては、こちらがわかりやすいかと思いますので、もしよろしければご確認ください。

できる！CSSカスタマイズ

よろしくお願いいたします🙇

[うなこ]

mamikawataさま

Lightning Proのご利用ありがとうございます。

カルーセルインジケータは 767.98px以下の幅で非表示になるようにテーマ側にcssが設定してありますので、
cssで上書きする必要があります。

以下のcssでいかがでしょうか？

.carousel-indicators {
        display: flex;
 }

[うなこ]

Gundamさま

お世話になっております。Lightningをご利用いただき、誠にありがとうございます。

ご指摘の通り、スマートフォンサイズでは余白が大きいですね。一度社内で検討させていただきます。

お手数をおかけいたしますが、ひとまず以下のCSSを追加して対応していただけますでしょうか。
外観 > カスタマイズ > 追加CSSなどに以下を追加してください。
767.98px以下で余白が小さくなります。幅の数値や5pxはお好みで変更してください。

/*レイアウト：カード*/
.vk_posts-layout-card{
    justify-content: center;
}
@media (max-width: 767.98px) {
    .vk_post {
        margin-left: 5px;
        margin-right: 5px;
    }
}

[うなこ]

ROCKETS さま

VK Blocks Proのご利用ありがとうございます。

提案となります。
VK投稿リストブロックではなく、WordPressコア側のブロック、クエリーループと投稿テンプレート、ページ送りブロックを設置するのはいかがでしょうか。

VKパターンライブラリに、VK投稿リスト風のパターンがございますので、こちらをコピーして該当の固定ページに設置してください。
ページごとの項目数はクエリーループブロックの表示設定から変更できます。

▼クエリーループ投稿リスト_グリッド_カスタムCSSのパターン

クエリーループ投稿リスト_グリッド_カスタムCSS

Lightningのページ送りと同じデザインにしたい場合は、cssで調整する必要があります。

一度お試しください。

もしうまくいかない場合はお知らせください。

【追記】
↓石川さんのご回答が一番シンプルですので、そちらをお試しくださいー🙇

[うなこ]

suisei98さま
パターンライブラリのご利用ありがとうございます。

添付画像のように、ブロックの「クエリーループ」ブロックを選択して、「表示設定」ボタンをクリックし、ページごとの項目数を「3」にするといかがでしょうか。

もしうまくいかない場合はお知らせください。よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[うなこ]

gundamさま、お世話になっております。

具体的な解決方法の記載、ありがとうございます！

解決したようで安心いたしました。
今後ともよろしくお願いいたします。

[投稿者]

投稿