うなこ
フォーラムへの返信
-
投稿者投稿
-
うなこモデレーター背景画像の位置は 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~
うなこモデレーター
うなこモデレーターお世話になっております。
現在パソコンでは、お知らせ投稿の表示位置を下部にしているのですが、モバイル表示での場合は上部にしたい。
こちらの件ですが、現状の症状が確認できるページの画面キャプチャか、ページの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枚目参照)
- 「ナビゲーション」の設定画面の下の方にある「非表示設定」を展開して、非表示にしたい画面サイズをオンにします(添付画像2枚目参照)
- 元々あった「ナビゲーション」の方も「非表示設定」を展開して、非表示にしたい画面サイズをオンにします(添付画像3枚目参照)
非表示設定の画面サイズはお好みでご変更ください。
以上で、ご希望の形になると思いますがいかがでしょうかAttachments:
You must be logged in to view attached files.
うなこモデレーター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に関しましては、こちらがわかりやすいと思いますので、参考にしてください。
うなこモデレーターchromeの開発者ツールで確認すると追加したCSSは取り消し線になっていて、元のCSSが有効になっています。
該当URLは確認できませんでしたが、CSSの指定を強くすると反映されると思います。
例えば以下のような形です.lightning_swiper .mini-content-container-1 .btn { border-color: #ffffff; background-color: #060c2d; }
CSSにつきましてはこちらに詳しく載っていますので、ご確認ください。
もしくは、Lightning トップページスライドショーは非表示にして、VK Blocks のスライダーを使用すると自由にボタンの色などを変更しやすいです。
※【外観】>【カスタマイズ】> Lightning トップページスライドショー の 表示設定:スライドを非表示にする で非表示にできます。
うなこモデレーターお世話になっております。Lightning Pro のご利用ありがとうございます。
外観 > カスタマイズ > Lightning レイアウト設定 > カラム設定 のトップページが「2カラム」になっていませんか?
(もしくは記事編集画面 > Lightning デザイン設定 パネル内 「レイアウト設定」が「2カラム」)
もしなっていたら「1カラム」に設定して保存してください。
うなこモデレーター石川さんのおっしゃるようにオレンジフォーム側とテーマ側のCSSが干渉しているようですので、CSSで指定を強めに書くと調整できるかとは思います。
例えば【カスタマイズ】>【追加CSS】などに以下のように書くと、テーマ側のcssが強くなります
.site-header-logo img { max-height: 50px !important; }
CSSにつきましては以下がわかりやすいと思いますので、よろしければご確認ください。
うなこモデレーターナビゲーションの部分ですが、少し複雑な点があり申し訳ございません。
この保育園・幼稚園02_トップページのパターンでは、PCとタブレットサイズ用のヘッダーナビ部分は、カラムブロックとVK Blocks のボタンブロックを組み合わせて作っています。
またモバイルのサイズはWordPressコアのナビゲーションブロックを使用していますので、ご自分のサイトに合わせたナビゲーションを設置いただければと思います。(ヘッダーナビゲーション部分がこのような作りになっている理由としましては、コアのナビゲーションブロックは現時点では、ラベルにHTMLが入力できないため、ラベルにFontAwesomeの
<i>
タグが挿入できませんでしたので、このような作りにしています。)▼以下はナビゲーションブロックでページ内リンク(カスタムリンク)を設置する方法の記事になります。
ご参考になれば幸いです。
うなこモデレーターお世話になっております、VKパターンライブラリのご利用ありがとうございます。
どのタイミングかは分からないですが、メニュー表の金額の欄が上にずれてしまっています。
確認しまして、段落ブロック下に余白が入っておりました。
添付画像のように、料金の段落ブロックを選択していただき、ツールバーにある VK Blocks の機能「ブロックの余白」をクリックして「下0」を選択していただくと余白が消えると思います。また、「カフェメニュー表_アコーディオン」パターンも修正させていたきました。ご報告ありがとうございました。
Attachments:
You must be logged in to view attached files.
うなこモデレーターお世話になっております、VK パターンライブラリーのご利用ありがとうございます。
ご質問いただきました件ですが、Outerブロックになりますので、
右側のブロックの設定画面の「背景設定」を展開しますと、背景画像(PC)、背景画像(タブレット)、背景画像(モバイル)が表示されます。そこから画像を置き換えできます。(添付画像参照)※背景画像(タブレット)、背景画像(モバイル)に設定画像がない場合は、背景画像(PC)に設定した画像が表示されます。
Outerブロックについて
Attachments:
You must be logged in to view attached files.
うなこモデレーターWithさま
いつもお世話になっております。VK パターンライブラリーに「子ページリスト_カード(水平)_幅 767.98px 以下では縦に並べる」のパターンを作成いたしましたが、いかがでしょうか。
カスタムcssでカスタマイズしておりますので、ブレイクポイントなどはお好みの数字に変更したりしてみてください。よろしくお願いいたします。
うなこモデレーター返信ありがとうございます。
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. -
投稿者投稿