Webサイトやアフィリエイトサイトでは半分の星を使いたい場面がよくあるかと思います。
当記事では上のような半分の星記号をビットマップイメージや画像としてでなく、フォントとして使う方法を解説します。
FontAwesomeの利用
星半分の記号を使用するにあたって使えるのがFontAwesomeというWebフォントを取り扱うサイトです。
Webフォントは画像ではないので、見るデバイス（パソコンやタブレット、スマホ）によってサイズがおかしくなったり、ボヤけたりすることがないので便利です。
まずはこのFontAwesomeを取り扱えるようにしましょう。
使用するには
CDNを使う
データをダウンロードし、サーバーにアップする
という方法がありますが、今回は管理が楽なCDNを使った方法をご紹介します。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">最初は難しく感じてしまいますが、こちらのコードをWebサイトのheadタグ内にコピペするだけです。
HTMLサイトの場合……各ファイルの「<head>ここに入力</head>」
WordPressの場合……外観>テーマの編集>header.phpの「<head>ここに入力</head>」
はてなブログの場合……詳細設定>「headに要素を追加」の枠内に記述
headタグ内に色々な記述があり、難しくてわからないという場合は
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>このように</head>の前に例のコードをコピーペーストすれば問題ありません。
ろっこ
星のタグをコピーペーストする
あとはこちらのコードを使いたい箇所に記述すれば上手く適用されるかと思います。
<i class="far fa-star-half"></i>
<i class="fas fa-star-half"></i>
<i class="far fa-star-half"></i>Webフォントは基本的にテキストのフォントと変わりないので文字サイズや色を変更することも可能です。
黄色く着色した場合のコードはこちらとなっています。
<i class="fas fa-star-half-alt" style="color:#FFD700;"></i>
<i class="fas fa-star-half" style="color:#FFD700;"></i>
<i class="far fa-star-half" style="color:#FFD700;"></i>半分に欠けていない色で潰された星や色の付いてない星も数種類あるので組み合わせて使ってみて下さい。
<span style="color:#ffd700;"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i><i class="far fa-star"></i></span>
<span style="color:#ffd700;"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half"></i></span>FontAwesomeの細かい使い方はこちらの記事が参考になるかと思います。
