Template Party

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

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

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

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

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

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

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

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

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

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

静止画の解説を見る

  1. 切り抜きツールを選択。
  2. ▼をクリックしてリストから「アスペクト比」を選択。
  3. ドラッグして範囲内でダブルクリック。
  4. 保存します。
    ファイルメニューから「保存」を選択。
  5. 写真に適したJPEGフォーマットを選択し、保存ボタンをクリック。
  6. 保存先を確認するウィンドウが出てきますので、テンプレートフォルダを開く。
    この画面はMacですがWindowsでも似たような画面が出ます。
  7. imagesフォルダを開いて下さい。
  8. imagesフォルダ内が開きますので、sample1.jpgを選択して保存ボタンを押します。
  9. 上書きしていいかの警告画面が出ますので、「置き換え」を選択します。
    ご利用のパソコンによってはこのメッセージではないかもしれませんが、上書きに該当するボタンを押して下さい。
  10. 実際に置き換えられたか、テンプレートのimagesフォルダを確認してみましょう。



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

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

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

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

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

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

静止画の解説を見る

  1. ツールをクリック。
  2. 見出しをクリック。
  3. クリック箇所が選択されるので、
  4. ダブルクリックして編集します。
  5. Enterキーで確定。
  6. すぐ下に説明文があるようなので、
  7. こちらもダブルクリックして入れ替えます。
  8. 同じ操作を繰り返し、残りも入力してしまいましょう。
  9. 入れ替え完了。
  10. 上から2行目の「html lang...」の行をクリックし、「Ctrl(macは⌘) + C」でコピー。
  11. 「Sources」タブをクリック。
  12. 2行目の先頭にカーソルを合わせたら、一番下までスクロールし、
  13. 最後の行で「Shift + クリック」。
  14. 続けて「Ctrl(macは⌘) + V」で貼り付け。
  15. 「Ctrl(macは⌘) + S」で保存します。
  16. 保存すれば再読み込みOKです。「Ctrl(macは⌘) + R」で画面を再読み込みして確認しましょう。



ページの見出しを「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:「パン作りのこだわり」ページを作る

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