アイコンを使うとページがぐっとしまります。何か足りなかったようなものを埋めてくれるような感じですね。プロっぽさも作ってくれるのでアイコンはとても大切です。
アイコン
アイコンを使いたい場合は、Bootstrapが推奨しているサイトから読み込んで使用します。３つのサイトがBootstrapのサイトで紹介されています。
今回はその中から、Font Awesomeというサイトを使用した方法を学んでいきます。
このサイトのアイコンは、WEBフォントアイコンと呼ばれるものです。 これは、通常の画像アイコンと違い、CSSでカラーやサイズを変えられるなどフォントとして扱われるのです。画像は表示する際に、読み込みの時間が若干かかってしまいます。しかし、こちらはフォントという扱いなので、画像よりも早く表示されます。
Font Awesome使用準備
では、使い方について確認していきます。 まず、以下サイトにアクセスしてみましょう。
トップページのナビゲーションから「Start for Free」を選択します。 するとメースアドレスを登録してね、という画面が表示されるはずです。
以前は無条件でダウンロードとCDNの２種類の方法が使えたのですが、現在CDN版は会員登録をしないと使えない仕様になっています。
登録しなくてもダウンロード版は使用できますが、今回の課題以外にも「Font Awesome」を使用する機会は少なくありません。登録してCDN版を使用した方が手軽ではあります。
A.登録してCND版を使用する
Font AwesomeのCDN版を使用する場合は画面に従って フォームにEmailアドレスを入力し、 「Send kit Code」のボタンをクリックします。
メール確認して下さい、という表示に変わります。
登録したアドレスにFont Awesomeから「Confirm Your Font Awesome Account Email Address」というメールが届きます。
「Click to Confirm Your Email Address + Set Things Up」ボタンをクリック。
↓
パスワードを登録する画面が開きます。
同じパスワードを２回入力して「Set Password & Continue」をクリック。
アンケート画面が表示されます。 こちら任意なので、面倒ならば「No thanks. Let’s skip this step for now」ボタンをクリックでスキップして下さい。
これで登録は完了です。 そのままCDNのコードが表示されている画面に移った場合は表示コードをコピーしてください。
コード画面が開かない場合はFont Awesomeにログインし、
①ユーザーアイコンをクリックしてサイドメニューを開く
②サイドメニューFont Awesome CDNをクリック
これでCDNコードの画面に移動できるはずです。
コピーしたコードはアイコンを使用したいHTMLファイルの
<head>～</head>内に貼り付けてください。
B.登録したくない方
ダウンロード版を使い場合は「Start for Free」クリック後のページ、メールアドレス入力フォーム下にある「Download」ボタンからダウンロードして使用することもできます。
「Download」ボタンをクリックするとダウンロードページが開くので、 「Download Font Awesome Free for the Web」をクリック。
ダウンロードしたフォルダを解凍し、
jsディレクトリから「all.min.js」を作成中のフォルダ内に移してリンクを張ります。
例えばjsフォルダを作ってその中に「all.min.js」を入れた場合であれば
html
<script src="js/all.min.js"></script>
ですね。
ちょっと面倒なので、不安な方はCDN版を使ってみてください。
アイコンを入れる
準備が整ったので、使用するアイコンを選びましょう。
ナビゲーションから「Icons」を選択し、アイコン一覧のページに移動します。
アイコンの色が、２色ありますね。これは、ブラックが無料で使えるもの、薄いグレーが有料のものという意味です。今回は、無料のものを選択します。どれでも構いませんので、アイコン部分を押下してみましょう。
上図で選んだものは、Amazonのアイコンです。 今回はAmazonを取り上げますが、他にもツイッターやフェイスブックなどのアイコンも存在します。サイト制作の際に、よく使うアイコンがそろっています。
また、以下イメージを見てもらうとわかるように、カラーが設定されているように見えますね。これは、こんな風にカスタマイズ出来ますというような例になります。デフォルトのカラーはブラックなので気にせず進めていきましょう。
使用するアイコンが決まったら、上図で赤枠で囲った部分のコードをコピーします。 あとは、HTMLファイルに貼り付けるだけです。
実際に貼り付けてもらうと分かるかと思いますが、デフォルトのサイズは少し小さめです。 ですので、任意のサイズにカスタマイズしてみます。
青いハイライト部分を、貼り付けたアイコンのコードに追加します。 サイズごとに、CSSクラスがありますね。
また、カラーを変更したい場合は、クラス部分にオリジナルのCSSクラスを追加します。 そして、CSSファイルの方で「color: #333;」というように色を指定してください。
LP制作課題⑤
では、作成中のLPにもアイコンを加えてみましょう。
テキストエリア、見出しとテキストの間にアイコンを３つ設置します。 ３つ横並びに配置されていればアイコンの種類は何でも構いません。
