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

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

各ページのコンテンツ入力。

4枚のhtmlファイルの内容を入れ替えていきましょう。

まずは、「パンギャラリー」ページから編集してみましょう。

プレビュー画面から直接「パンギャラリー」をクリックしてページを開きます。
ここの写真を入れ替えます。

htmlのタブをクリックすると、htmlコードは編集できますがプレビューとは連動しないようなので、プレビューを見る場合はプレビュー画面をのメニューをクリックして下さい。

又は、Filesystemのフォルダ構成の中からhtmlをプレビュー画面にドラッグする事で見る事もできます。

入れ替える写真を用意しましょう。

今回はパン屋のサイトを想定しているのでパンの写真を用意しました。
正方形であれば縦横サイズはどうでも構いません。
一番簡単なのは、テンプレートのサンプル画像に上書き保存をする事です。
https://pixlr.com/editor/
にアクセスし、編集しましょう。

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

同じ作業を繰り返し、全部の写真を入れ替えて下さい。

再びパンギャラリーのプレビューを見てみましょう。

以下のように5枚の写真が置き換わっていればOKです。

html側のテキスト情報を更新します。

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

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

ページの見出しを「SERVICE」から「パンギャラリー」に入れ替えておきましょう。

このテンプレートの場合は「GALLERY」と入るべきでしたがなぜか「SERVICE」になっていましたね。
ごめんなさい、テンプレート側のミスです。入れ替えておいて下さい。

完成です!

補足:商品ブロックが足りない場合

  1. 6個目の商品として「sample6.jpg」という写真を追加する事にします。画像はimagesフォルダに準備しておいて下さい。
  2. 「Sources」パネルを開いた状態にし、最後の商品ブロックを選択して「Ctrl(macは⌘) + C」でコピー。
    最後の商品ブロックが分からない場合は、「Ctrl(macは⌘) + F」で検索窓を出して最後の商品ブロックの中で使っているテキストを一部入力すれば該当箇所がハイライトされます。
  3. 最後のブロックの下に改行を入れて、その辺りで…、
  4. 「Ctrl(macは⌘) + V」で貼り付けます。
  5. 情報を入れ替えます。
  6. 「Ctrl(macは⌘) + S」で保存し、「Ctrl(macは⌘) + R」でプレビュー確認しましょう。

>> NEXT:「パン作りのこだわり」ページを作る

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