[42-4] link で「ショートカットアイコン」を付けよう

<link>要素第4弾です。
(第1弾は「[42-1] <link>で外部CSSファイルの読み込み、グループ化をしよう」
(第2弾は「[42-2] link media=" " で 外部CSSをメディア別に切り替えよう」
(第3弾は「[42-3] link rel="alternate" で他言語サイトやモバイル版へ導こう」

今回は、ウェブページのショートカットアイコンを表示させる方法です。
「rel="icon"」を使います。

使用する要素 <link>
使用する属性 rel属性、href属性、type属性、sizes属性

ウェブサイトの「ショートカットアイコン」とは

このようにブラウザで、タイトルの前に表示されるアイコンです。

「ショートカットアイコン」は、ブックマークしても常に表示されるので、サイトの差別化に最適。
どのサイトか一目でわかるので便利です。オリジナルのアイコンを作って表示しましょう。

<link>で「ショートカットアイコン」をつけよう

サンプルを見てみましょう。
GIFファイルをショートカットアイコンに指定します。

<head>
<link rel="icon" href="img/icon_gif.gif" type="image/gif" sizes="16x16">
</head>

赤の部分は「rel属性」。値は「icon」で、ショートカットアイコンを示します。
グリーンは「href属性」。ファイルの場所を書きます。絶対URL、相対URLどちらでも。
パープルは「type属性」で、ファイルの MIMEタイプを指定します。
最後のピンクは「sizes属性」。アイコンサイズを指定。PC用16×16ピクセルは、省略してもこのサイズになります。

実際にサンプルを作ってみました。
→link で「ショートカットアイコン」を付けよう
(honttoni42-4.html)
をご覧ください。(別ウィンドウで開きます)

上記のソースでのプレビューですが、
Win IE (ver.8) ではプレビューできませんでした。Winでは IE8 以外では表示できていましたが、
「GIFアニメーション」だけは、firefox でしか確認できませんでした。
Macでは、firefox, Chrome, Safari, Opera すべてショートカットアイコンはプレビューできました。

「ショートカットアイコン」に使えるファイル

GIF、JPEG、PNG、GIFアニメーションファイルが使えます。

それぞれの使い分けは、
・GIF→もっとも軽い。
・JPEG→写真やグラデーションがある画像に。
・PNG→背景を透明にしたいとき。ファイルは重い。
・GIFアニメーション→アニメーションアイコンを表示できる。

また、アイコンの画像は、16×16ピクセルでしか使わないからと、原寸にせずに、倍の32×32くらいで作った方がキレイに表示されます。

実際のサンプルを見た方がわかりやすいと思いますので、こちらをどうぞ。
→link で「ショートカットアイコン」を付けよう
(honttoni42-4.html)
(別ウィンドウで開きます)

<link>の属性とその値の一覧表

今回「sizes属性」を使ったので、<link>の属性はこれで一応全部使ってみました。
「<link>要素の属性一覧表」を見てくださいね。

次回予告

次回は<style>要素を使ってみましょう。
<style>要素は、HTMLファイル上に直接スタイルシートを組み込むための要素です。
外部スタイルシートを読み込む時は<link>、HTMLに直接CSSを書く時は<style>を使います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.