超超初心者向け漫画サイトのつくり方【HTML基本】で作成したファイルの「head」部分に記載する内容について書いていきます。
今回は、最低限必要なもののみとします。
headタグの中に記述するコード
主に、ブラウザや検索ロボットくんに伝える情報です。具体的なコードを見ていきましょう～
タイトル（title）
ブラウザのタブに記載されるサイト名です。必ず記載しましょう。
<title>ここに自分のサイト名を記載</title>
見やすくするため、ちょっと改行を入れました。こんな感じで記述してください。
記述したら保存してください。保存方法は、下の画像を参考にしてください。
次に、ブラウザで開いてみてください。
開き方は、「index.html」ファイルをダブルクリックするか、右クリック→「プログラムから開く」→chromeやIEなどを選択で開きます。
開いたら、ブラウザ上部のタブを見てください。
こんな感じで表示されていたら成功です。
表示されなかった場合は、打ち間違いが無いかと、ちゃんと保存しているかを確認してください。
文字コード（charset）
どの文字コードを使うかを記述します。下手すると文字化けの原因になるので正確に記述することが必要です。
<meta charset="UTF-8">
headの開始～閉じの中に置けばいいのですが、見た目の問題でtitleの上に記述しました。このmetaというタグは、1つで完結するタイプのタグです（閉じタグ不要）。そして、色んな種類のmetaがあります。文字コードはその中の１つです。
サイトの内容（ description ）
これもmetaの１つ
サイト検索をかけたときに、サイトのざっくりとした内容が表示されますよね？アレです。
記述しなくても本文から適当に拾ってもらえるのですが、漫画サイトは画像が主になります。画像の中に記載した文字までは拾ってもらえないので、必ず記載しましょう。
<meta name="description" content="ここにサイトの内容を記載">
似たもので、keywordというものもあります。が、descriptionの方が大事です。今回は「最低限」の記述を紹介しているので省略しますが、入れたい人は当然入れて大丈夫です。
ファビコン
ブラウザのタブに表示される小さいアイコンの事をファビコンと呼びます。
今回は最適ではなく、超超初心者でもハードルが低く、かつ最低限の導入ができる方法を紹介します。
１、お絵かきソフトで正方形のキャンバスを作成します。
２、好きなデザインでアイコンを作ってください。
３、作ったアイコンを16ｐｘの正方形に整えてください。
４、ｂｍｐ形式で書き出してください。
５、ｂｍｐ拡張子を「名前の変更」でｉｃｏ拡張子に変更してください。
６、ホームページ作りフォルダに入れてください。
最後に、index.htmlファイルにファビコンを認識させるコードを入力します。
<link rel="icon" href="favicon.ico">
ファビコンの名前は好きな名前で大丈夫ですが、「favicon.ico」とするのがオススメです。
フォルダの中は、こうなります。
index.htmlファイルの中は、こうなります。
ブラウザで開いて、確認してください。
このように、自分でつくったアイコンが表示されたら成功です。
なお、IE（インターネットエクスプローラー）やedgeは、サーバーにあげないと読み込んでくれないようです。両ブラウザでは表示されないのが正解です。
出来れば、ホームページを作るならchromeをインストールしてください。ファビコンだけではなく他の面でも、chromeは優秀でとても役に立ちます。
おまけ
おさらいのコードをはっておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="ここにサイトの内容を記載">
<link rel="icon" href="favicon.ico">
<title>ここに自分のサイト名を記載</title>
</head>
<body></body>
</html>ファビコンの名前を好きな名前にしているひとは、「favicon.ico」の部分を「自分の付けた名前.ico」にしてください。
これでＨＥＡＤの最低限の記述は終わりです。お疲れさまでした。
コメント