【無料ブロックのみでできる】テーマLightningでレビュー用星マークを作成する方法
ワードプレスの人気無料テーマLightningを使って、レビュー用星マークを作成する方法を紹介します。HTMLやカスタムCSSを使用せずに、Lightningの必須プラグイン（無料版）だけで作成していきます。
レビュー用星マークを作成する方法。
作成した星マークはパターンに登録して、いつでもブロックエディター内で呼び出せるようにします。
作成するレビュー用星マーク
レビューによく使う星マークが５つ並んだものを作ります。
上記の事例では、全くカスタムCSSは使用していません。
カラムブロックで３列のカラムを作成していますが、各カラム内のリスト表示では次の構成となっています。
星マークパターンは ”行ブロックの中にVKアイコンブロックを５つ” という構成になっているのです。この構成でパターンを作成していきます。
星マークパターンの作成方法
使用テーマとプラグイン
前提として使用テーマとプラグインを次の通りとします。
- テーマはLightning（無料版で大丈夫です）
- プラグインVK Blocksをインストール・有効化
- プラグインVK Block Patternsをインストール・有効化
プラグインVK BlocksとVK Block PatternsはテーマLightningの必須プラグインなので、Lightningを使っている方ならインストール・有効化してあることと思います。
もしインストールがまだ、という方はこちらの記事を参照ください。
https://web-children.com/2021/10/25/lightning-theme-and-plug...Font Awesomeをversion６としておく
星マーク表示にはFont Awesomeを使いますが、せっかくなので最新のバージョン６としておきましょう。
ダッシュボード 外観＞カスタマイズ＞Lightning Font Awesome で、バージョン６を選択します。
作成方法概要
星マークパターンの作成概要は以下の通りです。
- 行ブロックを挿入
- 行ブロック内にVKアイコンブロックを挿入
- VKアイコンブロックを編集して星マークとする
- ②③を繰り返して、星を５つ並べる
これらは当然ブロックエディターで作成していきますが、せっかくなのでパターンに登録していつでも呼び出せるようにします。なので、投稿や固定ページでなく、VKブロックパターンでパターンとして作成していきましょう。
ダッシュボードメニューのVKブロックパターン＞新規追加 でブロックエディターを開けて作成していきます。
作成方法詳細
①行ブロックを挿入
行ブロックはワードプレスversion5.9から導入された新しいブロックなので、まだあまりなじみがないかもしれません。ブロックカテゴリーのデザインの中にあります。
行ブロックを挿入すると次の状態となります。
②行ブロック内にVKアイコンブロックを挿入
行ブロックのなかに、VKアイコンブロックを挿入します。VKアイコンブロックはプラグインVK Blocksで準備されているブロックです。
行ブロック内の+マークをクリックしてVKアイコンブロックの挿入をします。
③VKアイコンブロックを編集
VKアイコンブロックでは画面右の設定パネルでアイコンの種類やサイズ、色などを設定することができます。
今回は塗りつぶした星マークを挿入するために次のように設定します。
- アイコンをstar solidとする
- サイズは18px
- 余白はゼロ
- スタイルはアイコンのみ
- 色は#fcb900
アイコンのstar-solidのコードコピペ用です。
<i class="fa-solid fa-star"></i>以上でアイコンが次のように表示されます。
アイコンのサイズや色は、好みによって変更してもらっても構いません。
星マークアイコンの種類
アイコンの星マークは、上記では塗りつぶしタイプを表示しましたが、レビュー用にはほかに”半分塗りつぶし”と”塗りつぶしなし”も必要です。
それぞれ、VKアイコンブロック設定のアイコン欄には次のように入力すればOKです。
星 塗りつぶし（star solid）
<i class="fa-solid fa-star"></i>星 半分塗りつぶし（star-half-stroke solid）
<i class="fa-solid fa-star-half-stroke"></i>星 塗りつぶしなし（star regular）
<i class="fa-regular fa-star"></i>④VKアイコンブロックを追加して星を５つ並べる
それでは残りの星マークを並べて表示していきましょう。
１．アイコンの後ろにブロックを挿入
すでに星マークが表示されているVKアイコンブロックの後ろに新しいブロックを挿入します。
２．新しいVKアイコンブロックを挿入
挿入された新しいブロックの+マークをクリックして、VKアイコンブロックを挿入します。
あとは、手順③と同じ要領でVKアイコンブロックを編集していけばOKです。
出来上がったパターンを”公開”
こうして出来上がった星マークパターンにタイトルをつけて”公開”します。
例えば、星３個半のパターンであれば、タイトルに”星３個半”として”公開”ボタンをクリックすればOKです。
これで、”星３個半”という名前でパターン登録できました。
いろいろな星マークパターンを登録する
レビューとして使うために、いろいろな種類のパターンを登録しておきましょう。
すでに１パターンは登録済なので、パターンの新規追加画面を開けたあと、登録済の星パターンを呼び出して編集すればイチから作る手間が省けます。
またVKブロックパターンの中でカテゴリーを作成して各パターンを登録しておけば、より便利に呼び出せるようになります。私は”レビュー”というカテゴリーを作成して各パターンを登録しました。
カテゴリーを作成しておいて、作成済のパターンをクイック編集でカテゴリーを設定してやれば簡単です。
ブロックエディターのパターン呼び出しで ”レビュー” を選んで星パターン一覧を表示することができます。
これで、いつでもレビュー用星マークを記事内に挿入することが可能となりました。冒頭で紹介したようなカラムブロック内への挿入も簡単です。
まとめ
Lightningの必須プラグインであるVK BlocksのVKアイコンブロックを使うことで、カスタムHTMLやCSSを使うことなくレビュー用星マークを作成できました。
もう一度手順概要を紹介すると
- 行ブロックを挿入
- 行ブロック内にVKアイコンブロックを挿入
- VKアイコンブロックを編集して星マークとする
- ②③を繰り返して、星を５つ並べる
となります。
また、プラグインVK Block Patternsを使ってパターンとして登録しておけば、ブロックエディター内でいつでも呼び出すことができます。すごく便利ですよね。
このようにテーマLightningおよびその必須プラグインを使いこなせば、かなりいろいろなことができるようになります。有料版ではさらに便利なブロックや機能も準備されているので、ぜひ検討してみてはいかがでしょうか。
