1999年の個人HPをWordPressで復元する方法｜GIFとmarqueeを再現

ふと調べてみたら、1999年に作った自分のホームページがまだ残っていました。
黒背景、GIFアニメ、marquee、掲示板やカウンター…。
今見ると笑ってしまうくらい古臭いけど、当時は最先端だったんです。

そこで今回は、その「1999年の個人ホームページ」をWordPress上で“復元”してみた流れを紹介します。
当時の雰囲気を懐かしむ方も、ネタにしてみたい方も、ぜひ参考にしてください。

当時のURL
実際の復刻版はこちらからどうぞ → [復刻版記事リンク]

なぜ復元したのか
当時のホームページ文化（1999〜2000年頃）
WordPressでの復元手順
再現時の工夫
復元してみて思ったこと
まとめ

なぜ復元したのか

1999年〜2000年代初頭に趣味で作っていたサイトが、今もサーバー上に残っていた
当時の登録メールアドレスはすでに失効していてログインできない
「触れないけど残っている」まさにネットの化石状態
だったらブログ上で再現して“タイムカプセル”として残したい

当時のホームページ文化（1999〜2000年頃）

黒背景＋蛍光色文字 → 夜景みたいでカッコよかった
GIFアニメ → 「動くアイコン」や「工事中」看板が定番
marqueeタグ → 横に流れるテキストは必須
アクセスカウンター → 1000HIT記念がイベント化
掲示板（BBS）や相互リンク集 → 今のSNS的な役割

今のWordPressに比べると、なんともシンプル。
でも「自分の場所を作る」楽しさは当時から変わっていません。

WordPressでの復元手順

1. カスタムHTMLブロックを使う

WordPressの投稿画面で「カスタムHTML」を選び、以下のコードを貼り付けると横スクロールの文字が出せます。

<style>
  .x-marq{white-space:nowrap;overflow:hidden}
  .x-marq span{display:inline-block;animation:xscroll 14s linear infinite}
  @keyframes xscroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
</style>

<div class="x-marq"><span>ようこそ！1999年のネットへ 🦑 相互リンク募集中！</span></div>

2. 点滅文字（NEW!! 風）

<style>
  .x-blink{animation:xb 1s steps(1,end) infinite}
  @keyframes xb{50%{opacity:.2}}
</style>

<p><span class="x-blink">★NEW!!</span> 復刻ページ公開しました。</p>