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

初心者向けマニュアル 《Mac版》

うまく編集できない場合はサポート掲示板をご利用下さい。

目次

  1. テンプレートを編集する為の設定(03:02)
  2. メニューの入れ替え(09:57)
  3. パンギャラリーページの編集(07:42)
  4. パン作りのこだわりページの編集(08:14)
  5. アクセスページの編集(08:29)
  6. トップページの編集(07:32)
  7. htmlの仕上げ(5:42)
  8. 画像加工ソフト「Pixlr Editor」で画像を編集する(9:54)
  9. レスポンシブの動作確認(5:50)
  10. 無料レンタルサーバーを探す(XFREEさんを使ってみる)(※別窓で開きます)
  11. サーバーにアップロードする方法(※別窓で開きます)

テンプレートを編集する為の設定(3:02)

0:15〜マニュアルで使うテンプレートについて。
1:00〜Google Chromeのセッティング。デベロッパーツールの起動。
2:00〜テンプレートを編集する為の設定。
テンプレートのダウンロード・解凍方法がわからない人へ。(※別窓で開きます)

メニューの入れ替え(9:57)

3:48〜補足。2箇所あるメニューについて。
5:30〜更新した内容を保存。
6:40〜リンク先をlink.htmlからaccess.htmlに変更。link.htmlの削除とaccess.htmlの追加。
7:55〜トップページのメニューをその他ページにコピー。
9:10〜テキスト検索の方法

パンギャラリーページの編集(7:42)

3:21〜写真の準備。
4:08〜写真の入れ替え。
5:58〜パンブロックを追加する方法

パン作りのこだわりページの編集(8:14)

img src="images/●" alt=""
2:45〜使う画像を準備。
3:24〜画像タグを単語登録。
4:31〜html仕上げ
6:30〜登録しておいた画像タグの単語を使って画像を配置
7:46〜少しだけ調整。テキストをセンタリングする。

アクセスページの編集(8:29)

3:10〜使わないtableブロックの削除方法。
4:34〜ブロックが足りない場合の追加方法。
6:13〜Google Mapで地図のタグを取得。
7:09〜htmlにマップのタグを貼り付ける。

トップページの編集(7:32)

2:00〜更新情報・お知らせを編集します。
3:26〜人気パンを配置する。

htmlの仕上げ(5:42)

2:04〜テキストの一括置き換えソフト(TextWrangler)を使って作業する。
5:00〜補足。タイトルタグをページによって調整する。

画像加工ソフト「Pixlr Editor」で画像を編集する(9:54)

https://pixlr.com/editor/
0:57〜ロゴ画像の制作。
1:23〜言語の設定
3:32〜取り消しとやり直し
4:07〜ロゴ画像を保存
5:48〜ロゴを再加工する場合はPXDファイルを使います。
6:21〜置き換えたロゴをプレビュー確認。
6:40〜メイン画像の置き換え。
8:31〜メイン画像を保存

レスポンシブの動作確認(5:50)

0:41〜レスポンシブ確認用のウィンドウを起動
2:05〜レイアウトが切り替わる「ブレイクポイント」の解説
3:42〜ブレイクポイントの変更
4:37〜「iPhone X」でテンプレート全体のプレビュー確認
5:22〜ツールの終了