Googleマテリアルアイコンとは、Googleが提供しているアイコンです。多くのサイトやアプリなどでも利用されており、もちろんWordPressサイトでも活用できます。商用利用可能な上、約900種類以上のアイコンを無料で利用可能です。
今回はそんなGoogleマテリアルアイコンを、WordPressサイトで使う方法を解説いたします。
目次
Googleマテリアルアイコンとは
Googleが無料で提供しているアイコン素材です。900種類以上から選んで簡単に表示できます。複数のカテゴリーに分けてあり、細かいスタイル調整もプレビューしながら行えます。
どんなカテゴリーがあるの？
Googleマテリアルアイコンに用意されているカテゴリーの一覧です。
Activities
Android
Audio & Video
Brand
Business & Payments
Common actions
Communication
Hardware
また、種類が豊富なだけでなく、直感的に各アイコンの太さやサイズなどを調整できる点も便利です。
さらに、Apache License 2.0というライセンスの元で使用できるので、商用利用や改変・複製なども問題ありません。
WordPressでGoogleマテリアルアイコンを使う方法
WordPressでGoogleマテリアルアイコンを使うには、次の手順で進めます。
- headタグにコードを追加（スタイルシートの読み込み）
- HTMLでアイコンを表示
1. headタグにコードを追加
Googleマテリアルアイコンの公式ページから任意のアイコンを選択します。太さやサイズをお好みに変更して、最上部のコードをサイトのheadタグにコピペします。どのアイコンも共通ですが、3タイプのスタイルによって変化しますので後述しています。
TCDテーマの場合は、テーマオプションのカスタムスクリプトにコピペすればOKです。
多くのTCDテーマには、カスタムスクリプト機能が実装されています。 テーマファイルを編集することなく、<head>タグ内に任意のスクリプトを出力可能です。当記事ではカスタムスクリプトの使い方をご紹介いたします。 テーマファイルを触らずにCSSを追加できるカスタムCSS機能につ...
このコードは、Googleマテリアルアイコンのスタイルシートを読み込むためのコードになります。
2. HTMLでアイコンを表示
あとは表示したい箇所にアイコンごとのHTMLをコピペすれば、表示されます。右側のコード一覧の中から「Inserting the icon」部分のHTMLをコピペします。
アイコンが表示されないときは？
headタグにコードを追加しているにもかかわらず、アイコンが正常に表示されない場合は、コード内のスタイル名とアイコンのクラス名が一致しているか確認してみましょう。
Googleマテリアルアイコンは、3種類のスタイルを選択できます。下記箇所です。
アイコンの角が丸くなったり、シャープになったり絶妙な調整が可能なんですが、ここを変更するとheadタグの内容も変更されるんですよね。
例えば、Sharpに設定すると、以下のようにコード内の記述もSharpに変更されます。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />同じく、アイコンごとのHTMLのクラス名も連動して変更されます。
<span class="material-symbols-sharp">menu</span>このスタイル名とクラス名が一致しているかどうかを確認してください。headタグにコードを設置した後に、スタイルを変更するとスタイル名とクラス名が揃っておらず、正常にアイコンが表示されなくなります。
アイコンの見た目を微調整したいときは？
アイコン設置後にサイトに合わせてカラーなどのスタイルを微調整したいケースもありますよね。
アイコンの右側に表示されるCSSを編集してコピペすれば、簡単にスタイルを調整可能です。用意されている「font-variation-settings」というプロパティを使います。
TCDテーマの場合は、カスタムCSSにコピペするだけで実現可能です。
TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。 当記事では、カスタムCSSの使い方について紹介していきます。 また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください...
※以下の例では、スタイルをSharpに設定している場合の例ですので、クラス名は適宜変更してください。
色を変える
アイコンのクラスにカラーを適用するだけで、任意の色に変更いただけます。
.material-symbols-sharp {
color:#d90000;
}塗りつぶす
くり抜かれているデザインのアイコンは塗りつぶすことも可能です。FILLという値を使って、塗りつぶしの有無を設定できます（0:無し/1：有り）。
.material-symbols-sharp {
font-variation-settings:
'FILL' 1,
}太さを変える
太さはwghtという値で変更できます。100（細）～700（太）の間で設定可能です（7段階）。
.material-symbols-sharp {
font-variation-settings:
'wght' 600,
}アイコンを強調する
GRADという値では、アイコンの強調具合を設定できます。 -25, 0, 200から指定可能（3段階）。背景画像の色やテキストとのバランスを見て調整してみてください。
.material-symbols-sharp {
font-variation-settings:
'GRAD' 0,
}サイズを変える
サイズを変えるといっても、アイコン自体のサイズが変わるわけではありません。アイコンのサイズに応じて、線の太さが自動的に調整されます。opszという値を使って、20, 24, 40, 48の間で指定（4段階）。
.material-symbols-sharp {
font-variation-settings:
'opsz' 48
}これらを複数組み合わせることも可能ですので、ご自身のサイトにあったバランスに調整できます。
まとめ
Googleマテリアルアイコンなら、幅広い種類のアイコンを簡単なコピペだけで、好きな場所に表示できます。900種類以上あるので、用途にあったアイコンがきっと見つかるはずです。
アイコンの細かいスタイル調整も可能なので、サイトのデザインに合わせて変更いただけます。ぜひご活用ください。
コメント