うなこ

フォーラムへの返信

15件の投稿を表示中 - 1 - 15件目 (全975件中)
  • 投稿者
    投稿

  • うなこ
    モデレーター

    jkwebさま

    添付画像ありがとうございます、画像を見る限りでは操作は合っているように思います。
    数字を入れた後に、「Enter」キーを押すと、数値が入ったりしませんか?どうでしょうか。

    もしそれでも余白が入らないようでしたら、以下のパターンを用意しましたので、お手数ですが、こちらをコピペして、作り直していただくのが早いかもしれません。

    グリッドカラムカード_カラムカードアイテム毎に別の背景色

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


    うなこ
    モデレーター

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

    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 さま 

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

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

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

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

    返信先: SPメニュの際に表示がされない #96214

    うなこ
    モデレーター

    前嶋美佐子さま

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

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

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

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

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

    Attachments:
    You must be logged in to view attached files.
    返信先: SPメニュの際に表示がされない #96151

    うなこ
    モデレーター

    前嶋美佐子さま

    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.
    返信先: SPメニュの際に表示がされない #96104

    うなこ
    モデレーター

    前嶋美佐子さま

    お世話になっております、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.
15件の投稿を表示中 - 1 - 15件目 (全975件中)