WordPressサイトを閉じる前に。オフラインでも見られる「静的サイト」として残す方法と、HTTrackでうまくいかない理由

お店や活動を一区切りして、WordPressのサイトを閉じる。そんなとき「今までのページは手元に残しておきたい」と考える方は多いと思います。

サーバー代を止めたあとも、パソコンでいつでも見返せるようにしておきたい。ところが、HTTrackなどの保存ソフトを試してみると、画像が出ない・レイアウトが崩れる・リンクを押すとネットにつながってしまう、といった問題が起きがちです。

この記事では、なぜうまくいかないのか、どうすればきれいに残せるのかを、専門用語をできるだけ使わずにまとめます。

■ そもそも「オフライン版」とは

WordPressは、ページを開くたびにサーバーがデータベースから内容を組み立てて表示する仕組みです。サーバーを止めると、ページは表示できなくなります。

これを、あらかじめ全ページを「HTMLファイル」として書き出しておけば、サーバーがなくても表示できます。これが「静的サイト」です。フォルダの中の index.html をダブルクリックすれば、ブラウザでいつものように見られる状態がゴールです。

■ 保存ソフトでうまくいかない、よくある5つの理由

1. 画像の「遅延読み込み」

最近のテーマ（SWELLなど）は、スクロールしたときに画像を読み込む仕組みを使っています。保存ソフトはこの仕組みを読み取れず、画像の場所が空白のまま保存されることがあります。

2. スライダーやアニメーション

スライダーやふわっと表示されるアニメーションは、JavaScriptで動いています。パソコン上のファイルとして開くと動かず、表示がずれたり、何も出なかったりします。

3. ショップやカレンダーなどのプラグイン

ネットショップ系のプラグインの中には、ページを開いた瞬間に商品名や価格を組み立てるものがあります。ファイルとして直接開くと、ブラウザの安全上の制限でこの処理が止まり、空白になることがあります。

4. リンクが「https://〜」のまま

ページ内のリンクがネット上のアドレスのまま保存されると、クリックした瞬間にインターネットを見に行ってしまい、オフラインでは開けません。

5. ファイル名の問題

日本語のページ名や「?p=123」のような記号を含むアドレスは、Windowsでファイル名として扱えず、開けないことがあります。

■ きれいに残すための考え方

ポイントは「表示された状態をそのまま保存する」ことです。

・ページを一度ブラウザで実際に表示させ、画像やスライダーが読み込まれた状態をHTMLとして保存する

・画像・CSS・フォントなど、外部から読み込んでいるファイルもすべてフォルダの中に入れる

・リンクとファイル名を、パソコンの中だけで完結する形に書き換える

・カートや決済、お問い合わせフォームなど、サーバーが必要な機能は「見た目だけ残す」と割り切る

WordPressの管理画面に入れる場合は、静的サイトを書き出すプラグイン（Simply Staticなど）を使う方法もあります。ただし、テーマやプラグインの組み合わせによっては同じような表示崩れが起きるため、最後は1ページずつ確認する作業が欠かせません。

■ 納品前に確認したいチェックリスト

□ トップページから、すべてのページにリンクでたどれるか

□ 画像が全ページで表示されるか（特にスクロールした先）

□ フォントが変わって、文字のはみ出しが起きていないか

□ Windows・Macの両方で、ダブルクリックだけで開けるか

□ ネットを切った状態でも、すべて表示されるか

最後の「ネットを切った状態で確認」は意外と見落とされがちです。ネットにつながっていると、本当はネット上の画像を表示しているだけ、ということがよくあります。

■ スマートフォンやiPadでも見たい場合

フォルダごと保存したサイトを、iPhoneやiPadで開くのは少し手間がかかります。

ここで役に立つのが、静的サイトであることです。HTMLファイルだけで動くので、無料で使える静的サイト向けの公開サービスに置けば、WordPressのサーバーを止めたあとも、スマートフォンやタブレットからそのまま見られます。今のドメインを使い続ける場合は、ドメイン代だけで済みます。

私自身も、1,200ページ以上ある子ども向けプリントのサイトを、この静的サイトの形で制作・運用しています。

■ まとめ

・WordPressを閉じても、静的サイトとして書き出せばページは残せる

・保存ソフトで失敗するのは、画像の読み込み方式・JavaScript・リンク・ファイル名が主な原因

・「表示された状態で保存」「外部ファイルも同梱」「ネットを切って確認」が成功のポイント

・静的サイトなら、無料の公開サービスでスマホからも見られる

「試してみたけれど表示が崩れる」「閉鎖の期限が迫っている」という方は、ココナラ内のメッセージからお気軽にご相談ください。サイトの規模と閉鎖予定日を教えていただければ、進め方と費用をご案内します。

星源 Web Studio