超！初心者向けHTML編集講座

テンプレートをちょこっといじって自分のサイトを作ってみよう

はじめに：テンプレートをいじるだけでもサイトは作れます！

HTMLの編集は難しそうなイメージがあるかもしれませんが、ゼロからコードを書く必要はありません。

配布されているテンプレートの文字や画像を書き換えるだけで素敵なサイトが作れます。

このページでは、テンプレートを編集するときに「ここだけ直せば大丈夫！」というポイントをまとめてみました。参考になれば幸いです🐾

1. 準備編：そもそも何を使って編集するの？

HTMLファイルは、パソコンに最初から入っている「メモ帳」などでも編集できます。でも、文字に色がついて見やすくなったり、入力の手助けをしてくれる「テキスト（コード）エディタ」という専用ソフトを使うと作業が格段に楽になりますよ！

おすすめの無料エディタ

ソフトをダウンロードしたくないときは

「FC2ホームページ」など、レンタルサーバーの管理画面にエディタ機能が備わっている場合があります。ソフトを入れずにブラウザ上で編集をして、そのまま公開もできる手軽さが魅力です🐾

2. 実践編：実際にテンプレートを書き換えてみよう

では、書き換える場所を順番に見ていきましょう！

💡 作業を始める前の重要テクニック！
編集ミスで表示がおかしくなったときにすぐ元に戻せるよう、作業を始める前にHTMLファイルをコピーして「index_backup.html」などの名前でバックアップ保存しておきましょう🐾
編集した結果は、HTMLファイルをダブルクリックしてブラウザで開くことで確認できます。

1ページのタイトルを変える

ブラウザのタブに表示されるサイト名を変えてみましょう。コードの上の方にある <title> という場所を探します。

<!-- 変更前 -->
<title>Gallery & Portfolio</title>

<!-- 変更後：自分のサイト名にする -->
<title>私のイラストギャラリー</title>

2文章を書く・改行する・リストを作る（ABOUT・更新履歴）

HTMLのちょっと不思議なところで、キーボードのEnterキーで改行しても画面では改行されません。文章を一段落としてまとめる時は <p></p>、段落の中で改行したい場所には <br> を使います。

また、更新履歴や箇条書きで項目を並べたいときは <li></li>（リストアイテム）というタグを使います。リストを増やしたい時は、この <li>〜</li> をコピーして増やすのが基本です！

<!-- ABOUTの文章を自分用に変える -->
<p class="about-text">
    はじめまして！〇〇です。<br>
    好きなものを自由に描いているイラストサイトです。
</p>

<!-- 更新履歴（INFORMATION）の項目（<li>）を増やす -->
<li class="news-item">
    <span class="news-date">2026.08.10</span>
    <span class="news-text">ギャラリーにイラストを追加しました！</span>
</li>
💡 少しだけ注釈
<br> や <p></p> がないのに文章が改行されている場合、それは「文章の見た目を整える裏方のルール（CSSといいます）」が働いているからです。文字の大きさや幅に合わせて、自動で見やすく折り返されています🐾

3画像を自分の写真や画像に差し替える（基本編）

紹介文やバナーなど、ページ内の画像を表示・差し替えるときは <img> タグの src 属性のファイル名を書き換えます。

<!-- 変更前 -->
<img src="images/sample.webp" alt="サンプル画像">

<!-- 変更後：自分の画像ファイル名にする -->
<img src="images/my-photo.webp" alt="私の写真">

4ギャラリーの画像を自分のイラストに差し替える（応用編）

当サイトで配布している「gallery & portfolio」などのテンプレートは、画像をクリックすると大きなサイズでパッと表示される仕組み（モーダルといいます）になっています。そのため、一覧用のサムネイル画像と拡大用画像の2ヶ所のファイル名を同じように書き換える必要があります。

<article class="gallery-item" 
         data-category-group="illustration" 
         data-fullsrc="images/my-pic01.webp" <!-- 👈 ①大きく表示される画像 -->
         data-title="星空の街" 
         data-category="イラスト / 2026年">
    <div class="thumbnail-wrapper">
        <img src="images/my-pic01.webp" alt="星空の街" loading="lazy"> <!-- 👈 ②一覧で並ぶ画像 -->
    </div>
    <div class="caption-overlay">
        <span class="item-title">星空の街</span>
        <span class="item-category">イラスト</span>
    </div>
</article>

5文字や画像にリンクを貼る

クリックしたときにほかのページやSNSなどに飛ばしたい時は <a href="URL"> を使います。

外部サイトへ移動させたい場合は、target="_blank" と rel="noopener" をセットで記述するのがおすすめです。

  • target="_blank"：リンクを「新しいタブ」で開いてくれます。自身のサイトを閉じることなく見てもらえるようになります。
  • rel="noopener"：新しいタブで開いた際に、セキュリティ上のリスクを防ぐための「お守り」のような設定です。target="_blank" とセットで書くのがWeb制作の基本マナーになっています🐾
<!-- 外部サイトへリンクする場合（新しいタブで開く） -->
<a href="https://x.com/〇〇" target="_blank" rel="noopener">X（旧Twitter）はこちら</a>

<!-- サイト内の別ページに移動する場合（同じタブで開く） -->
<a href="about.html">ABOUTページへ</a>

<!-- 画像をクリックできるようにする場合（<a>の中に<img>を入れる） -->
<a href="https://〇〇" target="_blank" rel="noopener">
    <img src="images/banner.webp" alt="バナー画像">
</a>

3. 画像が表示されないときは

「書き換えたのに画像が出なくて画面が崩れちゃう…」という時は、この3つが原因のことが多いです🐾


💡 補足：絶対パスについて
相対パスの指定が難しいと感じる場合は、完全なURL（例: "https://example.com/images/photo.webp"）を指定する「絶対パス」という書き方でもOKです。
ただし、自分のパソコン内で制作中（未公開）の場合はサーバーにアップロードするまでPC上で画像が反映されないため「相対パス（例:"images/photo.webp"）」で管理するのが確実です！

4. アップロード編：できあがったサイトを公開してみよう

自分のパソコンで綺麗に表示されたら、最後は無料サーバーなどにファイルをアップロードしてネット上に公開します。

ファイルを送る・公開する3つの方法

方法①：「FC2」の「ファイルマネージャー」などを使う（かんたん！）

「FTPソフトとか難しそうでよくわからない…」という場合はこれがおすすめです。管理画面のページから、ドラッグ＆ドロップをするだけでポイポイ載せられます。

方法②：FTPソフト（FFFTPなど）を使う

定番の無料ソフト「FFFTP」などをパソコンに落として使います。設定がちょっとだけ必要ですが、画像がたくさんあるときは一気に送れるので便利です。

方法③：英語に抵抗がないなら「GitHub Pages」がおすすめ！

画面や設定項目が英語表記になりますが、完全無料＆広告なしで自分のWebサイトを公開できるのが最大のメリットです！ブラウザ上からのドラッグ＆ドロップでもファイルをアップロードでき、独自ドメインの設定や変更履歴の管理にも強いので、英語に抵抗がない方には非常におすすめです。

💬 管理人のひとりごと
管理人はこのサイトを制作している途中で「GitHub Pages」のことを知り、「こんな便利なサービスがあるのになんであまりおすすめされているのを見かけないんだ！」と感激しました🐾
プログラマー向けである点や、UIが日本語に対応していない点が原因なのかもしれませんが、スマホからもコードを細部まで編集できたり、うっかりミスで消失したファイルを復旧できたりとかなり便利ですよ！

5. 応用編：わからない部分はAIに頼ってみる！

「デザインを少し変えたいけどコードがわからない…」というときは、ChatGPTやGeminiなどのAIにコードを見せて教えてもらうのも手です！

⚠️ テンプレートの利用規約を確認しましょう！
当サイトで配布しているテンプレートはAIによる編集もご自由にしてくださってOKですが、配布サイトによっては禁止されている可能性もあります。必ず配布元の利用規約を確認しましょう！

たとえばこんなことを頼めます

AIに聞くときのアドバイス

📝 コピペで使える質問の例
「以下のHTMLコードを使ってサイトを作っています。［ここにやりたいことを書く］をしたいので修正後のコードを教えてください。

（ここに自分のHTMLを貼り付ける）」

※AIも完璧ではないので、長すぎるコードや複雑なデザインだと上手くいかないこともあります。「できるだけ具体的に質問する」のがコツです！

おわりに

元のファイルをバックアップ（コピー）しておけば、失敗しても何回でもやり直せますのでゆっくり1つずつ試してみてくださいね！

自分の手でサイトが書き換わっていくのはすごく楽しいので、ぜひ自分だけの素敵なWebサイトを作ってみてください🐾