ブログを一から作る方法！！！

昔のYahoo! Blog風ブログを自分で作っちゃおう！✨

🌟 こんにちは！自分のブログを作ってみない？ ✨

やあ！ツムピロのページに遊びに来てくれてありがとう！😊 君がこのページを見てるってことは、「自分だけのブログを作りたい！」って思ってるよね？ しかも、2000年代のYahoo! Blogみたいな、懐かしくてキラキラしたブログを！ めっちゃ最高のアイデアだよ！✨

このページでは、プログラミング初心者でも絶対に作れるブログの作り方を、ゼロから超丁寧に教えるよ！ フォルダの作り方、コードの書き方、コメントや「いいね」の保存方法、さらにはブログをめっちゃ盛り上げるコツまで、全部まとめたよ。コピペだけでOKだから、安心して一緒に作っていこう！

🎯 どんなブログを作るの？

どんなブログになるか、イメージしてみよう！ こんな感じのブログだよ：

🛠️ 準備：フォルダとファイルを作ろう

さっそくブログの土台を作っていくよ！ まずは、ファイルを整理するところからスタート！

1. プロジェクトフォルダを作る

パソコンで新しいフォルダを作ろう！

2. サブフォルダを作る

my-blog-projectの中に、以下のフォルダを作ってね：

作り方：フォルダ内で右クリック → 「新しいフォルダ」 → 名前を入力（例：css）。

3. ファイルを作る

次に、以下のファイルを作るよ。テキストエディタ（メモ帳でもOKだけど、VS Codeがおすすめ）を使って、コードを保存するよ。

ファイルの保存方法：

  1. テキストエディタを開く（メモ帳やVS Code）。
  2. これから教えるコードをコピー＆ペースト。
  3. 「ファイル」→「保存」を選んで、ファイル名（例：index.html）を入力。
  4. 保存場所を正しいフォルダ（例：my-blog-projectやmy-blog-project/css）に指定。
  5. 拡張子（.htmlや.cssなど）を忘れずに入れるよ！

4. 画像を用意（オプション）

ブログをキラキラにするために、画像を用意しよう！

💻 フルコード：ブログを作ろう！

ここからは、ブログを動かすためのコードを全部教えるよ！ 各ファイルの中身をコピーして、指定した場所に保存してね。初心者でも「何やってるか」がわかるように、簡単に説明するよ！

ファイル1：index.html（トップページ）

これはブログの入り口！ 記事一覧を表示するページだよ。




    
    
    
    🌟 My KiraKira Blog 🌟
    


    

    

        

            
My KiraKira Blog

            
懐かしいブログの世界へようこそ！✨

        

    

    

        

            
✨ 最新の投稿 ✨

            

        

    

    

        
© 2025 My KiraKira Blog. All rights reserved.

保存方法：テキストエディタにコピー → ファイル名：index.html → my-blog-projectフォルダに保存。

何してるの？ ブログのタイトルと記事一覧を表示。JavaScriptで記事を動的に読み込むよ。シンプルで懐かしいデザイン！

ファイル2：post.html（記事ページ）

個別の記事を読めて、コメントやいいねをつけられるページ！




    
    
    🌟 ブログ記事 🌟
    


    

    

        

            
My KiraKira Blog

            
記事をじっくり読んでね！✨

        

    

    

        

            

            記事の画像
            

            
            

                
コメント

                

                    
                    
                    
                

                

            

        

    

    

        
© 2025 My KiraKira Blog. All rights reserved.

保存方法：テキストエディタにコピー → ファイル名：post.html → my-blog-projectフォルダに保存。

何してるの？ 記事のタイトル、画像、本文を表示。コメントフォームといいねボタンで、読者と交流できるよ！

ファイル3：css/style.css（デザイン）

ブログをキラキラで懐かしい雰囲気に！

body {
    background: #1a1a1a;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
}
.background-neon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #1a1a1a, #660066, #000066, #1a1a1a);
    background-size: 400%;
    animation: neonFlow 10s infinite;
    z-index: -1;
    opacity: 0.8;
}
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.title-container {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 100%;
    box-shadow: 0 0 15px #ff00ff;
}
.main-title {
    font-size: 2.5rem;
    text-shadow: 0 0 10px #ffd700;
    margin: 0;
}
.sub-title {
    font-size: 1rem;
    color: #ff69b4;
    margin: 5px 0;
}
.main-content {
    max-width: 1200px;
    margin: 0 auto;
}
.post-list, .post-detail {
    background: #2a2a2a;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 0 10px #ff69b4;
}
.post-item {
    margin: 10px 0;
    padding: 10px;
    background: #333;
    border-radius: 5px;
}
.post-item img {
    max-width: 100px;
    border-radius: 5px;
}
.post-item a {
    color: #ffd700;
    text-decoration: none;
    font-size: 1.1rem;
}
.post-item a:hover {
    text-shadow: 0 0 5px #ffff00;
}
.post-detail img {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}
.like-section {
    margin: 20px 0;
}
#like-button {
    background: linear-gradient(45deg, #ffd700, #ff69b4);
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}
#like-button:hover {
    box-shadow: 0 0 10px #ffff00;
}
.comment-section {
    margin: 20px 0;
}
#comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
#comment-name, #comment-text {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ff69b4;
    background: #333;
    color: #ffffff;
    width: 100%;
}
#comment-text {
    height: 100px;
}
#comment-form button {
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    color: #ffffff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#comment-form button:hover {
    box-shadow: 0 0 10px #ff00ff;
}
.comment {
    background: #333;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}
@media (max-width: 768px) {
    .main-title {
        font-size: 1.8rem;
    }
    .sub-title {
        font-size: 0.9rem;
    }
    .post-item img {
        max-width: 80px;
    }
    .post-item a {
        font-size: 1rem;
    }
    #like-button, #comment-form button {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

保存方法：テキストエディタにコピー → ファイル名：style.css → my-blog-project/cssフォルダに保存。

何してるの？ キラキラした背景、ポップなボタン、読みやすいレイアウトで、懐かしいブログの雰囲気を作ってるよ！

ファイル4：js/script.js（動きを制御）

コメントやいいね、記事の読み込みをJavaScriptで動かすよ！

// 記事データを読み込む
async function loadPosts() {
    try {
        const response = await fetch('data/posts.json');
        const posts = await response.json();
        const postContainer = document.getElementById('posts');
        postContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.className = 'post-item';
            postElement.innerHTML = `
                ${post.title}
                ${post.title}
                
${post.summary}

            `;
            postContainer.appendChild(postElement);
        });
    } catch (error) {
        console.error('記事の読み込みに失敗:', error);
    }
}

// 記事詳細を読み込む
async function loadPostDetail() {
    const urlParams = new URLSearchParams(window.location.search);
    const postId = urlParams.get('id');
    if (!postId) return;

    try {
        const response = await fetch('data/posts.json');
        const posts = await response.json();
        const post = posts.find(p => p.id == postId);
        if (post) {
            document.getElementById('post-title').textContent = post.title;
            document.getElementById('post-image').src = post.image;
            document.getElementById('post-content').textContent = post.content;
        }
    } catch (error) {
        console.error('記事詳細の読み込みに失敗:', error);
    }

    // いいねカウントを読み込む
    loadLikes(postId);
    // コメントを読み込む
    loadComments(postId);
}

// いいねを管理
async function loadLikes(postId) {
    try {
        const response = await fetch('data/likes.json');
        let likes = await response.json();
        const likeCount = document.getElementById('like-count');
        likeCount.textContent = likes[postId] || 0;

        document.getElementById('like-button').addEventListener('click', async () => {
            likes[postId] = (likes[postId] || 0) + 1;
            likeCount.textContent = likes[postId];
            await fetch('data/likes.json', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(likes)
            });
        });
    } catch (error) {
        console.error('いいねの読み込みに失敗:', error);
    }
}

// コメントを管理
async function loadComments(postId) {
    try {
        const response = await fetch('data/comments.json');
        let comments = await response.json();
        const commentContainer = document.getElementById('comments');
        commentContainer.innerHTML = '';
        (comments[postId] || []).forEach(comment => {
            const commentElement = document.createElement('div');
            commentElement.className = 'comment';
            commentElement.innerHTML = `${comment.name}: ${comment.text}`;
            commentContainer.appendChild(commentElement);
        });

        document.getElementById('comment-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('comment-name').value;
            const text = document.getElementById('comment-text').value;
            if (!comments[postId]) comments[postId] = [];
            comments[postId].push({ name, text });
            await fetch('data/comments.json', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(comments)
            });
            loadComments(postId);
            document.getElementById('comment-form').reset();
        });
    } catch (error) {
        console.error('コメントの読み込みに失敗:', error);
    }
}

// ページの初期化
if (window.location.pathname.includes('index.html') || window.location.pathname === '/') {
    loadPosts();
} else if (window.location.pathname.includes('post.html')) {
    loadPostDetail();
}

保存方法：テキストエディタにコピー → ファイル名：script.js → my-blog-project/jsフォルダに保存。

何してるの？ 記事一覧や詳細を表示、コメントやいいねを保存して動的に更新。初心者でもコピペで動くよ！

ファイル5：data/posts.json（記事データ）

ブログの記事を保存するファイルだよ。

[
    {
        "id": 1,
        "title": "初めてのブログ投稿！",
        "summary": "ブログを始めてみたよ！キラキラな世界を一緒に楽しもう！",
        "content": "こんにちは！これは私の初めてのブログ投稿だよ！ブログを作るのはめっちゃ楽しくて、みんなにもおすすめ！この記事では、私の好きなキラキラしたものについて話すよ。コメントやいいねをぜひお願いね！✨",
        "image": "images/post1.jpg"
    },
    {
        "id": 2,
        "title": "プログラミングって楽しい！",
        "summary": "プログラミング初心者でも楽しめるコツを教えるよ！",
        "content": "プログラミングって最初は難しそうに見えるけど、実は超楽しいんだ！この記事では、初心者向けにHTMLとCSSの基本を解説するよ。キラキラしたウェブサイトを作ってみない？コメントで質問も待ってるよ！",
        "image": "images/post2.jpg"
    }
]

保存方法：テキストエディタにコピー → ファイル名：posts.json → my-blog-project/dataフォルダに保存。

何してるの？ 記事のタイトル、概要、本文、画像を保存。自分で新しい記事を追加できるよ！

ファイル6：data/comments.json（コメントデータ）

コメントを保存するファイル。最初は空だよ。

{}

保存方法：テキストエディタにコピー → ファイル名：comments.json → my-blog-project/dataフォルダに保存。

何してるの？ 記事ごとのコメントを保存。コメントが追加されるとここに記録されるよ。

ファイル7：data/likes.json（いいねデータ）

いいねのカウントを保存するファイル。最初は空。

{}

保存方法：テキストエディタにコピー → ファイル名：likes.json → my-blog-project/dataフォルダに保存。

何してるの？ 記事ごとのいいね数を保存。例：{"1": 5}は記事1に5いいね。

📡 ブログを動かす方法

コードが揃った！ でも、コメントやいいねを保存するにはサーバーが必要だよ。初心者でも簡単に試せる方法を教えるね！

1. ローカルでテスト（簡単）

まずはパソコンでブログを動かしてみよう！

2. JSON Serverでデータ保存

コメントやいいねを保存するには、簡単なサーバーを使おう！ JSON Serverが超おすすめ！

  1. Node.jsをインストール（「LTS」を選んでね）。
  2. コマンドプロンプト（Windows）かターミナル（Mac）を開く。
  3. my-blog-projectフォルダに移動：cd デスクトップ/my-blog-project（フォルダの場所に合わせてね）。
  4. JSON Serverをインストール： 
    npm install -g json-server
  5. dataフォルダにdb.jsonを作る。以下をコピー： 
    {
    "posts": [
        {
            "id": 1,
            "title": "初めてのブログ投稿！",
            "summary": "ブログを始めてみたよ！キラキラな世界を一緒に楽しもう！",
            "content": "こんにちは！これは私の初めてのブログ投稿だよ！ブログを作るのはめっちゃ楽しくて、みんなにもおすすめ！この記事では、私の好きなキラキラしたものについて話すよ。コメントやいいねをぜひお願いね！✨",
            "image": "images/post1.jpg"
        },
        {
            "id": 2,
            "title": "プログラミングって楽しい！",
            "summary": "プログラミング初心者でも楽しめるコツを教えるよ！",
            "content": "プログラミングって最初は難しそうに見えるけど、実は超楽しいんだ！この記事では、初心者向けにHTMLとCSSの基本を解説するよ。キラキラしたウェブサイトを作ってみない？コメントで質問も待ってるよ！",
            "image": "images/post2.jpg"
        }
    ],
    "comments": {},
    "likes": {}
}
    保存：ファイル名：db.json → my-blog-project/dataフォルダ。
  6. JSON Serverを起動： 
    json-server --watch data/db.json
    サーバーがhttp://localhost:3000で動くよ！
  7. script.jsのfetchのURLを以下に変更： 
    const response = await fetch('http://localhost:3000/posts');
// コメントといいねも同様：
const response = await fetch('http://localhost:3000/comments');
const response = await fetch('http://localhost:3000/likes');
  8. VS CodeのLive Serverでindex.htmlを開いて、コメントやいいねを試してみて！ データがdb.jsonに保存されるよ！

3. 公開する

ブログを世界に公開しよう！

📝 コメントとフォームの作り方

ブログの醍醐味は読者との交流！ コメントフォームの作り方と保存方法を教えるよ！

1. フォームの作り方

post.htmlのコメントフォームは超シンプル！

2. コメントの保存

コメントをcomments.json（またはdb.json）に保存するよ！

3. 表示方法

コメントは投稿後すぐ表示！

👍 いいねの作り方と保存

いいねボタンで、読者の反応をキャッチ！

1. いいねボタンの作り方

post.htmlにボタンとカウントを追加。

2. いいねの保存

いいねをlikes.json（またはdb.json）に保存。

🚀 ブログを盛り上げる戦略

ブログを人気にするコツを教えるよ！ コメントやいいねを活用して、読者と仲良くなろう！

1. 読者との交流

2. コミュニティ作り

3. いいねで人気チェック

4. SNSで拡散

5. スパム対策

6. 人気の記事を分析

🌐 ブログを公開しよう！

ブログが完成！ 世界に公開して、みんなに見てもらおう！

❓ 初心者向けQ&A

つまずきそうなポイントを解決！

🎉 おわりに

お疲れ様！✨ これで、君だけのキラキラブログが作れるようになったよ！ 昔のYahoo! Blogみたいな、懐かしくて楽しいブログを自分で作れたなんて、めっちゃすごいよね！😍

コメントやいいねで、読者とたくさん交流して、キラキラなコミュニティを作っちゃおう！ 何か困ったことがあれば、いつでもメニューに戻って質問してね。さあ、ブログを公開して、世界にキラキラを届けよう！🚀

✨ スポンサー ✨

スポンサー広告 スポンサー広告
メニューに戻る