はじめに
目的
この章では、本ドキュメントの目的と使い方を分かりやすく説明します。ホームページの編集に不安な初心者でも、自分で修正や更新ができるようになることを目指します。
対象読者
ホームページを自分で編集したい個人事業主、趣味のサイト運営者、社内で簡単な更新を任された方などを想定しています。専門知識は不要です。
本書で扱う内容
本書は主に次の3つの方法を紹介します。
– HTML/CSSで直接編集する方法（細かい見た目を変えたい場合に有効）
– CMS（特にWordPress）を使った編集方法（管理画面で簡単に更新できます）
– ホームページ作成サービスを利用する方法（テンプレートを活用して短時間で仕上げる）
読み方・使い方
まず全体をざっと読み、該当する章を詳しく読んでください。実際に手を動かしながら進めると理解が早まります。各章で手順と注意点を丁寧に示しますので、順を追って作業してください。
ホームページ編集の主要な方法
概要
ホームページ編集は作り方により手順が大きく変わります。主に2つの方法があります。1つはHTML/CSSなどのファイルを直接編集してサーバーへアップロードする方法、もう1つはCMS（管理画面）で直感的に編集する方法です。
方法1：HTML/CSSをローカルで編集してアップロードする
手順はシンプルです。テキストエディタ（例：VS Code）でHTML/CSSを編集し、FTPクライアント（例：FileZilla）やSFTPでサーバーに上げます。メリットは自由度が高いこと、軽量で表示が速いことです。デメリットは専門知識が必要な点です。初心者はローカルで変更をテストしてから反映しましょう。
方法2：CMSの管理画面から編集する
WordPressやWixのようなCMSは、ブラウザ上でページを編集できます。テンプレートやプラグインで機能追加が簡単です。コードを書く必要が少なく、更新も手軽です。一方でプラグイン更新やテーマの互換性で問題が起きることがあります。
選び方のポイント
- 更新頻度が高く専門知識が少ないならCMSが向きます。
- デザインや動作を細かく制御したいならHTML/CSSでの編集が適します。
注意点
編集前に必ずバックアップを取り、公開前に別の環境で動作確認してください。ブラウザのキャッシュに注意し、反映されない場合はキャッシュのクリアを試してください。
HTML/CSSで構築されたホームページの編集手順
概要
HTML/CSSで作られた静的なホームページは、サーバー上のファイルを直接編集するよりもローカルで編集して差分をアップロードする手順が安全で確実です。ここでは初心者にも分かりやすく手順を紹介します。
準備
- バックアップを取る：編集前に必ずサーバー上の対象ファイルをダウンロードして保管します。
- 接続情報を確認：FTP/SFTPのホスト名、ユーザー名、パスワード、接続方式を用意します。
- ツールを用意：FTPソフト（例：FileZilla）、テキストエディタ（例：VS Code）を準備します。
編集手順
- FTPでサーバーに接続し、該当のHTML/CSSファイルをローカルにダウンロードします。
- テキストエディタで開き、変更箇所を編集します。表示箇所が分からないときはブラウザで該当ページを開き、表示されている文言やクラス名を検索して該当ファイルを特定します。
- 画像やCSSのパスが相対パスか絶対パスか確認し、必要なら修正します。
ローカルでの確認
簡易サーバー（VS CodeのLive Serverなど）を使い、ブラウザで表示を確認します。リンクや画像、レスポンシブ表示もチェックします。
差分のアップロード
動作確認後、変更したファイルだけをFTPでアップロードします。ファイルの権限（パーミッション）に注意してください。
直接サーバー上で編集しない理由
直接編集すると途中で問題が発生したときに元に戻せず、サイトが一時的に壊れるリスクがあります。ローカルで動作確認することで安心して作業できます。
よくあるトラブルと対処
- 文字化け：ファイルの文字コード（UTF-8等）を確認します。
- 反映されない：ブラウザのキャッシュをクリアしてください。
- リンク切れ：相対パスの基準を再確認します。
WordPressなどCMSを使用した編集方法
はじめに
WordPressのようなCMSは、管理画面から直感的に編集できます。専門知識が少なくてもページを更新できる点が魅力です。
ログインと基本フロー
- 管理画面にログイン（例: yoursite.com/wp-admin）
- 固定ページや投稿の一覧から編集したい項目を選ぶ
- 編集画面で内容を変更し、プレビューで確認
- 問題なければ「更新」ボタンで公開
投稿と固定ページの違い
投稿はブログ記事向け、公開日やカテゴリ管理に便利です。固定ページは会社概要やお問い合わせのような常設ページ向けです。
ブロックエディター（Gutenberg）の使い方
ブロック単位で見出し・段落・画像・ボタンなどを配置します。ドラッグで順序を変え、各ブロックの設定で余白や色を調整します。再利用ブロックを使うと同じ要素を簡単に複数ページで使えます。
テーマビルダーとウィジェット
テーマのカスタマイザーや専用のテーマビルダーでヘッダー・フッター・アーカイブ画面を編集できます。ウィジェットはサイドバーやフッターに機能を追加する便利な方法です。
プラグインで機能追加
問い合わせフォーム、画像最適化、SEO、キャッシュなどはプラグインで追加します。必要な機能だけを入れて動作確認を行ってください。
注意点とバックアップ
更新前に必ずバックアップを取ります。コア・テーマ・プラグインは定期的に更新し、互換性を確認してください。大きな変更はステージング環境で試すと安心です。
ホームページ作成サービスを使用した編集方法
ホームページ作成サービス（例：とりあえずHP）では、専門知識がなくても管理画面だけで直感的に編集できます。テンプレートに用意された編集可能領域を操作し、プレビュー確認後に更新ボタンを押すだけで反映します。
編集の基本手順
- ログインして該当サイトの編集画面を開きます。
- テンプレートやページを選び、「編集モード」に入ります。
- ブロックやセクションをクリックしてテキストや画像を差し替えます。ドラッグ＆ドロップで並べ替えできます。
- リンクやボタン、フォームの設定を行います。外部リンクやメール送信先を確認します。
- モバイル表示をプレビューし、表示崩れがないか確認します。
- プレビューで最終確認し、公開（更新）ボタンを押します。
よく使う機能
- 画像ギャラリーやスライダーの差し替え
- 予約フォームや問い合わせフォームの追加
- SEO設定（ページタイトル、説明文）
- 独自ドメイン設定とSSL有効化
- 公開日時の予約や権限管理
注意点と運用のコツ
- 画像は軽量化してアップロードすると表示が速くなります。
- 文字は読みやすいサイズと行間を保ちます。
- 編集前に簡単なバックアップや下書きを残すと安心です。
- 無料プランは機能やページ数が制限されることがあります。必要な機能は契約プランを確認してください。
上記の手順を守れば、専門知識なしで安全に更新できます。困ったときはヘルプやサポートチャットをまず利用してください。
