VK パターンライブラリ の上記のパターンをどうやって作っているか調べてみました。
😮おー、こうやってるんだぁ!! 😍へぇ、そういう組み合わせ方があるのかぁ!! とか言いながら、参考にさせてもらいました。
PC ではボックス内の文字を大きく表示するようにカスタマイズを加えてあります。

夏
期
講
習
申
込
受
付
中
小学生 / 中学生 / 高校生 対象
受付期間
7月20日[木]– 8月31日[木]
「夏」「期」「講」「習」の部分はこうなっている
グループブロックに1文字ずつ入れて、グループブロックの背景と枠線で設定しています。
色をキーカラーかカスタムカラーに変更すると、ブロックパターンとして便利に使いまわしできそうです。
CSS に慣れているとこのデザインを作るときは span を使いたくなりますが、ブロックエディタでの編集しやすさを考えるとこのパターンのやり方がいいですね。

01
長期休暇を有意義に活用
夏休みは長期間の休暇期間ですが、その間に学習を進めることで、生徒は効果的に時間を活用できます。
02
集中できる学習環境
集中して学習に取り組むことができるため、普段の授業では理解が難しかったり、ついていくのが厳しいと感じていた内容も、充実したサポートのもとで理解を深めることができます。
03
定期テスト対策
新学年が始まる前に、前の学年の復習や予習を行うことで、学校での成績向上につながります。
左上の三角はこうなっている
CSS の before ではなく、背景の Gradient で設定しています。
なるほど...
比較のために 03 の設定を変えてあります。
カスタムカラー 1~3 の設定したものを作ってみました。

01
キーカラー
夏休みは長期間の休暇期間ですが、その間に学習を進めることで、生徒は効果的に時間を活用できます。
02
カスタムカラー 1
集中して学習に取り組むことができるため、普段の授業では理解が難しかったり、ついていくのが厳しいと感じていた内容も、充実したサポートのもとで理解を深めることができます。
03
カスタムカラー 4
新学年が始まる前に、前の学年の復習や予習を行うことで、学校での成績向上につながります。
この夏、未来を輝かせる学びの冒険へ!
夏の陽差しに包まれた楽しい時間がやってきます!夏休みは新たな学びのチャンスです!私たちの夏期講習は、夏休みを有意義に過ごしたい、次の学年に自信を持って進みたい、定期テストで輝く成績を収めたいと願う皆さんのための特別なプログラムです。集中して学び、友達と一緒に成長する素晴らしい冒険を始めましょう!カリキュラムは学年に合わせてカスタマイズされ、経験豊富な講師陣がサポートいたします。
この夏、私たちと一緒に未来を輝かせる学びの旅へ出かけませんか?夏期講習で、新たな可能性が広がります!
各コースのご案内
各学年・コースごとの詳細は、こちらからご確認ください。



3つのバナー
VK Block Patterns の Banner → カラムバナー を使っている。
よくある質問
-
夏期講習の日程や時間帯はどのようになっていますか?
-
夏期講習の日程や時間帯は、通常学校の夏休み期間中に行われます。具体的な日程や時間帯は、コースによって異なりますので、詳細は当サイトの「夏期講習コース案内」ページでご確認ください。
-
夏期講習の料金や支払い方法について教えてください。
-
夏期講習の料金は、講習内容やコースによって異なります。詳細な料金については、当サイトの「料金プラン」ページでご確認ください。支払い方法は、クレジットカードや銀行振込など複数の方法を用意しております。
-
夏期講習は対象学年や教科によって異なるのでしょうか?
-
はい、夏期講習は対象学年や教科によって異なるコースをご用意しています。小学生から高校生までの幅広い学年に対応し、数学・英語・国語・理科・社会などの各教科に対するコースがあります。詳細は当サイトの「コース案内」ページをご参照ください。
-
夏期講習は全日制ですか?週末のみの受講は可能ですか?
-
夏期講習は、通常、全日制と週末のみのコースが用意されています。全日制は、平日に一定の時間を学習に充てるプログラムで、集中的に学ぶことができます。一方、週末のみの受講は、平日に他の予定がある方や時間を柔軟に使いたい方向けに提供されています。両方のコースには利点がありますので、生徒と保護者のスケジュールに合わせて最適なコースを選択できます。
-
夏期講習だけを受講することはできますか?
-
はい、夏期講習だけ受講することもできます。
みんなの声

夏休みの講習は最高でした!!
じろうさん(小6)
友達と一緒に勉強できて、楽しく過ごせました。先生が優しくて、分かりやすく教えてくれたので、苦手な問題も乗り越えることができました。これからもこの塾で学ぶのが楽しみです!

夏期講習は、とても充実しました。
じょにーさん(中2)
難しい問題にもチャレンジでき、わからないところは丁寧に教えてもらえました。講習のおかげで成績が上がり、自信がつきました。これからもお世話になります!

合格に向けて大きな一歩でした。
まいかさん(高2)
短期間で効率的に学べ、苦手な科目も克服できました。先生方のサポートが頼りになり、仲間と切磋琢磨する中で、学ぶ楽しさを再認識しました。感謝しています!
夏の無料体験受付中
期間:7月20日(木)~8月31日(木)
期間中に2回、無料体験学習が可能
ご相談・ご質問はお気軽に
電話でのお問い合わせ
052-000-0000
(受付時間:10:00 - 20:00)
投稿者プロフィール

- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿

Lightning テーマ使用
中小企業様、個人事業主様向け
最適なホームページ
を制作いたします
制作費用 | クオリティを落とさずに 価格を抑えたサイトを制作します |
必要十分 | お問い合わせフォーム、新着情報など 必要なものが最初から揃っています |
サポート | 1年間のサポートがついて安心 初めてでもホームページを活用できます |