Template Party

ホームページテンプレートの編集

初心者向け講座

テンプレートの選び方とダウンロード＆解凍。

好みのテンプレートのダウンロードから解凍までの解説です。
-> 関連リンク「htmlなどの拡張子が見えない場合」

テンプレートを解凍できない場合は解凍ソフトを探しにいこう。

上のステップでテンプレート解凍をしたはずなのに、htmlファイルを開くと文字だけの場合は解凍できていません。
解凍ソフトを探しにいきましょう。

ロゴ画像を入れ替えよう。

テンプレートに梱包されているサンプルロゴからあなたのサイトのロゴに変更しよう。
WEB上で直接編集ができる「PIXLR EDITOR」さんを利用してみます。

  1. PIXLR EDITORを起動し、ロゴの土台をソフトに配置。
  2. 文字の配置：その１動画解説あり
  3. 文字の配置：その２動画解説あり

Google Chromeを使ってhtmlを編集してみよう。

Google Chromeのデベロッパーツールを使ってテンプレートを編集します。
ロゴ加工のステップに使った「PIXLR EDITOR」も所々で使用します。

  1. Chromeデベロッパーツールを開き、テンプレートを編集する為の準備を行う。
  2. メニューの入れ替え。動画解説あり
  3. メニューのリンク先の変更。
  4. トップページ以外のページのメニューの入れ替え。動画解説あり
  5. 現在表示中メニュー（current）を調整。
  6. 不要なページを削除し、新しいページを作る。
  7. 各ページのコンテンツ入力：パンギャラリー（PIXLR EDITORを使った画像入れ替え、htmlの編集）動画解説あり
  8. 各ページのコンテンツ入力：パン作りのこだわり（不要なブロックの削除、単語登録の方法、新しい画像の配置）動画解説あり
  9. 各ページのコンテンツ入力：アクセスページ（不要なブロックの削除、tableにアクセス情報を入力、Google Mapの配置）動画解説あり
  10. 各ページのコンテンツ入力：トップページ（お知らせ欄の編集、おすすめパンの配置、メイン画像の入れ替え）動画解説あり
  11. CSSの確認と編集方法。動画解説
  12. レスポンシブでの動作確認。動画解説

テキストの一括置き換えツールを使ってhtmlの仕上げをしよう。

titleタグやmetaタグなどを一括置き換えソフトを使って入れ替えます。動画解説

無料サーバーを契約してサイトを公開しよう。

  1. 無料レンタルサーバーを探す（エックスドメインさんを使ってみる）
  2. 管理ページの設定をする。
  3. サーバーにアップする方法（ファイルマネージャー or FTPソフト）

中級者以上向け講座：カスタマイズ方法メニュー

↑