こんにちは。編集中にうっかり記事を「全消し」し撃沈していたリンです。
…それ以来「下書きのこまめな保存」を実施しております。
さて、今回はHTMLのヘッダーの中の<title>部分をイジってみたいと思います！
ダウンロードしたテンプレート の「index.html」のファイルをTeraPad で起動させると、HTMLが書かれた画面が立ち上がってきます。
※起動方法が分からないかたはこちら
をご覧ください。
※また、TeraPadがない方は、代わりに「index.html」のアイコンの上で右クリック→「プログラムから開く」→「Notepad」を起動してください。
この画面には何が書かれているかというと…
【1行目】<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">「この文書はHTMLを使ってます」という宣言文
【2行目】<html>「ここからがHTMLの記述です」
【3行目】<head>「ここからがヘッダー部分です」
【4行目】<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">「この文書は日本語を使います」
【5行目<meta name="keywords" content="">このホームページのキーワード
【6行目】<meta name="description" content="">ホームページの説明
【7行目】<title>～</title>このホームページのタイトル
【8行目】<link rel="stylesheet" href="style.css" type="text/css">「この文書はスタイルシートを使っています」
【9行目】<BASE target="_top">※ただ今検証中…わかりません。ゴメンなさい！
【10行目】</head>「ここまでがヘッダー部分です」
5行目と6行目は、検索結果の上位に表示されるようにサイトを設計（SEO）する上で非常に重要！ですが見た目には変化がないので、今回はイジりません。
試しに、7行目<title>にある「ホームページ制作」の部分を「タイトル変えてみましょう」に書きかえて「保存」してみましょう。
そして再び「index.html」のアイコンをダブルクリックすると…
ブラウザのタブの部分が「タイトル変えてみましょう」と変わったのにお気づきでしょうか？
あと、この<title>の記述は、Yahoo！やGoogleに検索表示されたときのタイトルにもなります！
※記事の最後に画像を添付しますのでご確認ください (^ー^)b
このヘッダーについて詳しくはこちら の動画をご覧ください （約6分）。
※尚、動画解説中では「秀丸」というソフト名がでてきますが、これはTeraPadと同等のソフト（有償）の名称です。
「なんだかデキそうな気がする～
」…そんな気になってきたのではないでしょうか（笑）
次回は<body>をイジってみたいと思います！
それではまた ♪(o^ｰﾟ)/★,｡･:･ﾟ
テンプレートをもとに編集してつくったのがこのサイト
です！あなたならどうイジる？
ホームページが自分で作れるようになったら、サイドビジネス
も夢ではありません！ぜひチャレンジしてみてください！
▼こうなりますが
▼<title>内を書き換えて保存、ブラウザで表示すると…
▼タイトルが変わりました！
▼<title>はこの赤い枠の部分なのですね。
