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

初心者向けマニュアル公開中。完全無料でホームページを公開しよう!動画マニュアルつき。

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

まずはメニューを入れ替えてみましょう

以下のようにメニューを入れ替えてみます。

解説の前に

解説で使っている初心者向けのテンプレートはメニューブロックが「1箇所」しかありませんが、ほとんどのテンプレートは「2箇所」ずつ入っています。
メニューを編集する場合は、メニューブロックが1つか2つかどちらか確認してから作業しましょう。
2つある場合、2個目も忘れず編集しましょう。
2つある場合の編集方法も以下に動画解説があります。

この画像サンプルのように並んでいると見つけやすいと思いますが、離れている場合もあります。
一般的に、大きな端末用には「id="menubar"」というワードが入っており、小さな端末用は「id="menubar-s"」というワードが入っているのでテキスト検索をして探すのもいいと思います。

動画解説

動画ではなく静止画の解説もあります。静止画の解説を見たい場合は下にある「静止画の解説を見る」をクリックして下さい。
(※画像内の再生ボタンを押すと動画が再生されます。約1分58秒。)

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

※前の作業工程に戻りたくなった場合。
「Ctrl(macは⌘) + Z」を押すと1つ前の工程に戻る事ができます。押すごとにさらに1つ前の工程に戻っていきます。戻りすぎてしまった場合は「Ctrl(macは⌘) + Shift + Z」でやり直しができます。

静止画の解説を見る

  1. アイコンをクリック。
  2. メニューの「Home」が以下の画像のように選択されたらクリック。
  3. クリック箇所のhtmlが選択されるので、
  4. 「Home」をダブルクリックして入れ替えます。

  5. 同じ作業を繰り返して残りも入れ替えていきます。
  6. 以下のように全て入れ替えて下さい。
    ※上の注意書きにもありますが、まだ画面の再読み込みはしないで下さい。情報がリセットされます。
  7. 引き続き、「<html lang...」の行をクリックし、
  8. 「Ctrl(macは⌘) + C」でコピー。
    この行をコピーすると、2行目以降の全てのhtmlソースをコピーすることができます。
  9. 「Sources」タブをクリック。
  10. 2行目の先頭にカーソルを置いて…
  11. 最後の行にきたら「Shift + クリック」で選択し、
  12. 「Ctrl(macは⌘) + V」で貼り付けます。
  13. 最後に「Ctrl(macは⌘) + S」で保存しましょう。



補足動画:大きな端末用メニュー、小さな端末用メニュー、それぞれある場合の入れ替え方法

(※画像内の再生ボタンを押すと動画が再生されます。約1分。)

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

※前の作業工程に戻りたくなった場合。
「Ctrl(macは⌘) + Z」を押すと1つ前の工程に戻る事ができます。押すごとにさらに1つ前の工程に戻っていきます。戻りすぎてしまった場合は「Ctrl(macは⌘) + Shift + Z」でやり直しができます。

>> NEXT:メニューのリンク先を変更しよう。

<< 「初心者向け講座」メニュー一覧に戻る