アメブロ新デザインは、アイコンがフォント化されてより高速化されています。このアイコンフォントはアメブロカスタマイズにも使えるので、上手に使いこなしてみませんか？

アメブロアイコンフォント例

下の画像は、私のアメブロの下の部分を切り取ったものなのですが、ブルーの四角で囲んでいる部分は、全てアイコンフォントです。

アイコンフォントとは、アイコンを画像ではなくフォント（文字化）したもの。そのため、拡大して使っても画像のように荒くなったりしませんし、色も自由にスタイルシートで設定できるとっても便利なものなのです。

見出しや囲み枠のアクセントに使ったり、リスト表示のポイントマークに使ったり…活用度は無限大。アメブロアイコンフォントであなたのアメブロをもっと簡単におしゃれにカスタマイズしちゃいましょう。

アメブロアイコンフォント一覧

下の表がアメブロアイコンフォント「AmebaNewSymbols」一覧です。左側はCSSファイルで指定する文字コードです。

コピペでOK！アメブロアイコンフォントをリストマークにする方法

例えば、下の画像のように、アメブロアイコンフォントをリストマークにする手順を解説していきたいと思います。

アメブロブログ管理画面の「デザインの変更」メニューをクリックします。

「CSS編集」をクリック。※CSS編集用デザインを選ばないと、本格的なアメブロカスタマイズはできません。

CSSの一番下までスクロールし、最終行に次のコードをコピーして貼り付けたら、保存ボタンをクリックして完了です。

#main .skin-entryBody ul li {
  list-style: none;
}
#main .skin-entryBody ul li:before {
  font-family: "AmebaNewSymbols";
  content: "\f00a";
  color: #a9ccd2;
  margin-right: 3px;
}

contentの部分を好きなアイコンフォントの文字コードに変えると、リストマークを変えることができますし、colorを他の色にすると、あなたのアメブロに合わせた色にできます。

とっても簡単なので、試してみてくださいね。