[うなこ]

前嶋美佐子さま

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さま、お世話になっております。

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

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

[うなこ]

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

固定ページのカスタムCSSで次のコードを試しました。
body{
background-image: url(‘************’);
background-repeat: repeat;
}

このCSSはbody要素に背景画像が設定され、背景画像は繰り返し（repeat）表示されますので、CSSは間違っていないように見えます。

もし可能でしたら症状の出ているページのURLを添付していただけますと、回答が得られやすくなります。

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

[うなこ]

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

見出しの装飾をインライン画像ではなく、cssでつけるのはいかがでしょうか？

以下はスタイルが「装飾なし」のh2見出しの左側に、ラインがつくようなcssになります。

h2.is-style-vk-heading-plain{
padding-left:14px;
}
h2.is-style-vk-heading-plain::before{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0px;
width: 5px;
 height: 25px;
content: '';
background: var(--vk-color-primary);
}

[うなこ]

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

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

余白の件ですが、編集画面の右側になる「固定ページ」の設定の「Lightning デザイン設定」の中にある「余白設定」> 「サイトコンテントの上下余白を無しにする」にチェックを入れていただきますと、余白が無くなると思います。（添付画像参照）

いかがでしょうか。

Attachments:

You must be logged in to view attached files.

[うなこ]

トップページ用の固定ページ内カラムに
画像を6枚程度掲載しております。

それぞれの画像には、画像のリンク先に
「ライトボックス効果で画像を拡大」が
設定できるようになっています。

しかし、それを設定すると
IOSでハンバーガーメニューが開かなくなってしまう現象が生じます。
（三本線は問題なく表示されます。
また、androidではこの現象なくメニュー開きます）

こちらの環境で試したところ、わたしのiPhone(iOS 17.5.1)では問題なくメニューは開きました。
症状のおこるiPhoneでこのデモサイトを開くと、ハンバーガーメニューは開きますか？

また、safari以外の他のブラウザで開くと、ハンバーガーメニューは開きますか。
iOSのバージョンはいくつでしょうか。
あと、もし差し支えなければ症状の起こるサイトのURLを共有していただくことは可能でしょうか。

[うなこ]

解決したようで安心しました！

確認したところ、キーカラーは青色に設定されていて、ボタンも赤ではなくこの青色になっていました。

「？？？」なのですが、LightningのバージョンをG2（PRO）からG3にアップグレードしたので、その際に正常な形に戻されたと推察しています。

はい、そうですね。Lightning Pro テーマでキーカラーが赤色になっていて、テーマを Lightning へ変更をしたので、キーカラーの色が Lightning のデフォルトのキーカラー（ブルー）になったのだと思います。

[うなこ]

お世話になっております。
ボタンのホバー時のカラーですが、キーカラーが適応されるようになっておりますので、
【外観】>【カスタマイズ】>【色】から、キーカラーを設定できます。

サンプルと同じ色にするには、キーカラー部分に#3c8b86と入力してください。

色の設定方法はベクトレの「Lightning 基本設定解説 キーカラー / カスタムカラーの設定」をご確認いただけますと、わかりやすいと思いますので、ぜひご確認ください。

Lightning 基本設定解説 キーカラー / カスタムカラーの設定

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿