headにさらに情報を
ファビコンとタッチアイコン
ファビコンとは？.icoとは？という方はこちらの記事にすごくわかりやすく載っています。
- favicon.icoはジェネレーターにて生成すると楽。ジェネレーターは色々あるみたいですが、上記のブログと合わせてこちらのジェネレーターを使用しています。
http://ico.bradleygill.com/index.php←Browseを押してファビコン化させたい画像を選ぶだけで.icoファイルを生成してくれます。
- ファビコンとタッチアイコンを各ページに設定したい場合は、ファビコンとタッチアイコンの設定を各ページのヘッダに記載する。
- favicon.icoとtouch-icon.pngはサイトトップのインデックスと同じ階層に配置する。
- 今回はtouch-icon.pngのサイズは192x192とします。これは自動縮小されるので、タッチアイコンの中で一番大きいサイズのようです。（※2015年データ）
ファビコンの設定
サイトトップのindex.htmlからファビコンを設定する際の記述。※もちろんサイトトップのindex.html以外から読み込みたい場合はhrefのパスを読み込みたい場所からのパスに直す必要があります。
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico">
タッチアイコンの設定
サイトトップのindex.htmlからタッチアイコンを設定する際の記述。※もちろんサイトトップのindex.html以外から読み込みたい場合はhrefのパスを読み込みたい場所からのパスに直す必要があります。
<link rel="apple-touch-icon" href="touch-icon.png">
ビューポート設定（主にスマホサイト用）
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
フォーマットディテクション設定（主にスマホサイト用）
iOSやAndroidには、元々080-xxxx-xxxxといった電話番号やxxxxx@gmail.comのような記述をhtmlで行うとタッチしただけでそこに電話がかかってしまったり、自動リンクされてしまう機能が備わっているので、その機能を切っています。
※detection=検出
<meta name="format-detection" content="telephone=no,email=no">
詳しくはこちらに。
https://iwb.jp/format-detection-telephone-email-address-no/
外部cssファイルの読み込み
<link rel="stylesheet" href="css/style.css">
CSSファルダ内のstyle.cssを読み込んでスタイルシートを適用させます。
jQuery本体と外部jsファイルの読み込み
<script src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
jQueryのコードを書いた外部jsファイルを読み込みたい場合は、先にjQuery本体を読み込んでから出ないと外部ファイルに書かれているコードをjQueryのコードとして読んでくれないので注意です。
外部jsファイルの読み込み（jQueryを使わない場合）
<script type="text/javascript" src="js/script.js"></script>
だけでOKです。jsフォルダにあるscript.jsというjavascript言語でかかれたプログラムファイルを読みに行きます。
本日のまとめ各コードの記述位置
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="概要文">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico">
<!-- touch-icon -->
<link rel="apple-touch-icon" href="touch-icon.png">
</head>
<body>
</body>
</html>
※色で記載項目を分けてみました。
必須の記述
スマホ用の設定
外部ファイルの読み込み
ファビコンとタッチアイコンの設定
ヘッダは色々書くことができて大変ですよね。
もちろん、PC向けのサイトを制作するのであれば、スマホ用の設定はいらないですし、ファビコンとタッチアイコンも必要ないなら書かなくても大丈夫です。ですが、必要になった時にあれ？どうやって書いたっけ？となってしまうかもしれないのでその時はこのページをみてコピペってくれればいいなとの思いで掲載しました。
ではまた次回：D
