ブラウザで編集できるポートフォリオサイト

このバージョンは、ブラウザ上で直接編集できるポートフォリオサイトです。

🎯 主な機能

• ブラウザ上で編集: HTMLファイルを開かずに、ブラウザ上で直接テキストを編集できます
• 自動保存: 編集内容はブラウザのローカルストレージに保存されます
• 画像変更: プロフィール画像のURLを変更できます
• 編集モード切替: 編集モードとプレビューモードを簡単に切り替えられます

🚀 使い方

1. Caddyで起動する

Windowsの場合

1. portfolio-site-editable フォルダに caddy.exe を配置します
2. PowerShellで以下を実行:

   cd C:\path\to\portfolio-site-editable
   .\caddy.exe run

Linux/Macの場合

cd ~/portfolio-site-editable
caddy run

2. ブラウザでアクセス

https://localhost にアクセスします。

3. 編集する

1. 右上の「✏️ 編集モード」ボタンをクリック
2. 編集したい箇所をクリックして、直接テキストを入力
   • 名前
   • 肩書き
   • 自己紹介文
   • スキルの説明
   • 連絡先情報 など、すべて編集可能です
3. 「💾 保存」ボタンをクリックして変更を保存

4. プレビューする

「👁️ プレビュー」ボタンをクリックすると、編集モードを終了し、実際の表示を確認できます。

5. プロフィール画像を変更する

1. 編集モードにする
2. プロフィール画像の下に表示される入力欄に、画像のURLを入力
3. 「画像を変更」ボタンをクリック
4. 「保存」ボタンをクリック

画像URLの例:

• https://i.imgur.com/xxxxx.jpg
• profile.jpg（同じフォルダに画像ファイルを置いた場合）

📝 編集可能な項目

以下の項目がブラウザ上で編集できます。

ヘッダー

• サイト名（あなたの名前）

メインセクション

• 名前
• 肩書き（例: Web Developer & Designer）
• 自己紹介文
• プロフィール画像

Aboutセクション

• 自己紹介の詳細（2段落）

Skillsセクション

• スキル1〜4のタイトルと説明文

Contactセクション

• 連絡先の説明文
• メールアドレス
• Twitterアカウント
• GitHubアカウント

フッター

• コピーライトの名前

💾 保存の仕組み

編集内容はブラウザのローカルストレージに保存されます。

• メリット: サーバー不要で、すぐに保存・復元できます
• 注意点: ブラウザのデータを削除すると、編集内容も消えます

永続的に保存するには

編集が完了したら、以下の方法で永続的に保存できます。

1. ブラウザで右クリック → 「名前を付けてページを保存」
2. ブラウザの開発者ツールでHTMLをコピーして、index.html に上書き保存

🎨 色を変更する

サイト全体の色を変更したい場合は、style.css の先頭部分を編集します。

:root {
    --primary-color: #2563eb;  /* メインカラー */
}

人気の色コード:

• 青: #2563eb
• 緑: #10b981
• 紫: #8b5cf6
• ピンク: #ec4899
• オレンジ: #f59e0b

❓ よくある質問

Q: 編集内容が消えてしまった

A: ブラウザのキャッシュやローカルストレージをクリアすると、編集内容が消えます。重要な編集をした後は、「名前を付けてページを保存」で保存することをお勧めします。

Q: 画像が表示されない

A: 画像URLが正しいか確認してください。また、ローカルファイルを使う場合は、portfolio-site-editable フォルダ内に画像ファイルを配置してください。

Q: 編集モードが解除できない

A: ブラウザをリロード（F5キー）してください。

🔧 トラブルシューティング

編集が反映されない

1. 「保存」ボタンを押したか確認
2. ブラウザをリロード（F5キー）
3. ブラウザのコンソールでエラーが出ていないか確認（F12キーで開発者ツールを開く）

すべてをリセットしたい

ブラウザのコンソール（F12キー）で以下を実行:

localStorage.removeItem('portfolioContent');
location.reload();

📦 ファイル構成

portfolio-site-editable/
├── index.html      # メインHTML（編集可能な要素を含む）
├── style.css       # スタイルシート（編集UI用のスタイルを追加）
├── script.js       # 基本的なJavaScript
├── editor.js       # 編集機能のJavaScript
├── Caddyfile       # Caddy設定ファイル
└── README.md       # このファイル

📄 ライセンス

このテンプレートは自由に使用・改変できます。