うなこ
フォーラムへの返信
-
投稿
-
traveller さま
Snow Monkey Blocks を無効化された際に現象が解消されるとのことで、情報ありがとうございます。
VK Blocks と Snow Monkey Blocks を併用いただく際、アイコン表示において相性の問題が確認されております。このため、両プラグインを同時にご利用いただく場合、予期しない不具合が生じる可能性がございます。
現状、この改善には Snow Monkey Blocks のコードを含めた検証と修正が必要であり、ただいまのところ確実な回避策をご提供することが難しい状況です。
お手数をおかけいたしますが、何卒ご理解賜りますようお願い申し上げます。引き続きご不明点などございましたら、お気軽にご連絡ください。
お世話になっております。VK Blocksのご利用ありがとうございます。
「ボタン」ブロックではFont Awesome 6 Freeのアイコンを設定できますが、1度設定したアイコンを設定し、ページ保存後、再度、アイコンを編集しようとすると、「このブロックでエラーが発生したためプレビューできません。」というエラーが表示される。
文字の前も文字の後も、どちらも同様。エラーの件ですが、私の環境（同じバージョン）ではエラーが確認できませんでした。
もしかすると、プラグインの可能性もあります。「EditorsKit」というプラグインをご利用ではないでしょうか？もし利用している場合は停止するとエラーが消えますか？
一度ご確認お願いいたします。お世話になっております。
内容を確認しまして、元々の工務店で使用しているバナーですが、少し複雑な構成をしていましたので、新たにご要望に近いパターンをVK パターンライブラリに登録しました、
工務店で使用しているバナーはカバーブロックやボタンブロックを使用していますが、今回は背景画像を使用しないとのことでしたので、グリッドカラムカードブロックで実装してあります。イメージと違う場合は以下で説明させていただきましたので、ご確認ください。
ーーー
今回工務店のパターンライブラリの、会社案内から役立ちブログまでの箇所を流用しておりますが、hover時に色が変わる効果はカスタムCSSに書かれていなかったと思うのですが、こちらはカスタムCSSを利用せず標準の機能で実装可能なのでしょうか？
こちらのパターンはカバーブロックのリンク機能を実装する前に作成したパターンになるため、「VK Block Patterns」プラグインを使用して、カバーブロックとボタンブロックで、ボタンブロックのリンクをカバー全体に広がるようなcssをプラグイン側で書いております。
hover時に色が薄くなる効果は、
opacityで半透明にして実装しています。
::before要素で半透明の黒色を全体にいれており、hover時に透明になるようにしています。selector .vk_button:not(.vkp_button-through-arrow)::before{/*背景スライドボタンは除外しないとおかしくなる*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; background: #000; opacity:0.4; transition: all 0.5s ease-out; z-index:-1; } selector .vk_button:hover::before { opacity: 0; transition: all 0.5s ease-out; }ご回答にあったカバーブロック内の構造ですが、カバーブロック直下にボタンブロックがあるだけで、特にグループブロックは使用しておりません。
画面キャプチャを確認しましたところ、カバーブロックの上に「グリッド」が入っておりますが、このグリッドは必要なのでしょうか。もしかすると、リンクの範囲がおかしくなる原因かもしれないと思いお聞きしました。
ご確認、よろしくお願い致します。
お世話になっております、パターンライブラリのご利用ありがとうございます。
カスタムcssでは、カバーブロック自体が拡大され、影が薄くなる効果も消えてしまいました。
cssを拝見しました。
selector:hoverこの書き方ですと、カバーブロック全体を対象としているので、カバーブロック自体が拡大します。
（この辺りは、ブラウザの検証ツールなどを使用してクラス名を確認して、背景画像の部分に対してcssを書くとうまくいくのではないかなと思います。）パターンライブラリからコピーして使っていましたが、中央のテキストより上の範囲がリンクから外れる（ホバーして拡大はするがクリックできない）症状が出てしまいました。
おそらくですが、カバーブロックの中にグループブロックがあり、グループブロックの方にリンクを設置しているのではないかと思います。
VK パターンライブラリに、hover時に背景画像が拡大して背景画像が薄くなり影がつくような、ご希望に近いバナーを作成しました。
こちらからコピーして、微調整していただくと良いかもしれませんがいかがでしょうか。ご検討よろしくお願いいたします。
お世話になっております。
フローティングバナーの提案になります。
VK Blocks Pro に「固定表示ブロック」がありますので、そちらを設置して、中にはお好みのブロックを入れて追従バナーを設置するのはいかがでしょうか。こちらですとブロックで設置できますので、cssを書くよりも簡単に設置できるのではないかと思いまして、提案させていただきました。
お世話になっております。
わたしの環境で再現できませんでしたので、お手数おかけしますが、エラー共有方法の「1. 投稿内容を共有」の部分をご確認していただき、コードを共有していただくことは可能でしょうか。
どうぞよろしくお願いいたします。背景画像の位置は 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用のお知らせも同様にグループブロックなどで囲い、「非表示設定」から非表示にしたい画面サイズをオンにします。
いかがでしょうか。
お世話になっております。
現在パソコンでは、お知らせ投稿の表示位置を下部にしているのですが、モバイル表示での場合は上部にしたい。
こちらの件ですが、現状の症状が確認できるページの画面キャプチャか、ページのURLなどをご提示いただけますと、具体的なアドバイスがつきやすくなると思います。
お手数をおかけいたしますが、何卒よろしくお願いいたしますLightning G3 Pro Unit のライセンスキー（Vektor Passport）は問題なく通りますが、VK Blocks Library のライセンスキー入力が、何度やっても（コピペでなく手入力しても）保存されません「変更を保存」が永遠に続きます。
お世話になっております。
こちらの件は、「VK Blocks Pro」のライセンスキーを入力しても、「VK Blocks Pro : ライセンスキーが登録されていません。」のアラートが消えない ということでしょうか。
もしそうだとしましたら、
ライセンスキー入力ページの左側にある「更新の再取得」というテキストリンクを押すと「VK Blocks Pro : ライセンスキーが登録されていません。」が消えると思いますがいかがでしょうか。もしこの画面のことでない場合は、該当の画面を教えていただけますと幸いでございます
お世話になっております、VK パターンライブラリのご利用ありがとうございます。
ご質問いただきました件につきまして、VK Blocks の「非表示設定」機能で画面サイズごとに出しわけして解決できます。
- まず、「ナビゲーション」ブロックを複製して、複製した「ナビゲーション」の設定画面の「オーバーレイメニュー」を「常時」にします。（添付画像1枚目参照）
- 「ナビゲーション」の設定画面の下の方にある「非表示設定」を展開して、非表示にしたい画面サイズをオンにします（添付画像2枚目参照）
- 元々あった「ナビゲーション」の方も「非表示設定」を展開して、非表示にしたい画面サイズをオンにします（添付画像3枚目参照）
非表示設定の画面サイズはお好みでご変更ください。
以上で、ご希望の形になると思いますがいかがでしょうか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カラム」に設定して保存してください。
