人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (19) リンクボタンのデザイン研究(Webフォント)

2017年 08月 18日
エキサイトブログのトップページを DevToolsを使って調べます。 以下のリンク先をサンプルにしているので、Chrome DevToolsで開きながら読まれると、より判り易いと思います。



 リンクボタンのアイコンはWebフォント 


 アイコンの実体は文字 

ログインしたエキサイトユーザーにはトップページに3つのボタンが表示されます。

Chrome DevTools を使ってみよう (19) リンクボタンのデザイン研究(Webフォント)_a0349576_18024068.png

このボタンのアイコン部分の要素を調べると、興味深い事が判ってきます。

Chrome DevTools を使ってみよう (19) リンクボタンのデザイン研究(Webフォント)_a0349576_18041621.png

これは、ボタンの「a要素」の「::before 擬似要素」として指定された「文字」なのです。

.navHeader_navLink.is-entry > a:before {
content: "\f040"; }

文字コードは「\f040」となっていますが、このフォントの他の文字を調べるために、以下の様なプロパティをメモ帳上で細工しました。 文字の間隔を「10px」ずつ開け、本来の位置より「左に600px」ずらし、フォントは一般に16進数でコード指定するので一桁に「0~f」の16文字並べ表記されるという方法です。 幾つあるのか不明なので、とりあえず「00~4f」の60個を表示してみる事に。

letter-spacing: 10px;
left: -600px;
content: "\f000\f001\f002\f003\f004\f005\f006\f007
\f008\f009\f00a\f00b\f00c\f00d\f00e\f00f\A
\f010\f011\f012\f013\f014\f015\f016\f017
\f018\f019\f01a\f01b\f01c\f01d\f01e\f01f\A
\f020\f021\f022\f023\f024\f025\f026\f027
\f028\f029\f02a\f02b\f02c\f02d\f02e\f02f\A
\f030\f031\f032\f033\f034\f035\f036\f037
\f038\f039\f03a\f03b\f03c\f03d\f03e\f03f\A
\f040\f041\f042\f043\f044\f045\f046\f047
\f048\f049\f04a\f04b\f04c\f04d\f04e\f04f\A";

これを「+」で「.navHeader_navLink.is-entry > a:before」のセレクタのCSSを作り、ソースウインドウで貼り付けました。 60個ほどのフォントが表示されました。 表示が重なる他の要素は、みんなキーボードの「h」で非表示にしています。(「h」は、要素を仮り非表示にするショートカットです)

Chrome DevTools を使ってみよう (19) リンクボタンのデザイン研究(Webフォント)_a0349576_18302411.png

「\f040」は「ペン」ですが、タグのアイコンも見覚えがあります。 このアイコンに使える文字は、エキサイトが標準で使用しているフォントの様です。 他の所でも、このフォントを利用しているかも知れません。


 Webフォント「FontAwesome」 

この要素のCSSの下の方を見ると、「font-family: "FontAwesome";」と指定しています。

Chrome DevTools を使ってみよう (19) リンクボタンのデザイン研究(Webフォント)_a0349576_18420375.png

「FontAwesome」を検索すると、これは有名な「Webフォント」のひとつだと判りました。 下のリンク先にこのフォントの一覧があります。
このフォントを利用するには、「ページのhead要素内に指定リンクを表記する必要」があります。 フォントはWebフォントのサーバーにあり、ページ上で表示する際に呼び込む必要があるわけです。

アレンジ上でも、このフォントを使える可能性がありますが、エキサイトがこのフォントを使用しているページ内に限られます。 例として、ブログスキン上では可能です。(ブログ本文内での表示はできませんでした)

ブログスキンのアレンジで、どうしても使いたいアイコンデザインがこの「FontAwesome」の中にあれば、このトップページの使い方を真似ることで表示可能です。 文字は500種もあるそうですし、Webフォントですから、機種やOSを問わず同じデザインで表示できます。 また、色やサイズ、回転、アニメーション、重ね合わせ等も可能となっています。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-08-18 19:43 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。