Template Party

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

トップページの編集

ついに最後のページです。今までの作業を繰り返すだけなので簡単です。

お知らせ欄を編集

過去のステップのように、アイコンをクリックして、画面上の編集したい箇所をクリックし、Elementsパネルで編集、、、、Sourcesパネルにコピー、、、、、、を繰り返してもいいのですが、今回は勉強も兼ねてhtml側を直接編集してみましょう。

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

静止画の解説を見る

  1. 「2017」の文字を検索して編集箇所を見つけようと思います。
  2. 「Ctrl(macは⌘) + F」で検索窓を出し。
  3. 「2017」と入力。
  4. 「2017」がハイライトされました。
  5. ここでちょっとお知らせブロックを見てみましょう。
  6. 一定の形式があるようです。
  7. 例えば、「<dt>〜</dt>」は日付の行。
  8. 「<dd>〜</dd>」は文章。
  9. この法則を理解していれば簡単そうです。
  10. 作業に戻ります。
    不要なパーツを削除してみましょう。
    選択したら…、
  11. キーボードの「delete」キーを押して削除。
  12. 情報を編集しましょう。
  13. 編集したら、「Ctrl(macは⌘) + S」で保存し、「Ctrl(macは⌘) + R」でプレビュー確認しましょう。



お知らせの下のブロックを削除し、人気のパンリストを並べます

お知らせの下にあるブロックはテンプレートの説明なので削除します。
削除すると、お知らせ1行しかないので寂しすぎます。パンギャラリーから、イチオシしたいパンだけ掲載してみることにしましょう。

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

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

静止画の解説を見る

  1. 不要なブロックから削除します。今まで何度もやってきた手順と同じなので簡単ですね。
  2. 「Ctrl(macは⌘) + Shift + C」を押してツールを起動。
    sectionが選択されたら、
  3. クリックし、
  4. キーボードの「delete」キー押して削除します。
  5. 2行目の「html lang...」の行をクリックし、
  6. 「Ctrl(macは⌘) + C」でコピー。
  7. 「Sources」タブをクリック。
  8. 2行目の先頭にカーソルを合わせたら、一番下までスクロールし、
  9. 「Shift + クリック」で選択したら、
  10. 「Ctrl(macは⌘) + V」でコピーしておいたコードを貼り付けます。
  11. 続いて「Ctrl(macは⌘) + S」で保存。
  12. パンギャラリーのパーツをトップページでも使うので、クリック。
  13. 過去のステップで作ったページですね。
  14. 「Ctrl(macは⌘) + Shift + C」を押してツールを起動。
    sectionが選択されたら、
  15. クリックし、
  16. 「Ctrl(macは⌘) + C」でコピー。
  17. 「Sources」タブをクリック。

    ※上のプレビューと下のタグ画面は連動していません。
    マニュアル制作上、現時点では「index.html」のみが開いている状態ですが、他のhtmlを複数開かれている場合もあると思います。
    Sourcesパネルと上のプレビューは連動していないので、それぞれ別物という点に注意して下さい。
    例えば、パンギャラリーページをプレビューで開いているからといって、下のタグパネルが必ずパンギャラリーかというと、そうではないという事です。
    きちんとタブのhtml名を確認して選び、編集しましょう。

  18. 先ほど編集した「更新情報・お知らせ」ブロックを探しましょう。
    この下にコピーしたパンのタグを貼り付けたいと思います。
  19. 貼り付け箇所がみつかったらクリックし、「Ctrl(macは⌘) + V」で貼り付けます。
    貼り付けたら「Ctrl(macは⌘) + S」で保存も忘れず。
  20. 「ホーム」をクリックしてプレビュー確認しましょう。
  21. そのまま全部トップページに載せていたい、という場合はここで終了ですが、今回はトップページでは掲載しないパンを削除します。
  22. 「Sources」パネルを見てみると、パンのブロックが並んでいるのがすぐわかると思います。
    もし分からない場合は過去のステップで行なった検索(Ctrl(macは⌘) + F)でキーワード検索してみて下さい。
  23. 不要なパンブロックを削除しましょう。
  24. 削除したら、見出しも入れ替えましょう。
  25. 「Ctrl(macは⌘) + S」で保存し、「Ctrl(macは⌘) + R」でプレビュー確認して終了です。



最後にメイン画像を入れ替えましょう。

ロゴ背景のメイン画像を入れ替えます。

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

静止画の解説を見る

  1. 入れ替えようの画像を準備しておいて下さい。以下はデスクトップに準備した例です。
  2. 今回は画像の置き換えですむので、テンプレート内のmainimg.jpgと同じ名前に変更して上書きする事にします。
  3. 画像ファイル名を「mainimg.jpg」に変更して下さい。
  4. 画像ファイル名を変更したら、テンプレートのimagesフォルダ内に移動(クリックした状態のまま離さず移動)します。
  5. 上書きに関する注意メッセージが出るので、上書きをする選択肢を選びます。
    以下はMacですがWindowsでも同じようなメッセージが出ます。
  6. 置き換わりました。
  7. Chromeに戻り、「Ctrl(macは⌘) + R」でプレビューしてみましょう。
    Chromeを開いていない場合は、テンプレートフォルダ内のindex.htmlを直接クリックして規定のブラウザで立ち上げてもらってもOKです。
  8. ちょっと大きすぎて高さのバランスが悪そうですね。
    次のステップで高さをカットしたいと思います。



画像の高さをカットする

これも以前の「ロゴ画像の変更」ステップで行いましたが復讐です。
画像編集サイトのhttps://pixlr.com/editor/にアクセスし、mainimg.jpgを開いておいて下さい。

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

静止画の解説を見る

  1. 切り抜きツールを選択。
  2. 切り抜き範囲をドラッグ(クリックした状態で対角線に移動していく)します。
  3. 範囲を決めたら、範囲内でダブルクリック。
  4. 「ファイル」->「保存」を選択。
  5. 保存設定画面でフォーマットに「JPEG」が選択されているのを確認し、
  6. OKをクリック。
  7. 保存先のフォルダが出てくると思いますので、テンプレートのimagesフォルダが表示されているか確認し、
  8. 保存ボタンをクリック。
  9. 上書きに関する注意ボックスが出てきますので、上書きを選択するボタンを押して下さい。
    以下はMac画面ですがWindowsでも同じようなメッセージが出ます。
  10. 再びブラウザでプレビューします。今度はよさそうですね。



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