2023年9月4日WordPressで製品やサービスの評価のためのグラフを追加するカスタマイズです。以前同じカスタマイズを紹介しましたが、さらに使いやすくしました。このようなグラフを作成できます。下記の記事で新しい方法を紹介しています。総合評価の数値と項目別の数値を自由に設定できるレビューボックスです。リストにはグラデーションを使っているため直感的...コードの仕様を変更したので、以前の記事を使ってカスタマイズして頂いた場合は新たに設定する必要があります。正しく表示されないので注意して下さい。SONIC」、「SWELL」です。他テーマでもブロックエディタを利用していれば微調整で使えると思います。見てみるブロックエディターに完全対応の高機能テーマ。柔軟にブロックをカスタマイズできるのが魅力です。以下のコードを追記します。WordPressの投稿画面の見た目をカスタマイズするためのスタイルシートです。なくても問題ないですが、見たまま編集ができます。functions.phpfunctions.phpの編集を間違えると、WordPressの表示ができなくなりますので必ずファイルのバックアップをとってください。(記述を削除すれば直ります。利用していない場合は、投稿画面にデザインが反映されません。作成してコードを貼り付けましょう。);投稿画面にコードを貼り付けこちらに投稿画面用のテンプレートを用意しました。-->さきほどのコードを投稿画面へコピペすると、数値とラベルなどを変更できます。使うたびに貼り付けるのは大変なので、自分が使いやすいようにカスタマイズしたらWordPressの「パターン」に登録しておきましょう。数値を変更するだけで使えます。投稿画面内の数値を入力しただけでは、実際の記事表示画面のグラフ描写には反映されません。別途クラス名の修正・指定が必要です。グラフの数値を表示しているブロックを選択しましょう。追加CSSクラスグラフの数値に合わせて下のようなクラス名にしてください。(アンダースコア2つ)のあとに0〜10までの数字を入力します。入力済みの場合は数値のみ変更すればOKです。場合のカラム設定モバイルで表示したときに縦に1列に並んでしまうので、こちらの設定が必要です。親のカラムブロック(全体)を選択して右サイドメニューから設定します。カラムブロック(全体)を選択して右サイドメニューのカラム設定をします。カラムのモバイル表示を2列にSWELLで3列にしたいWordPressからの設定ではスマホ表示で2列までしか変更できませんが、追加でCSSを追加することで3列表示も可能です。以下のコードを追加して下さい。2列にすると、一番下の追加CSSクラスに「sp_column2」が挿入されるので、半角スペースを一つ開けて「sp_col3」を追加しましょう。「sp_col2」または「sp_col3」を入力して下さい。貼り付けたコードを編集することでグラフの色を変更できます。数値によってグラフの色を変更することができます。XXX);}標準では以下のように指定しています。