2016.01.27 [水] ホームページ・ビルダーで<head>内を記述していく
前回に引き続き、ホームページ・ビルダーのバージョン14を使って制作していきます。
最終的には学校、高校のWebサイトの制作を目指したいと思います。
前回、新規ページ制作でhtmlファイルができましたので、今回はそのファイルの<head>内をホームページ・ビルダーを使って記述していきたいと思います。
<meta>情報
ソースビューとページビューでは、上部のかんたんナビの表示が変わります。
ページビュー内をクリックしてカーソルを点滅させ、「SEO設定」＞「ページのSEO設定」ボタンをクリックします。
ページのSEO設定ダイアログが表示されますので、上から順番に記述していきます。
- ページタイトル
- こちらには、Webページのタイトルを記述します。
「河合塾学園 トライデント高等学校｜名古屋市中村区」と記述します。 - キーワード
- Webサイトのキーワードを文字列に記述します。
ただ最近では、ほとんど検索結果に関係がないため、記述しないWebサイトもあります。
「名古屋市 中村区 名古屋駅 Webデザイン学科」と記述します。 - 説明
- 検索結果画面にWebサイトの説明が表示されます。
何のWebサイトなのかわかりやすく書きます。「名古屋駅から徒歩5分。河合塾学園の仮想高等学校、トライデント高等学校のホームページです。Webデザインなどコンピュータ系の5学科。」と記述します。 - 検索対象
- 何かの理由で検索結果に表示させたくない時にチェックを入れますが、今回は必要ないでしょう。
続けて、その他のメタ情報を記述していきます。
ここまで書いても、ページビューには何も表示されません。
ページの属性ボタンをクリックし、属性ダイアログを表示します。
「メタ情報」タブを選択すると、先ほど記述した、キーワード、説明のメタ情報が追加されています。
こちらにさらに、メタ情報を追加していきます。
最初は、一番上の項目が選択されています。
このまま記述していくと、書き換えになってしまうので、クリアボタンを押して、フォームに何も表示されていない状態にします。
- 属性
- 「NAME」を選択します。
- 項目
- 右端の▼をクリックすると候補が出てきますので、［author］を選びます。
authorは、制作者情報となります。 - 値
- 「トライデントコンピュータ専門学校 Webデザイン学科」と記述しました。
「登録」ボタンを押すと、登録されます。
続けてhttp-equivの設定をしましょう。http-equivとは、情報をサーバーに伝えて正確に処理がなされるよう指定する属性です。クリアを押して白紙に戻します。
- 属性
- 「HTTP-EQUIV」を選択します。
- 項目
- 選択項目から［X-UA-Compatible］を選びます。
- 値
- 「ie=edge」と記述しました。
これで、Internet Explorlerで閲覧する場合、そのブラウザの最新の表示設定で閲覧させることができます。
下位互換モードだと表示が崩れたりする場合があります。
そして、スマートフォン対応に必須のviewport（ビューポート）を記述していきます。
さらに、表の右下にある▲▼は、選択することでメタ情報の順番を変更することができます。
- 属性
- 「NAME」を選択します。
- 項目
- 選択項目にはありませんので、直接「viewport」と記述します
- 値
- 「width=device-width, initial-scale=1」と記述します。
今は、この値で大丈夫です。値についての詳しい解説は、Google先生にお尋ねください。
最後に前回記述しなかった文字コード<meta charset="UTF-8">をソースビューに直接記述します。
HTML5では、<meta charset="UTF-8">と簡単に表記できます。
ただホームページ・ビルダー14では、構文エラーになってしまいますが、気にせず進めましょう。
ソースビューに
<!DOCTYPE html> <html lang="ja"> <head>河合塾学園 トライデント高等学校｜名古屋市中村区 </head> <body></body> </html>
と表示されていれば、OKです。
ページの属性機能で追加できない、もしくは面倒な場合は、上記をソースビューにコピペして、書き換えれば自動的に追加されます。
ここで、随分作業をしましたので、ファイルを保存します。
htmlファイルを保存する
一番上のバー（かんたんナビバー）の「ページの保存」ボタンをクリックします。
新規ファイルですが、上書き保存もしくは名前を付けて保存のボタンが表示されますので、「上書き保存」ボタンをクリックします。
デスクトップに新しく「trident」フォルダを作り、ファイル名をindex.htmlに書き換えて、保存ボタンを押します。
続けて、サイトの設定も行います。
かんたんナビバーの「全体の確認」ボタンをクリックして、ダイアログを表示させ、［編集中のファイルをトップページにしたサイトを新規に作成します］のアイコンを選択し、「次へ」ボタンをクリックします。
トップにするページを先ほど保存した「index.html」を選択して、「次へ」ボタンを押します。
構文エラーがでますが、気になるようであれば、ツールメニュー＞オプション＞一般タブ＞HTML構文エラー時の動作を［重大なエラーのみ、修正ダイアログを開く］に変更しておきます。
サイト名を決めます。
こちらは、Webサイトに表示されることはなく、後からでも、サイトメニュー＞サイト一覧／設定から編集ができますので、見たら思い出すような、わかりやすい名前にしておきます。
「トライデント高校20160127」と日付を入れておきました。
完了ボタンを押せば、サイトの設定終了です。
前回と今回で、とりあえずWebサイトを制作する準備ができました。
次からは、Webサイトを作り始められるといいな～。
