こんにちは、魚沼情報サービスの対馬俊彦です。

昨日の渡辺リリオさんの記事「【あれから】Lightningへの愛ふたたび【1年】」、ご覧になりましたか。Lightning は土壌のよい圃場、ExUnit / VK Blocks は相性のよい農機具。そこで農家さんが Lightning 愛を込めて育てた作物は格別ですよね。

それでは、リリオさんからバトンを受け取って、引き続き12月12日の記事を書きます。

と同時に、12月4日のうなさんの記事からのブログリレーにもなってます。

この記事を書こうと思ったきっかけ

2023年12月にこの記事を読んでいる方の多くはすでにご覧になっているかもしれません。ベクトルスタッフのうなさん（久納さん）が Vektor WordPress Solution Advent Calendar 2023 の12月4日の記事 でステキな🎄🎄🎄「できたよシート」🎄🎄🎄を作って、誰でもコピーして使えるようにしてくれました。

子ども用に「できたよシート・クリスマスVar」をWordPressとVK Blocksのブロックで作ってみた | 株式会社ベクトル

WordPressとVK Blocksのブロックで「できたよシート・クリスマスVar」をつくってみました。

株式会社ベクトル

小学生の息子さんのためにブロックを組み合わせて作った、クリスマスツリーの形をしたかわいい作品です。VK パターンライブラリに掲載されているブロックパターン同様、ブロックの使い方の参考になりますね。

できたよシートに関して、ベクトルの Discord 「ウェブ関連の雑談」で ↓ こんなやりとりがありました。

私は一昨年、昨年と VWS Advent Calendar に参加しているので、今回はのんびりと皆さんのブログ記事を楽しませてもらおう...と思っていたのですが、うなさんのムチャブリを見てから書きたい欲がだんだん高まってきて、2日前になってまだ12日(火)の枠が空いているのを見て、3回目の参加を決めました😉

お楽しみ機能を追加した「できたよシート」

ということで、うなさんの「できたよシート」に楽しい追加機能を実装したものが ↓ こちらです。アイコンをクリックすると色がついて、10個のアイコンぜんぶに色がつくとうれしいこと🎉が起きます。

うなさんの記事と同様に、ベクトル製プラグイン VK Simple Copy Block を使って簡単にブロックをコピーできるようにしましたので、自分のサイトで使ってみたい方、中はどうなってるの？って気になる方は [ブロックをコピー] ボタンをクリックしてからご自分のサイトへ貼り付けてください。

ご自分のサイトでお使いになる前に、ここから先の説明に目を通していただくとよいです。

実装内容についての説明

ブロック構成

うなさんオリジナルに以下のブロックを追加してあります。

• JavaScript と CSS を記述した カスタム HTML
• 「Merry Christmas!」の段落 ← 文言を自由に書き換え可

クリックをカウントする仕様

Discord での genepine さんのアイディアが「下にボタンがついていてクリックすると数がDB記録され...」というものでしたが、検討した結果、以下の仕様になりました。

アイコンの色

アイコンをクリックしたときの色は カスタムカラー 1～5 になっています。カスタムカラーが設定されていないとアイコンをクリックしても色がつきません。ご自分のサイトで動かすときは、お好みの5色を設定してからお楽しみください。

最後に表示される文字の色

最後に表示される「Merry Christmas!」の文字色は キーカラー(明) → キーカラー(暗) のグラデーションになっています。

この仕様のため、G3 モードの Lightning ではうまく動作しますが、それ以外では表示されません。

CSS の var(--vk-color-primary-vivid) および var(--vk-color-primary-dark) の部分をカラーコードに書き換えれば、X-T9・Lightning Pro・Katawara でも動作します。

カスタムカラー活用のすすめ

私は Ligthning でサイトを制作するときに

• 子テーマ
• ブロックパターン
• プラグイン
• 見出しなどのブロック

などでカラーコードを直接指定せずに、キーカラーとカスタムカラーを使っています。

こちら ↓ はブロックの背景に カスタムカラー 1 を指定している画面です。

背景に カスタムカラー 1 を設定する CSS はこちら ↓ です。

background: var(--vk-color-custom-1);

こうやってカスタムカラーで指定するやり方にすると以下のメリットが得られます。

• カラーコードを探す手間が省ける。
• 作った子テーマ、ブロックパターン、プラグインを、カスタムカラーの色を変えることによって他のサイトに馴染ませて使い回しできる。
• 季節や気分😄によってサイト全体の配色をかんたんに（お客様側でも）変更できる。

おすすめサイト
配色に悩んだときに役に立つサイトとしておすすめなのが Adobe Color です。キーワードで色の組み合わせを探すことができますので、私はちょくちょくお世話になっています。

制約事項

jQuery で処理を記述している関係で、カスタマイズ → ExUnit の高速化設定 の [JavaScriptをフッターで読み込む] が有効になっていると動作しません。

まとめ

JavaScript のところで悩みましたが、なんとか実装できてよかったです。楽しんで笑顔になったり、コードの参考になったり、どなたかのお役に立てれば幸いです。

明日は Matsuda Kei さんが Ligthinig Pro から Lightning G3 に移行するときのポイントを書いてくれます。お楽しみに～🥰

投稿者プロフィール

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

最新の投稿

• カスタマイズ2024年3月23日フィットネスクラブのスタッフ紹介 - マウスホバーでコンテンツを切り替え
• カスタマイズ2024年3月11日アーカイブページをアコーディオン仕様にしたカスタマイズ例
• Lightning G32024年2月26日前の記事・次の記事のレイアウトやデザインを超シンプルにカスタマイズ
• カスタマイズ2024年2月21日タイトルだけを検索対象としてブログを検索するフォーム

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ