アメブロのデザインで使われているWebフォントを調べてみました

アメブロのデザインで使われているWebフォントを調べてみました

松本です、こんにちは。

最近、アメブロのPC向けやスマホ向けのデザインで、ウェブフォントがアイコンとして使われるようになりましたね。

例えば、最近のアメブロ運営さんが用意しているデザインでも、ボタンのアイコンに使われたりしています。

これらは画像ではなく文字なので、通常の文字と同様に・・・、

小さくしたり・・・

大きくしたり・・・

色を変えたり・・・

影をつけたり・・・

と、CSSで色んな事ができます。

ざっと見てみたところ、アメーバ運営さんが用意しているウェブフォントで、以下の様なアイコンが表示できるようです。


ABCDEFGHIJK
LMNOPQRSTUV
WXYZabcdefg
hijklmnopqr
stuvwxyz012
3456789!”#$
%&()=-~^|{}
[]:;+*@`<>,
.?/_’
GHbcfghilrs
w12345689!”
#$%&){+



↑こちら、RSSフィードから見ている人など、ウェブフォントが見えない人には意味のわからない文字の羅列になっていると思いますが、ウェブフォントが見える人には、以下の画像のようにアイコンが並んで見えています。

これらのアイコン、コピーしてメモ帳などに貼り付けてみるとわかると思いますが、実はどれも通常の文字です。

例えばA(アメーバのロゴマーク)は、アルファベットの「A」です。

「A」がA(アメーバのロゴマーク)として表示されるようにスタイル設定されているわけですが、この設定ができていないと、普通に「A」と表示されてしまいますので、記事内で使う絵文字の代わりとしては使いにくいですね。

ですが、ページデザインでアイコンとして用いると、いちいち画像のURLを指定せずにアイコンを表示できますので、手軽で使いやすくなります。

今後は、アメブロでも、これらのウェブフォントのアイコンを用いたカスタマイズ案がたくさん提案されるようになるのではないかと思っています。

僕も機会があれば、何か提案させてもらいますね^^