WordPressでレビュー用の星を作る方法 “CSSは不要です”

ECサイトみたいな星マークがあると便利ですよね。

特に複数の商品を紹介したいときにランク付けできたら解説しやすかったりします。

こんなやつ。

実はCSS不要で作成できるので、超初心者でも大丈夫です！

WEBサイト制作の入門シリーズはサーバーの契約の部分の基礎からゆっくり丁寧に解説しています。
誰でも手順通りに進めれば必ずあなたのWEBサイトは完成するので音楽家やフリーランサーを目指す方、ビジネスを始めたい方は諦めずにトライしてくださいね！
まず一番初めの手順は『【初心者必見】エックスサーバーを契約したら最初にやるべき2つのこと』をチェックしてね！

なぜWEBサイトを持つ必要がありますか？noteやアメブロじゃダメな理由

【初心者必見】エックスサーバーを契約したら最初にやるべき2つのこと

エックスサーバーでメールアドレスの設定する方法

【超やさしく解説】エックスサーバーでWordPressをインストールする方法

プラグインをインストール

まずはプラグインをインストールしましょう。

• VK Blocks
• VK Block Patterns

コピペしてインストール！

このプラグインは他の用途でもかなり頻繁に使うので使い方是非マスターしてください。

パターンの登録

インストールが終わったら、左側のVKブロックパターンを選択。

次に画面上の新規追加をクリックして作成画面に移りましょう。

星の成形

星を作っていきます。

まずは行ブロックを出します。

行を出す

行を挿入したら十時マークから再びすべてを表示タブ。

アイコンを出す

かなりしたの方にアイコンというのがあるのでクリック。

アイコンを編集

次に編集画面右からブロックの編集をしていきます。

まずは星形に変更しましょう。

<i class="fa-solid fa-star"></i>

こちらをペーストしてください。

すると星形に変わりました。

続いてこちらと同じように合わせます。

サイズを20に設定し、余白を0に合わせます。

スタイルをアイコンのみに変更すると綺麗な星形が完成します。

色を整える

最後に色を黄色にすると綺麗な星形が完成しますね。

星5つを作る

同様に同じ行で星を5つ作成しましょう。

ブロックを追加から、同様にアイコンを作ります。

パターンのタイトルをつけて公開。

呼び出す

呼び出しはすべてを表示から真ん中のパターンを選択。

するとこのように選択画面になりますので、注目の箇所をVK Block Patternsに変更。

すると先ほど公開したレビュー用星5つが現れますのでクリックして呼び出します。

これでばっちりですね！

他のパターンも登録

先ほどの星形の部分を半分、または空白にすることもできます。

#半分にする
<i class="fa-solid fa-star-half-stroke"></i>

#空白にする
<i class="fa-regular fa-star"></i>

これで星4.5や星4など自在に登録できますね！

もちろん星のサイズや色などは好きな感じに整えてくださいね。

こちらの記事もいかがですか？
プログラミングやテクノロジーに関する記事をまとめています！