うなこ

フォーラムへの返信

15件の投稿を表示中 - 31 - 45件目 (全1,058件中)
  • 投稿者
    投稿
  • 返信先: Outerブロックの背景設定について #102818

    うなこ
    モデレーター

    背景画像の位置は CSS の background-position で指定できます

    https://developer.mozilla.org/ja/docs/Web/CSS/background-position

    例えば background-position: top; の指定を追加してみてください


    うなこ
    モデレーター

    解決できたようで安心しました!

    all、xs、md、など、実際にどれくらいの画面サイズなのか想像がつかいないのですが、ザックリで結構ですので、教えて頂けたらと思います。

    非表示設定」のページでもご案内しておりますが、以下のサイズになっております。よろしくお願いいたします

    xs~xxl各サイズの範囲は、以下のように設定されています。

    xs:~576px
    sm:576px ~768px
    md:768px~992px
    lg:992px~1200px
    xl:1200px~1400px
    xxl:1400px~


    うなこ
    モデレーター

    VK Blocks の「非表示設定」でご希望のことができると思います。

    「お知らせ」部分をグループブロックなどで囲い、複製して一番上に配置します。
    グループブロックを選択して「非表示設定」から非表示にしたい画面サイズをオンにします。(添付画像参照)

    PC用のお知らせも同様にグループブロックなどで囲い、「非表示設定」から非表示にしたい画面サイズをオンにします。

    いかがでしょうか。

    Attachments:
    You must be logged in to view attached files.

    うなこ
    モデレーター

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

    現在パソコンでは、お知らせ投稿の表示位置を下部にしているのですが、モバイル表示での場合は上部にしたい。

    こちらの件ですが、現状の症状が確認できるページの画面キャプチャか、ページのURLなどをご提示いただけますと、具体的なアドバイスがつきやすくなると思います。
    お手数をおかけいたしますが、何卒よろしくお願いいたします


    うなこ
    モデレーター

    Lightning G3 Pro Unit のライセンスキー(Vektor Passport)は問題なく通りますが、VK Blocks Library のライセンスキー入力が、何度やっても(コピペでなく手入力しても)保存されません「変更を保存」が永遠に続きます。

    お世話になっております。
    こちらの件は、「VK Blocks Pro」のライセンスキーを入力しても、「VK Blocks Pro : ライセンスキーが登録されていません。」のアラートが消えない ということでしょうか。
    もしそうだとしましたら、
    ライセンスキー入力ページの左側にある「更新の再取得」というテキストリンクを押すと「VK Blocks Pro : ライセンスキーが登録されていません。」が消えると思いますがいかがでしょうか。

    もしこの画面のことでない場合は、該当の画面を教えていただけますと幸いでございます

    Attachments:
    You must be logged in to view attached files.

    うなこ
    モデレーター

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

    ご質問いただきました件につきまして、VK Blocks の「非表示設定」機能で画面サイズごとに出しわけして解決できます。

    1. まず、「ナビゲーション」ブロックを複製して、複製した「ナビゲーション」の設定画面の「オーバーレイメニュー」を「常時」にします。(添付画像1枚目参照)
    2. 「ナビゲーション」の設定画面の下の方にある「非表示設定」を展開して、非表示にしたい画面サイズをオンにします(添付画像2枚目参照)
    3. 元々あった「ナビゲーション」の方も「非表示設定」を展開して、非表示にしたい画面サイズをオンにします(添付画像3枚目参照)

    非表示設定の画面サイズはお好みでご変更ください。
    以上で、ご希望の形になると思いますがいかがでしょうか

    Attachments:
    You must be logged in to view attached files.
    返信先: Outerブロックの背景設定について #102745

    うなこ
    モデレーター

    CSSで、モバイル(iphone)も固定表示にさせることは可能でしょうか。

    「iOS 固定背景」などで検索していただくと、さまざまな方法が見つかるかと思います。
    例えば、代表的なもので :before 擬似要素に背景を設定する方法などがありますので、一度お試しいただくと良いかもしれません。
    こちらも参考になるかと思います。
    https://qiita.com/baby-0105/items/733394271869a727689f

    難しければ、画像の横幅をモバイルの表示幅に合わせて、縦の足りないぶんは繰り返し表示させる方法で対応したいです。

    以下は、Outerブロックに「カスタムCSS」で、幅が991.98px以下のときにリピートするサンプルのCSSになります。
    適宜調整してお使いください。

    /*背景画像*/
    @media(max-width:991.98px) {
    selector.vk_outer-bgPosition-fixed{
    background-size: contain !important;
    background-repeat: repeat-y;
    }
    }

    それと、PCで編集しているのですが、PCの開発者ツールでスマホ表示を確認すると、モバイルサイズでも狙った通りの画面幅で背景固定で表示されているのですが、これは「iphone以外のモバイルでは固定表示される」ためでしょうか。

    iOSのバグによるものですので、おそらくAndroidなどのスマホですと固定されていると思います。
    (WordPressコアのカバーブロックの固定背景でも、iPhoneだと固定されていないと思います)

    先ほどご案内したCSSを使用して、必要に応じて調整してみてください。

    CSSに関しましては、こちらがわかりやすいと思いますので、参考にしてください。

    できる!CSSカスタマイズ


    うなこ
    モデレーター

    chromeの開発者ツールで確認すると追加したCSSは取り消し線になっていて、元のCSSが有効になっています。

    該当URLは確認できませんでしたが、CSSの指定を強くすると反映されると思います。
    例えば以下のような形です

    .lightning_swiper .mini-content-container-1 .btn {
    border-color: #ffffff;
    background-color: #060c2d;
    }

    CSSにつきましてはこちらに詳しく載っていますので、ご確認ください。

    できる!CSSカスタマイズ

    もしくは、Lightning トップページスライドショーは非表示にして、VK Blocks のスライダーを使用すると自由にボタンの色などを変更しやすいです。

    ※【外観】>【カスタマイズ】> Lightning トップページスライドショー の 表示設定:スライドを非表示にする で非表示にできます。

    スライダー

    返信先: VK Pattern センターズレ #102173

    うなこ
    モデレーター

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

    外観 > カスタマイズ > Lightning レイアウト設定 > カラム設定 のトップページが「2カラム」になっていませんか?
    (もしくは記事編集画面 > Lightning デザイン設定 パネル内 「レイアウト設定」が「2カラム」)
    もしなっていたら「1カラム」に設定して保存してください。

    Lightning 基本設定解説 レイアウトの設定

    返信先: 上部メニューの表示が崩れる #102041

    うなこ
    モデレーター

    石川さんのおっしゃるようにオレンジフォーム側とテーマ側のCSSが干渉しているようですので、CSSで指定を強めに書くと調整できるかとは思います。

    例えば【カスタマイズ】>【追加CSS】などに以下のように書くと、テーマ側のcssが強くなります

    .site-header-logo img {
        max-height: 50px !important;
    }

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

    できる!CSSカスタマイズ


    うなこ
    モデレーター

    ナビゲーションの部分ですが、少し複雑な点があり申し訳ございません。

    この保育園・幼稚園02_トップページのパターンでは、PCとタブレットサイズ用のヘッダーナビ部分は、カラムブロックとVK Blocks のボタンブロックを組み合わせて作っています。
    またモバイルのサイズはWordPressコアのナビゲーションブロックを使用していますので、ご自分のサイトに合わせたナビゲーションを設置いただければと思います。

    (ヘッダーナビゲーション部分がこのような作りになっている理由としましては、コアのナビゲーションブロックは現時点では、ラベルにHTMLが入力できないため、ラベルにFontAwesomeの<i> タグが挿入できませんでしたので、このような作りにしています。)

    ▼以下はナビゲーションブロックでページ内リンク(カスタムリンク)を設置する方法の記事になります。
    ご参考になれば幸いです。

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

    返信先: カフェメニュー表_アコーディオン #101946

    うなこ
    モデレーター

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

    どのタイミングかは分からないですが、メニュー表の金額の欄が上にずれてしまっています。

    確認しまして、段落ブロック下に余白が入っておりました。
    添付画像のように、料金の段落ブロックを選択していただき、ツールバーにある VK Blocks の機能「ブロックの余白」をクリックして「下0」を選択していただくと余白が消えると思います。

    また、「カフェメニュー表_アコーディオン」パターンも修正させていたきました。ご報告ありがとうございました。

    Attachments:
    You must be logged in to view attached files.

    うなこ
    モデレーター

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

    ご質問いただきました件ですが、Outerブロックになりますので、
    右側のブロックの設定画面の「背景設定」を展開しますと、背景画像(PC)、背景画像(タブレット)、背景画像(モバイル)が表示されます。そこから画像を置き換えできます。(添付画像参照)

    ※背景画像(タブレット)、背景画像(モバイル)に設定画像がない場合は、背景画像(PC)に設定した画像が表示されます。

    Outerブロックについて

    Outer(Pro版のみ)

    Attachments:
    You must be logged in to view attached files.

    うなこ
    モデレーター

    Withさま
    いつもお世話になっております。

    VK パターンライブラリーに「子ページリスト_カード(水平)_幅 767.98px 以下では縦に並べる」のパターンを作成いたしましたが、いかがでしょうか。
    カスタムcssでカスタマイズしておりますので、ブレイクポイントなどはお好みの数字に変更したりしてみてください。

    子ページリスト_カード(水平)_幅 767.98px 以下では縦に並べる

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


    うなこ
    モデレーター

    返信ありがとうございます。
    WordPressの「ギャラリー」ブロックは、キャプションにグラデーションの背景が入るようになっていますので、(現時点では)ブロックの設定からは調整できないようでしたので、cssでカスタマイズする必要があります。

    【外観】>【追加 CSS】に以下をコピーして貼り付けてください。

    /*ギャラリーのキャプション*/
    .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
    	background:none !important;
    	color:#222 !important;
    }

    もしくは他のブロックと画像の組み合わせにするのはいかがでしょうか。
    ※ 添付画像をご確認ください

    Attachments:
    You must be logged in to view attached files.
15件の投稿を表示中 - 31 - 45件目 (全1,058件中)