うなこ
フォーラムへの返信
-
投稿
-
お世話になっております。
ひとつの提案になります。
カードブロックではなく、グリッドカラムカードブロックを利用して、
「グリッドカラムカードブロック」の設定の「カラムヘッダーメディアエリア」は「非表示」にして、
「グリッドカラムカードアイテムボディ」 内のタイトルブロックの上にカバーブロックを配置するのはいかがでしょうか。
カバーブロックでしたら背景画像の上にタイトルや段落を配置できますので、ご希望の形に近いのではないかと思いましたがいかがでしょうか。お世話になっております。パターンライブラリのご利用ありがとうございます。
該当サイトを確認しましたところ、「VK Blocks Pro」プラグインがインストールされていないようでした。
※「保育園・幼稚園_年間行事とギャラリー」は「 VK Blocks Pro 」を使用しております「VK Blocks」は無料版のプラグインとなりますので、恐れ入りますが、「VK Blocks Pro」をインストールいただき、有効化していただけますようお願いいたします。
VWSのサイトへログインしていただき、マイアカウント > ダウンロード からダウンロードできます。（ vk-blocks-pro.zip のボタンをクリックしてください。）
Lightning の Pro機能のプラグイン Lightning G3 Pro Unit もインストールがまだでしたら、同様にダウンロードしてください。（ lightning-g3-pro-unit.zip のボタンをクリックしてください。）
どうぞよろしくお願いいたします。
参考サイトを確認いたしました。
Lightning テーマの Lightning G3 Pro Unit プラグインの場合は、ヘッダー設定のヘッダー透過機能で設定としてあるのですが、X-T9 テーマの場合はCSSでカスタマイズしていただくことになります。
position: absolute;で調整されてモバイルでうまくいかなかったとのことですが、以下のCSSでいかがでしょうか。header{ position: absolute; z-index: 10; left: 0; width: 100%; }お世話になっております。
ご質問ありがとうございます。
文章だけですと、どうしても認識に違いが出てしまう可能性がございます。もし可能でしたら、画面キャプチャをとっていただき、「ここをこうしたい」といった内容をキャプチャ画像に書き込んでいただけると、回答がしやすくなるかと思います。
また、参考になるサイトのURLを添付していただけると、さらに状況を把握しやすくなります。
ご記載いただいた内容を確認したところ、以下のようなイメージでしょうか？
リストスタイル（数字）でデフォルトでは初期値変更が正常なのですが「数字-丸」「数字-四角」にすると、
例ol start='3'
が効かなくなります。「順序を逆」の設定も効かないようなので確認していただけますでしょうか。
よろしくお願いします。お世話になっております。
数字付きの「順序付きリスト」（olタグ）について、デフォルトスタイルの場合はブラウザの標準機能で数字が表示されているため、「初期値を変更する」 (start=”3″) や「順序を逆にする」 (reversed) の機能が利用できます。しかし、スタイル「数字-丸」「数字-四角」を選択すると、数字がCSSの counter 関数で生成されるため、これらの標準機能は動作しません。
現在、この仕様について注意書きがなく、わかりづらい点について申し訳ありません。
—–
CSSでカスタマイズする方法【初期値を「3」から始めたい場合】
以下のCSSを「リストブロック」の「カスタムCSS」に追加してください。
「2」の部分は、希望する開始番号より1少ない値に変更してください。selector{ counter-reset: number 2 !important; /* カウンターの開始番号を3に設定 */ }【順序を逆にしたい場合（例: リスト項目が6つの場合）】
リスト項目数が6つの場合の例です。以下のCSSを「リストブロック」の「カスタムCSS」に追加してください。
リスト項目の数が変動する場合は、counter-reset の値を調整してください。selector { counter-reset: reversed-counter 7 !important; /* カウンターを初期化 (例: 最大値を7とする) */ } selector li { counter-increment: reversed-counter -1 !important; /* カウンターを減少させる */ } selector li:before { content: counter(reversed-counter) !important; /* カウンターの値を表示 */ }お世話になっております、返信ありがとうございます。
予めバックアップをとった上で、以下の手順をおこなってください。
購入したライセンスが有効期限内でしたら
* VK Blocks Pro を無効化・削除 します。
* ダッシュボードの上の方に表示されるインストール指示に従って VK Blocks Pro をインストールしてください。いかがでしょうか。
お世話になっております。
お手数おかけしますが、VK Blocks Pro を マイアカウントページのダウンロードからダウンロードして、編集画面のプラグインからアップロードしていただけますでしょうか。
よろしくお願いいたします。お世話になっております。
こちらのパターンがご希望のイメージに近いのではないかと思いましたので、ご案内申し上げます。
なお、矢印部分は CSS の
beforeおよびafter要素で実装されております。
ご確認のほど、よろしくお願いいたします。pepepeさま
お世話になっております。テンプレートとはどのことでしょうか？
右側になる「固定ページ」の設定画面に「テンプレート」の項目があります。（添付画像参照）
そちらをデフォルトテンプレートに変更・保存・再読み込みしてください。ついでで恐縮ですが、
石川さんのコメントの「2.」の部分も「固定ページ」の設定画面にございます。添付画像を参照してください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. 投稿内容を共有」の部分をご確認していただき、コードを共有していただくことは可能でしょうか。
どうぞよろしくお願いいたします。
