こんにちは。
レンタルサーバーを使ってみる続き。引き続きWEBマスターを目指しましょう。
前回、AIで生成したページを公開するってことをやりました(わざと凄そうに言ってます)。
今回は画像を差し込んだりホーム以外のページを設置したりしたいです。
まずは画像表示をやってみます。
サイトに画像を表示させるにはネット上のどこかしらに画像ファイルが置かれていないといけないのですが、同じサーバー上に置くのが基本となります。
前回index.htmlを置いた場所に画像保存用のフォルダを作成しましょう。
public_html内で新規ディレクトリボタンをクリック。
名前をimgとでもしてチェックボタンをクリック。
作成したフォルダ内へ移動し、アップロードをクリックして画像をサーバーへ保存します。
これでアップロードした画像はwebページで使用できます。
前回AIで作成したHTMLのページに差し込みたいところですが、コードが長くて説明に不向きなので新しくベースとなる単純なHTMLを用意し説明します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにページのタイトル</title>
</head>
<body>
<h1>ここに見出し</h1>
<p>本文はここ</p>
<p>本文2行目</p>
</body>
</html>
上記は基本的な雛型です。<title>のところがページのタイトルとなり、<body>と</body>で囲まれた部分がページに表示される部分。
この中に画像を表示するためのタグを入れます。
<img src="ここに画像のurl">
画像のURLは置いた場所がさっきのとおりpublic_htmlの中のimgの中なら、
img/ファイル名
となります。ページのタイトルとかもいじって…
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アイストマトラボラトリー</title>
</head>
<body>
<h1>アイストマトラボラトリー ホームページ</h1>
<p>ここでいろいろ試して成果物を置いていく(かも)よ！</p><img src="img/testimg20260131.png">
<p>他ページへのリンクも作りたい</p>
</body></style>
</html>
こうなります。
しかしこのままだとスクロールが必要なほど画像の表示が大きかったので表示サイズをブラウザサイズに自動で合わせるように手を加えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アイストマトラボラトリー</title>
</head>
<body>
<h1>アイストマトラボラトリー ホームページ</h1>
<p>ここでいろいろ試して成果物を置いていく(かも)よ！</p><img src="img/testimg20260131.png" class="img-auto">
<p>他ページへのリンクも作りたい</p>
</body><style>
.img-auto {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
</style></html>
加えたのは<body></body>の下にある<style></style>のところと<img>タグのところにあるclass=ってところです。
<style>のところでcalssがimg-autoのものについてはこういう表示方法にしてねってことを書いてます。
"CSS"ってやつですが説明するのは何記事も必要になるのでここでは割愛します。
このindex.htmlを前回のものと差し替えます。
こんな表示になりました。
ちなみにネット上にある画像には全部URLがあって右クリックで確認できたりしますが、他サイトの画像URLをさっきの方法でそのまま使うのは直リンクと言って禁止されてる場合があるので気をつけてくださいね。もちろん画像の無断使用自体が禁止の場合もあります。
次は他のページも作ってリンクで繋いでみましょう。自サイトが1ページだけってことはあまりないでしょうからね。
まぁ方法は簡単です。まずindex.htmlと同じ場所に新たなhtmlを置きます。
ファイル名はなんでもいいですがそのままURLになるのでわかりやすいのがいいでしょう。
testpage01.html にしました。
URLは
ホームのアドレス/追加したファイル名(拡張子含む)
になります。
ホームにリンクを加えましょう。
<p style="display: inline !important;"><a href="http://icedtomatobazooka.s323.xrea.com/testpage01.html" target="_blank">2ページ目リンク</a></p>
これをindex.htmlの<body>内に加えます。
こんな感じになります↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アイストマトラボラトリー</title>
</head>
<body>
<h1>アイストマトラボラトリー ホームページ</h1>
<p>ここでいろいろ試して成果物を置いていく(かも)よ！</p><img src="img/testimg20260131.png" class="img-auto">
<p style="display: inline !important;"><a href="http://icedtomatobazooka.s323.xrea.com/testpage01.html" target="_blank">2ページ目リンク</a></p>
</body><style>
.img-auto {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
</style></html>
表示はこうなります。
下にリンクができていてクリックすると追加したページが表示されるようになりました。
ここまでできたらとりあえずwebページ作成と公開の基本はなんとなく理解できた感ありますよね。
というわけで今回はここまでです。
仕組みを理解するためhtmlやcssを書いたりしましたがノーコードだったりAI生成だったりでもできるハズなのでそのあたりも今後やってみたいなと思ってます。あとデータベースとかさ。
ありがとうございました。
今回作成した実験場はこちら→アイストマトラボラトリー
ロゴ、背景、メガネ、静止画→動画はAI生成です。
