004185

HOME | DIARY | PROFILE

【フォローする】【ログイン】

YPO industryのデジタルルーム

Profile

YPOindustry

フォローする

【ChatGPT×ホームページ作成】ChatGPTと0からホームページを作る②

テーマ：初めてのホームページ作り(384)

カテゴリ：ホームページ作成

皆様こんにちは！

ChatGPTで0からホームページ作成！パート2

ついに、ホームページの形が整いました！

前回の作業ではフォルダ構成を作り、ヘッダー・フッターの設置に苦戦しましたが、今回は驚くほどスムーズに進みました。

タイトルや概要を追加し、各種ショップのリンクも見やすく配置。

思った以上に「ちゃんとしたホームページ」になっていて感動……！

✅ パート2の進捗

ホームページの基本形を作成

タイトルと概要を追加

ショップリンクを画像付きで設置

🏗 ホームページの基本形を作成！

今回作成したHTMLはこちら！


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YPO Industry</title>
<link rel="stylesheet" href="css/style.css">
<script defer src="js/script.js"></script>
</head>
<body>
<?php include $_SERVER['DOCUMENT_ROOT'].'/includes/header.php'; ?>

<main>
<div class="top-image">
<img src="images/header-image.jpg" alt="トップ画像">
</div>

<section class="home-intro">
<h1>YPO Industryの家へいらっしゃい！</h1>
<h2>日本人（夫）とモンゴル人（妻）が運営する生活情報発信サイトです。</h2>
<p>DIY、料理、面白Tシャツ、ChatGPTの活用術等を発信してます。</p>
<a href="about.php" class="btn">YPO Industryの概要</a>
</section>

<div class="divider"></div>

<section class="shop-gallery">
<h3>ショップギャラリー</h3>
<div class="shop-grid">
<div class="shop-item">
<a href="https://ypoindustry.base.shop/" target="_blank">
<img src="images/link-base.jpg" alt="BASE">
</a>
<p>BASE</p>
</div>
<div class="shop-item">
<a href="https://suzuri.jp/YPO_industry" target="_blank">
<img src="images/link-suzuri.jpg" alt="SUZURI">
</a>
<p>SUZURI</p>
</div>
<div class="shop-item">
<a href="https://up-t.jp/creator/6698fc0c2801d" target="_blank">
<img src="images/link-upt.jpg" alt="UP-T">
</a>
<p>UP-T</p>
</div>
<div class="shop-item">
<a href="https://note.com/ypo_industry" target="_blank">
<img src="images/link-t.jpg" alt="note">
</a>
<p>note</p>
</div>
</div>
</section>
</main>

<?php include $_SERVER['DOCUMENT_ROOT'].'/includes/footer.php'; ?>
</body>
</html>

📜 ホームページのタイトルと概要を追加

サイトのメインタイトルとして、以下の文言を設定。

「YPO Industryの家へいらっしゃい！」

さらに、訪問者がサイトの趣旨を理解しやすいように概要を追加。

DIY・料理・面白Tシャツ・ChatGPT活用術などのコンテンツを扱っていることを説明。

🛒 ショップリンクを画像付きで設置

テキストリンクだと分かりにくいため、各ショップのロゴ画像をクリックできるように設定！

例えば、 BASE や SUZURI などへのリンクを画像付きで掲載し、

見た目にもスッキリ＆直感的に操作できるようにした。

それぞれのリンクには、こんな感じのHTMLを適用。


<a href="https://ypoindustry.base.shop/" target="_blank">
<img src="images/link-base.jpg" alt="BASE" width="150">
</a>

リンクのクリック率が上がりそう！

✨ まとめ：ホームページの基盤が完成！

✅ ホームページの基本形を作成

✅ タイトルと概要を追加

✅ ショップリンクを画像付きで設置

見た目も整って、サイトとしての形ができてきた！

次回は「デザインのカスタマイズ」と「商品ページの作成」に取り掛かる予定。

ホームページが少しずつ完成に近づいていくのが楽しい！

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

無料でできる!ChatGPT完全ガイド[本/雑誌] (100%ムックシリーズ) / 晋遊舎
価格：1,000円（税込、送料別) (2025/2/21時点)

楽天で購入

それではまた！

お気に入りの記事を「いいね！」で応援しよう

Last updated 2025.02.21 12:47:29
コメントを書く

[ホームページ作成] カテゴリの最新記事

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! -- / --

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

Design a Mobile Site

スマートフォン版を閲覧 | PC版を閲覧

YPO industryのデジタルルーム

カテゴリ未分類

アパレル雑貨

雑談

ChatGPT

SNS

受験

お金

政治

ホームページ作成

【ChatGPT×ホームページ作成】ChatGPTと0からホームページを作る②