記事を見やすく（アイコンフォントを使う）

アメブロカスタマイズ

手軽で、簡単アイコンフォント（マテリアルアイコン）を使い、記事を着飾ってみます

マテリアルアイコン(Material icons)とは

超概要説明（笑）

マテリアルアイコンとは、Googleが、全てのデバイスで共通した見え方を提唱したマテリアルデザイン(Material Design) の一環として提供しているアイコンのこと。って、めっちゃ大雑把に書きましたが、詳しくは下のリンク（英語）を見てください。
https://material.io/design/guidelines-overview

アイコンの例

home settings thumb_up email insert_emoticon camera_alt sports_tennis

特徴

上のようなアイコンが、ざっと1,000個も用意されており、自分で画像を用意する必要なく、大きさや色まで変更して使えます。
favorite favorite favorite favorite favorite favorite favorite
※ざっと1,000個と書いているのは、カテゴリーごとに並べられ重複しているものもあるため真面目に数えるのを途中で諦めたからinsert_emoticon

提供先

公式サイトのアイコン一覧アイコンを確認できます。
※本当は、何個なのか分かった方は、教えてください。

問題点

文字と一緒に並べると、アイコンが上にずれて表示される。
※修正方法を下記に記載しています。

アイコン一覧（コード付き）

Action（行動） Alert（警報） Av（映像と音声） Communication（伝達） Content（コンテンツ） Device（端末） Editor（編集） File（書類） Hardware（機器） Image（イメージ） Maps（地図） Navigation（ナビ） Notification（通知） Places（場所） Social（ソーシャル） Toggle（トグル・ボタン）

使用するための準備

使いたいアイコンを探す

公式サイトのアイコン一覧にアクセスします。
左下の『Selected Icon』をクリックします。
画面をスクロールし、使いたいアイコンをクリックします。
左下に表示された【アイコン用コード】が記事で使用するものです。
※上記の例では <span class="material-icons">favorite</span> です。

記事の中でのみ使用する場合

記事を『HTML表示』に切り替えて、先頭に下記のコードをコピーします。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<style type="text/css">.material-icons{margin:0 5px;display:inline-flex;vertical-align:middle;}</style>

※こちらの作業は、アイコンを使用する記事を書く度に行ってください。

オリジナルメニューなどにも使用する場合

※オリジナルメニューについては、新CSSカスタマイズの関連記事も併せてご覧ください。

『現在使用中のブログデザインCSS』の先頭に下記のコードをコピーします。
```
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
```

『現在使用中のブログデザインCSS』の一番最後に下記のコードをコピーします。

.material-icons {
  margin: 0 5px; /* アイコンの前後に 5px のスペースを挿入 */
  display: inline-flex; /* アイコンが上にずれないようにおまじない */
  vertical-align: middle; /* アイコンを上下中央に設定 */
}