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

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

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

こんなやつ。

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

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

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

  • 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など自在に登録できますね!

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

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

icon image
当スタジオでのアクセスNO1!
Google検索ランキングで1位獲得実績ありの人気記事!
M1 Mac以降の Python 環境構築 [完全保存版] ほぼ英語クラスの馴染みやすさが人気のPythonの全体像をほぼ1記事で理解できるのはこれ! まずはこれだけ Python基礎からサンプルプログラム いつもチェックする日課の記事やサイト、ページなどがあればセレニウムを使用してかなり細かく動作を自動化することができます。 Seleniumを使ってGoogle検索 ~ サイトの巡回までをプログラム Xサーバーをモデルにしています。
APIで自動トレードシステムなんかを構築したい場合は24時間働き続けてくれるスタイルが必須ですよね。
Xserver SSH接続の設定とAnaconda3のインストール
ポイント当サイトもエックスサーバーで構築しています。
速度が早いのと対応も丁寧で老舗なのでおすすめのサーバーの一つです。
サーバーをこれから開設する方は是非VPNも契約しておきましょう。
レンタルサーバー エックスサーバー これからは脱グローバルと宇宙の時代。。。と筆者は考えています。
日本のGPS衛星の技術はかなり高いのをご存知でしたか?!
誰でも無料で使える衛星電波、使わなきゃ損ですよね。
Python GPS関連の開発環境 & Google MAP APIを取得 コンパイル言語も忘れないで!
少し知っているだけで見える世界が全然変わってきます。
【環境構築】Rust M1 Mac / コンパイル言語

Kotaro
Kotaro
服部 洸太郎
音大を卒業後ピアニストとして活動。
自身のピアノトリオで活動後北欧スウェーデンにてシンガーアーティストLindha Kallerdahlと声帯とピアノによる即興哲学を研究。
その後ドイツへ渡りケルンにてAchim Tangと共に作品制作。
帰国後、金田式電流伝送DC録音の名手:五島昭彦氏のスタジオ「タイムマシンレコード」にアシスタントとして弟子入りし、録音エンジニアとしての活動開始。
独立後、音楽レーベル「芸術工房Pinocoa(現在はKotaro Studioに統合)」を立ち上げ、タンゴやクラシックなどのアコースティック音楽作品を多数プロデュース。
その後、秋山庄太郎氏後継の写真スタジオ「村上アーカイブス」でサウンドデザイナー兼音響担当として映像制作チームに参加。
村上宏治氏の元で本格的に写真、映像技術を学ぶ。
祖父母の在宅介護をきっかけにプログラムの世界に興味を持ち、介護で使えるプログラムをM5Stackを使って自作。
株式会社 ジオセンスの代表取締役社長:小林一英氏よりプログラムを学ぶ。
現在はKotaro Studioにてアルゼンチンタンゴをはじめとした民族音楽に関する文化の研究、ピアノ音響、さらに432hz周波数を使った癒しのサウンドを研究中。
2022年9月より豊かな暮らしをテーマとしたウェブサイト『レンタルdeクラセル』も発信中〜