アドベントカレンダー参加中！
この記事は「Vektor WordPress Solution Advent Calendar 2023」の12月4日の記事になります。
WordPressとVK Blocksのブロックで、どんなものがつくれるのか興味がある人へ向けて書いています。
こんにちは、スタッフの久納です。
前回の、ゆーそうとさんによる「 Lightningの移り変わりについて調べたことを書きます。」の記事は読まれましたか？進化するLightningの歴史がわかりやすく書かれていますので、まだ読んでいない人はぜひ読んでみてくださいね！
引き続き、『子ども用に「できたよシートクリスマスVar」をWordPressとVK Blocksのブロックで作ってみた』を紹介していきたいと思います。
この記事を書こうと思ったきっかけ
わたしには今年から小学生になった息子がおりまして、息子は赤ちゃん時代から寝つきが悪く早起きできないのが悩みで、小学生になった今は特に苦労しております、、、（小学校早すぎ、、、）。
子どもの生活面をサポートする用によく使われているのが「できたよシート」と言われるものです。
これはシートにご褒美シールを貼ることで達成感を与えるもので、子どもの自信にもつながり目標のサポートもできるので、ちいさいお子さんがいる方は使っている方も多いと思います。百均でも売っているので手軽に使えるのも良いところです。
ちょうどVWSアドベントカレンダーの記事のネタを探していて、、汗 何を書こうかと悩んでいたので、できたよシートのクリスマスバージョンをWordPressのブロックとVK Blocks でつくってみようと思い、記事にすることにしました。
WordPressのブロックとは
WordPressのブロックとは、WordPressでコンテンツを作成していく際に使用するパーツのことです。
WordPress5.0から、クラシックエディタ―からブロックエディターが採用され、コーディングスキルがなくてもきれいなレイアウトが簡単に作成できるようになりました。
完成品
こちらが完成品です。
Vektor製品の「VK Simple Copy Block」プラグインで、簡単にブロックをコピーできるようにしましたので、気になる方は下の「コピーする」ボタンからご自身のWordPressのサイトへコピペしてください。
できたよ！をふやそう
もくひょうをひとつきめて
できたらいろをぬってね
必要なプラグイン
コアのブロックと「VK Blocks」でできていますので、「VK Blocks」がインストールされていない方はインストールしてください。この記事を見てる方は既に使用しているかな？
ブロックの構成
ブロックの中身はこんな感じになっています。左上の三角マークは、親のグループブロックの背景グラデーションでつけています。
- グループブロック
- 横並び
- アイコン（VK Blocks）
- 横並び
- アイコン（VK Blocks）
- 横並び
- アイコン（VK Blocks）
- アイコン（VK Blocks）
- 横並び
- アイコン（VK Blocks）
- アイコン（VK Blocks）
- アイコン（VK Blocks）
- 横並び
- アイコン（VK Blocks）
- アイコン（VK Blocks）
- アイコン（VK Blocks）
- アイコン（VK Blocks）
- 横並び
- 縦積み
- アイコン（VK Blocks）
- 段落
- アイコン（VK Blocks）
- 段落
- 縦積み
- 横並び
使い方
アイコンに好きな色をつける
なんとなく想定している使い方は、ご自身のWordPressのサイトなどにブロックを貼ったら、お子さんの目標を一つ考えてください。例えば、うちの場合は「早寝早起きする」になります。
達成できたら丸の「アイコン」ブロック部分の「色」を好きな色に変えます。
こんな感じ！
全部色がついたら目標達成！
こんな感じに全部の丸に色がつけれたら目標達成です。丸は10個ありますのでクリスマスの10日前とかに初めて24日のクリスマスイブに達成するようにするとか、またはアイコンブロックを複製して日数を増やしても良いですね。
印刷用PDF
印刷用のPDFファイルも用意しましたので、ダウンロードしてプリントアウトしてご利用ください。
まとめ
できたよシートを息子に見せると難色を示しておりましたが、がんばってくれそうですw
みなさんもぜひブロックパターン作りの参考にしてください。
WordPressのブロックだけでもさまざまなデザインが作れますが、さらにVK Blocksを使うとデザインの幅がグッと広がりますので、まだ使っていない方は使ってみてください（Pro版もよろしくお願いします）。
明日は 明日はベクトルスタッフのササキカオリさんが記事を書いてくれます！おたのしみにー！
参加特典あり！ご参加をお待ちしてます
ベクトルスタッフ以外の一般のユーザーの皆様の参加大歓迎です！参加特典もありますのでぜひご参加お待ちしています！
★参加賞あり★ ブログリレーに参加しませんか？ アドベントカレンダー2023のお知らせ
今年もアドベントカレンダーを開催します！「Lightning」「VK Blocks」など、ベクトル製テーマ・プラグインに関することならお気軽に登録してください。
この記事を書いた人
-
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。
WordFes Nagoya（2013-2017）では、名古屋版わぷーを制作しました。
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。