導入
1990年代のインターネットを知っている人なら、一度は見たことがあるはず。
ターコイズブルーの背景に、marqueeタグで流れる文字、工事中GIF、アクセスカウンター、そして謎の掲示板。
本記事では WordPressで1999年風ホームページを再現する方法 を紹介します。
実際に再現したページも公開しているので、懐かしいインターネットの空気を味わってください。
前回やったのは1999年風サイトだったけど今回は自分の原点くコ:彡の部屋を復元する事！
1999年ホームページの特徴と雰囲気
1999年ごろの個人ホームページには、今のWebサイトにはない独特の雰囲気がありました。
- 背景は派手なGIFパターンやターコイズブルー
- フォントはMSゴシック、リンクは原色
<marquee>で文字を流す- 工事中アイコンやアクセスカウンターが必須
- MIDI音源が自動再生（※今は著作権的にアウト）
当時のあるある
- メモ帳でHTMLを直打ちしていた
- 相互リンクがやたら多いが、今はほぼリンク切れ
- BBS（掲示板）が荒らされる（※実際にうちの元HPも荒らされてました…）
- カウンターのキリ番祝いが文化（「100人突破おめでとう！」など）
WordPressで再現する準備
- 投稿をフル幅で作成
- メディアにGIFやバナー、カウンター画像をアップロード
- ブロックエディタで「カスタムHTML」を選んでコードを貼り付け
実装方法（要点コード）
背景とフォントを再現
<div style="background:#008B8B; color:#fff; font-family:'MS Gothic',monospace;">
marqueeで文字を流す
<marquee direction="left">ようこそ！くコ：彡の部屋へ</marquee>
工事中GIFやカウンター
<img src="count.gif" alt="カウンター">
リンク・BBS・バナーを縦に並べる
<a href="#"><img src="link.gif" alt="リンク"></a><br>
<a href="#"><img src="bbs.gif" alt="掲示板"></a>
マウス追従イカを追加
<img id="ika-follow" src="ika.gif" style="position:absolute;width:60px;height:60px;">
<script>
document.addEventListener("mousemove", e=>{
const ika=document.getElementById("ika-follow");
ika.style.left=(e.pageX+15)+"px";
ika.style.top=(e.pageY+15)+"px";
});
</script>
実際の再現例
再現時の注意点
- MIDI音源は著作権的に今は使えないので注意
- Shift_JISではなくUTF-8で書くのが現代環境向け
- スマホ表示は崩れるので“ネタ再現”として楽しむ
まとめ
- WordPressでも1999年風ホームページは十分に再現できる
- GIF・marquee・工事中アイコン・カウンターで一気に当時っぽさが出る
- 実際に再現したページを公開したので、ぜひ懐かしんでほしい
関連記事
👉 1999年に作ったホームページがまだ残ってた件｜あの頃のインターネットを振り返る
👉 1999年の個人HPをWordPressで復元する方法｜GIFとmarqueeを再現
元サイト
👉 くコ:彡の部屋
