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

テンプレートの著作を外したい場合

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

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

目次

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

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

0:15〜マニュアルで使うテンプレートについて。
1:00〜Google Chromeのセッティング。デベロッパーツールの起動。
2:00〜テンプレートを編集する為の設定。
2020年8月追記:同一ウィンドウで開く事ができない場合は。
Chromeのバージョンアップにより、ウィンドウ内にドラッグ&ドロップすると新規タブで開く仕様に変更されたようです。
以下のように、開いているタブに対してドラッグ&ドロップして下さい。そうすれば同一ウィンドウで開きます。

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

3:48〜補足。2箇所あるメニューについて。
※2021年秋より、メニューが1つのみのタイプも公開されています。
5:30〜更新した内容を保存。
6:40〜リンク先をlink.htmlからaccess.htmlに変更。link.htmlの削除とaccess.htmlの追加。
7:55〜トップページのメニューをその他ページにコピー。
9:10〜テキスト検索の方法

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

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

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

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

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

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

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

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

htmlの仕上げ(4:57)

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

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

https://pixlr.com/editor/
0:57〜ロゴ画像の制作。
(補足:クイックCMSさんで、ロゴ画像の簡単ツール(文字ロゴメーカー)が公開されました。簡単にロゴ画像の生成&ダウンロードができます。)
1:23〜言語の設定
3:32〜取り消しとやり直し
4:06〜ロゴ画像を保存
5:42〜ロゴを再加工する場合はPXDファイルを使います。
6:21〜置き換えたロゴをプレビュー確認。
6:40〜メイン画像の置き換え。
8:33〜メイン画像を保存

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

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

おまけ…トップページメイン画像をスライドショーに置き換えてみる。(07:34)

https://template-party.com/manual/omake_slide/slide.zip
0:34〜slide.cssのダウンロード
1:03〜index.htmlにslide.cssの読み込み
1:32〜スライドショー用の画像を用意。Pixlr Editorでサイズを統一する。
5:22〜htmlの仕上げ。メイン画像をスライドショー用のタグに置き換えます。
7:00〜最後にプレビュー確認。もっと詳しくslide.cssを知りたい人の為のurl案内。

1つ前のページに戻る