無料ホームページテンプレート Template Party無料ホームページテンプレート 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分

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

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

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

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