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

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

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

こんなやつ。

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

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

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

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