無料ホームページテンプレート Template Party無料ホームページテンプレート Template Party

Google Chrome(グーグルクローム)を使ってhtmlを編集してみよう

「アクセス」ページを作る

アクセスページはabout.htmlをコピーして新規制作したファイルでしたね。
ここの「talbeサンプル」というブロックを利用してページを作ってみましょう。

「パン作りのこだわり」ページの時と同じように、不要なブロックを削除します。

動画解説:約2分13秒
>> 静止画の解説を見る(※別窓で開きます)

「Elements」パネルでの作業中は、再読み込みしない&ページ移動しない!
プレビュー画面からリンクで他のページに移動したり、再読み込みをかけるとせっかく編集した情報がリセットされるので注意して下さい。
また、「Elements」パネルで編集した情報はそのまま保存する事ができません。htmlが保存できるのは「Sources」パネルで行った編集のみです。

残っていたAboutブロックを削除し、tableを編集します

動画解説:約3分59秒
>> 静止画の解説を見る(※別窓で開きます)

「Elements」パネルでの作業中は、再読み込みしない&ページ移動しない!
プレビュー画面からリンクで他のページに移動したり、再読み込みをかけるとせっかく編集した情報がリセットされるので注意して下さい。
また、「Elements」パネルで編集した情報はそのまま保存する事ができません。htmlが保存できるのは「Sources」パネルで行った編集のみです。

Google Mapを入れよう

Google Mapを使って地図を配置します。
Google Mapについては別ページで解説しているので、そちらをご覧頂き、マップのコードをコピーしておいて下さい。

  1. 目印として「★」と入力していたのでこれを直接検索したいと思います。
  2. 「Ctrl(macは⌘) + F」で検索窓を出し、
  3. 「★」と入力すると、該当箇所がハイライトされます。
  4. ハイライトされた★を削除してマップのタグを貼り付けましょう。
  5. 「Ctrl(macは⌘) + S」で保存したら、「Ctrl(macは⌘) + R」でプレビュー確認しましょう。
  6. アクセスページも完成です!あとはトップページのみ。頑張りましょう。

>> NEXT:トップページの編集

初心者向けマニュアルトップに戻る