⚠️ 変更前に必ずバックアップを取りましょう！
コードの修正は自己責任で行い、不安な場合は専門家に相談することを推奨します。
「PCではちゃんと表示されるのに、スマホでは星のアイコンが☒や数字だけになってしまう…」
そんなトラブルに遭遇したときの解決方法を、初心者向けに分かりやすく解説します！
実際に遭遇した問題をもとに、何が原因だったのか？どのように解決したのか？ を紹介します。後半では、Font Awesomeの他のアイコンにも応用できる方法についても触れます。
1. 問題発生：PCでは表示されるのに、スマホでは消える…
WordPressで 星評価アイコン（Font Awesome） を使ってレビュー記事を書こうとしました。
PCでは星がちゃんと表示されるのに、スマホで確認すると…
この時点では、何が原因なのか まったく分からず 途方に暮れていました。
2. 原因を特定！スマホで消える理由とは？
調査したところ、以下のような問題が原因だと分かりました。
❌ Font Awesomeがスマホで正しく読み込まれていない → CDNリンクが不足していた
❌ CSSでフォント指定が適切でなかった → スマホでは適用されない設定だった
❌ WordPressのショートコードが影響していた → fa-star-half-alt が正しく処理されていなかった
では、それぞれの問題をどのように解決したか 解説します！
3. 解決方法①：Font Awesomeの読み込みを確認
スマホでアイコンが消える場合、まず Font Awesome のCDNリンクが適切に読み込まれているか？
というところをチェックします。
🔹 WordPressの header.php に追加
WordPressのテーマファイル header.php に 次のコード を追加して、スマホでも正しく読み込まれるようにします。
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css;
📌 追加する場所
- WordPress管理画面 → 外観 → テーマファイルエディタ →
header.phpの<head>内
このコードを追加したら、スマホでページを再読み込みして アイコンが表示されるか確認 しましょう。
4. 解決方法②：CSSを修正
Font Awesomeのアイコンが スマホで適用されない場合、font-family を強制指定して解決できます。
🔹 修正するCSS（style.cssに追加）
.star-rating i {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Solid" !important;
font-weight: 900 !important;
このコードを追加すると、スマホ環境でもアイコンが正しく表示される ようになります！
WordPressの 「追加CSS」 に入れてもOKです。
5. 解決方法③：WordPressのショートコード修正
もし 星評価のショートコードが数字だけ表示される 場合、WordPressの functions.php を修正することで解決できます。
🔹 修正するPHP（functions.php に追加）
if ($half_star) {
$output .= ''; // 最新のアイコンに変更
ここで fa-star-half-alt ではなく fa-star-half-stroke に修正する と、スマホでもハーフスターが表示される可能性が高くなります。
6. 解決方法④：キャッシュをクリア
スマホのブラウザでは キャッシュが影響して表示が変わらない ことがあります。もし修正してもアイコンが表示されない場合、キャッシュをクリア してみましょう！
✅ スマホのブラウザでキャッシュ削除
- 設定 → 履歴 → キャッシュを削除
- Chromeなら「設定 → プライバシー → 閲覧データの消去」
✅ WordPressのキャッシュ削除
- 「サイト全体を更新（キャッシュクリア）」する
- キャッシュ系プラグインを利用している場合、キャッシュをリフレッシュ
これで キャッシュの影響を取り除き、最新の状態で確認 できます。
7. 【応用編】Font Awesomeの他のアイコンにも適用できる！
今回の修正方法は Font Awesomeの星評価アイコン に対する解決策ですが、他のアイコンにも応用可能 です！
例えば、以下のアイコンが スマホで表示されない場合 に、同じ方法を試せます。
✅ ハートアイコンが消える
i class="fa-solid fa-heart"
✅ チェックマークアイコンが☒になる
i class="fa-solid fa-check-circle"
✅ 矢印アイコンが表示されない
i class="fa-solid fa-arrow-right"
どのアイコンでも 「CDNの追加」「CSSの調整」「キャッシュクリア」 を行うことで解決できる可能性が高いです！
8. まとめ：この手順で解決！
🚀 変更前の注意点
- コード変更前にバックアップを取りましょう
- 修正は自己責任 で行い、不安な場合は専門家に相談
- 変更後は スマホ・PC両方で動作確認 をする
✅ 実際の手順
1️⃣ Font AwesomeのCDNを確認（header.phpに追加）
2️⃣ CSSでフォントを適用（style.cssに追加）
3️⃣ WordPressのショートコード修正（functions.phpに追加）
4️⃣ キャッシュをクリア（スマホのブラウザ＆WordPress）
5️⃣ 応用編：他のアイコンの表示トラブルにも対応可能！