ウェブデザインについて#3【アイコン】

ウェブアイコン

ウェブデザインについての第3回です。

今回は「アイコン」について取り上げます。

フリーのアイコンを活用する方法について、説明します。

ウェブアイコン

Font Awesome

fontawesome.com

Font Awesomeのアイコンを使用します。

CSSのリンク

一般的なウェブサイトでは、HTMLの<head>～</head>の間にコードを追加します。

head内のコードはブラウザに対する指示を書き込む部分であり、閲覧者にはソースコードを表示しなければ見えない部分です。

はてなブログにおいては、［設定 ➡ 詳細設定 ➡ headに要素を追加］に以下のコードを追加します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

これにより、<head>タグ内にFont Awesomeのサイトのアイコンが定義されたCSS（カスケーディング・スタイル・シート）をリンクします。

リンクにはCSSやフォントなどがありますが、たくさんリンクしすぎるとページが重くなるので注意が必要です。

アイコンの使用

アイコンを使用するときは、Font Awesomeのサイトのギャラリーで使用するアイコンを選択し、コードを調べます。

fontawesome.com

左側のカテゴリを選択して絞り込んだり、キーワードによる検索が可能です。

使用したいアイコンをクリックします。

左上にあるUnicodeか、HTMLのコードを使用します。

どちらかをクリックすると、クリップボードにコピーされます。

Unicodeで使用する場合

はてなブログのサイドバーのタイトルの頭にアイコンを追加する場合を説明します。

［デザイン ➡ カスタマイズ ➡ { }デザインCSS］に以下のコードを追加します。

/* サイドバータイトル */
.hatena-module-title:before{
font-family: "Font Awesome 5 Free";
font-size:1em;
padding-right:2px;
font-weight:900;
}
.hatena-module-profile .hatena-module-title:before {
content: '\f007'; /*プロフィール*/
}
.hatena-module-search-box .hatena-module-title:before {
content: '\f002'; /*検索*/
}
.hatena-module-recent-entries .hatena-module-title:before {
content: '\f303'; /*最新記事*/
}
.hatena-module-entries-access-ranking .hatena-module-title:before {
content: '\f521'; /*注目記事*/
}
.hatena-module-category .hatena-module-title:before {
content: '\f07b'; /*カテゴリー*/
}
.hatena-module-html .hatena-module-title:before {
content: '\f14d'; /*HTML編集*/
}
.hatena-module-related-entries .hatena-module-title:before {
content: ''; /*関連記事*/
}
.hatena-module-archive .hatena-module-title:before {
content: ''; /*月別アーカイブ*/
}
.hatena-module-links .hatena-module-title:before {
content: ''; /*リンク*/
}
.hatena-module-recent-comments .hatena-module-title:before {
content: ''; /*最近のコメント*/
}
.hatena-module-circles .hatena-module-title:before {
content: ''; /*参加グループ*/
}