Web

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

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

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

こんなやつ。

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

icon image

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

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

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

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

こうたろう

音大を卒業後ピアニストとして活動。 日本で活動後北欧スウェーデンへ。 アーティストLindha Kallerdahlと声帯とピアノによる即興哲学を研究。 その後ドイツ・ケルンに渡りAchim Tangと共にアルバム作品制作。 帰国後、金田式DC録音の第一人者:五島昭彦氏のスタジオ「タイムマシンレコード」にアシスタントとして弟子入り。 独立後音楽レーベル「芸術工房Pinocoa(現:Kotaro Studio)」を結成。 タンゴやクラシックなどアコースティック音楽作品を多数プロデュース。 大阪ベンチャー研究会にて『芸術家皆起業論~変化する社会の中、芸術家で在り続けるために』を講演。 その後、秋山庄太郎氏後継の写真スタジオ「村上アーカイブス」でサウンドデザイナー兼音響担当として映像制作チームに参加。 村上宏治氏の元で本格的に写真、映像技術を学ぶ。 祖父母の在宅介護をきっかけにプログラムの世界に興味を持ち、株式会社 ジオセンスの代表取締役社長:小林一英氏よりプログラムを学ぶ。 現在はKotaro Studioにて『あなたのためのアートスタジオ』音と絵をテーマに芸術家として活動中。 2023年より誰かのための癒しの場所『Curanz Sounds』をプロデュース。