ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

【無料ブロックのみでできる】テーマLightningでレビュー用星マークを作成する方法

ワードプレスの人気無料テーマLightningを使って、レビュー用星マークを作成する方法を紹介します。HTMLやカスタムCSSを使用せずに、Lightningの必須プラグイン(無料版)だけで作成していきます。

この記事でわかること

レビュー用星マークを作成する方法。

作成した星マークはパターンに登録して、いつでもブロックエディター内で呼び出せるようにします。

作成するレビュー用星マーク

レビューによく使う星マークが5つ並んだものを作ります。

レビュー用星マークの使用事例

上記の事例では、全くカスタムCSSは使用していません。

カラムブロックで3列のカラムを作成していますが、各カラム内のリスト表示では次の構成となっています。

カラムのリスト表示
1つ目のカラム内をリスト表示

星マークパターンは ”行ブロックの中にVKアイコンブロックを5つ” という構成になっているのです。この構成でパターンを作成していきます。

星マークパターンの作成方法

使用テーマとプラグイン

前提として使用テーマとプラグインを次の通りとします。

  • テーマはLightning(無料版で大丈夫です)
  • プラグインVK Blocksをインストール・有効化
  • プラグインVK Block Patternsをインストール・有効化

プラグインVK BlocksとVK Block PatternsはテーマLightningの必須プラグインなので、Lightningを使っている方ならインストール・有効化してあることと思います。

もしインストールがまだ、という方はこちらの記事を参照ください。

Font Awesomeをversion6としておく

星マーク表示にはFont Awesomeを使いますが、せっかくなので最新のバージョン6としておきましょう。

ダッシュボード 外観>カスタマイズ>Lightning Font Awesome で、バージョン6を選択します。

Font Awesome 6としておく

作成方法概要

星マークパターンの作成概要は以下の通りです。

  1. 行ブロックを挿入
  2. 行ブロック内にVKアイコンブロックを挿入
  3. VKアイコンブロックを編集して星マークとする
  4. ②③を繰り返して、星を5つ並べる

これらは当然ブロックエディターで作成していきますが、せっかくなのでパターンに登録していつでも呼び出せるようにします。なので、投稿や固定ページでなく、VKブロックパターンでパターンとして作成していきましょう。

ダッシュボードメニューのVKブロックパターン>新規追加 でブロックエディターを開けて作成していきます。

VKブロックパターンで新規追加

作成方法詳細

①行ブロックを挿入

行ブロックはワードプレスversion5.9から導入された新しいブロックなので、まだあまりなじみがないかもしれません。ブロックカテゴリーのデザインの中にあります。

ブロック一覧デザインの行ブロック

行ブロックを挿入すると次の状態となります

行ブロック挿入直後

②行ブロック内にVKアイコンブロックを挿入

行ブロックのなかに、VKアイコンブロックを挿入します。VKアイコンブロックはプラグインVK Blocksで準備されているブロックです。

VKアイコンブロック

行ブロック内の+マークをクリックしてVKアイコンブロックの挿入をします

行ブロック内へのVKアイコンブロックの挿入

③VKアイコンブロックを編集

VKアイコンブロックでは画面右の設定パネルでアイコンの種類やサイズ、色などを設定することができます。

今回は塗りつぶした星マークを挿入するために次のように設定します

  • アイコンをstar solidとする
  • サイズは18px
  • 余白はゼロ
  • スタイルはアイコンのみ
  • 色は#fcb900
VKアイコンブロックの設定(アイコン種類やサイズなど)
VKアイコンブロックの設定(色)

アイコンの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アイコンブロックを追加して星を5つ並べる

それでは残りの星マークを並べて表示していきましょう。

1.アイコンの後ろにブロックを挿入

すでに星マークが表示されているVKアイコンブロックの後ろに新しいブロックを挿入します。

アイコンブロックの後ろに新しいブロックを挿入

2.新しいVKアイコンブロックを挿入

挿入された新しいブロックの+マークをクリックして、VKアイコンブロックを挿入します。

新しいVKアイコンブロックを挿入する

あとは、手順③と同じ要領でVKアイコンブロックを編集していけばOKです。

出来上がったパターンを”公開”

こうして出来上がった星マークパターンにタイトルをつけて”公開”します。

例えば、星3個半のパターンであれば、タイトルに”星3個半”として”公開”ボタンをクリックすればOKです。

パターンを公開する

これで、”星3個半”という名前でパターン登録できました。

いろいろな星マークパターンを登録する

レビューとして使うために、いろいろな種類のパターンを登録しておきましょう。

すでに1パターンは登録済なので、パターンの新規追加画面を開けたあと、登録済の星パターンを呼び出して編集すればイチから作る手間が省けます

またVKブロックパターンの中でカテゴリーを作成して各パターンを登録しておけば、より便利に呼び出せるようになります。私は”レビュー”というカテゴリーを作成して各パターンを登録しました。

カテゴリーに登録

カテゴリーを作成しておいて、作成済のパターンをクイック編集でカテゴリーを設定してやれば簡単です。

クイック編集でカテゴリー設定

ブロックエディターのパターン呼び出しで ”レビュー” を選んで星パターン一覧を表示することができます。

パターン呼び出しで星パターン一覧を表示

これで、いつでもレビュー用星マークを記事内に挿入することが可能となりました。冒頭で紹介したようなカラムブロック内への挿入も簡単です。

まとめ

Lightningの必須プラグインであるVK BlocksのVKアイコンブロックを使うことで、カスタムHTMLやCSSを使うことなくレビュー用星マークを作成できました。

もう一度手順概要を紹介すると

  1. 行ブロックを挿入
  2. 行ブロック内にVKアイコンブロックを挿入
  3. VKアイコンブロックを編集して星マークとする
  4. ②③を繰り返して、星を5つ並べる

となります。

また、プラグインVK Block Patternsを使ってパターンとして登録しておけば、ブロックエディター内でいつでも呼び出すことができます。すごく便利ですよね。

このようにテーマLightningおよびその必須プラグインを使いこなせば、かなりいろいろなことができるようになります。有料版ではさらに便利なブロックや機能も準備されているので、ぜひ検討してみてはいかがでしょうか。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる