Published on

作ってもらったHTMLサイトが管理できなくなった場合の対処法

目次

サイトをつくってもらったけど、その方と連絡がとれなくなった。
サイトの情報がわからないから編集ができない。
なんてことがあると思います。

作ったサイトを複製して、自分で管理できるようにしたい。
そんなときの対処法です。

結論からいうと「HTMLだけのサイトならコピーする」です。

WordPressの場合は別記事にしようと思います。

簡易的で一般的なホームページを想定しているので、もっと複雑なサイトは複製が困難です。

HTMLサイトの複製手順

ソースをコピーすればいいです。

手順です。

  1. 複製したいサイトの中身(ソース)を確認する
  2. コピーする
  3. ファイルにペーストして保存する(名前.htmlなど)
  4. 画像を保存する
  5. サーバーにアップロードする(公開する)

必要となる分のファイルを作成します

パソコンにあらかじめ、サイトのファイルを保存するフォルダを作成しておきます。
サイトの名前などで大丈夫です。
トップページであれば、index.htmlを作成し、
それ以外のページであれば、urlの最後の部分を確認して作成します。
https://ドメイン.com/about.html、であればabout.htmlを作成します。

複製したいサイトのソースを確認します

例としてこのHTMLのサイトの場合で説明します。

https://f-tpl.com/sample/tpl_096/

おそらくどのブラウザでも同じ操作ができます。

ページを開き、ページのどこかで「右クリック」します。

メニューが開くので、「ソースを確認」を選択します。

すると別ページでずらっと文字列が表示されます。これがソースです。

このページを全選択してコピーします。CTRL+Aとかcommand+Aでもできます。

<!doctype html>
<html lang="ja">
~~省略~~
</body>
</html>

ファイルに保存する

全体をコピーしたら、新しいファイルに貼り付けます。
この場合、トップページなのでindex.htmlファイルに貼り付けます。

それ以外のページであればコピーしたページと同じファイル名に保存します。
about.htmlだったらabout.htmlに貼り付けて、保存。

必要なページ分だけ1から4の作業を繰り返していけばいいです。

外部ファイル(JS・CSS)も必要

上記の作業ではHTMLのコピーが完了したので、次は外部ファイルです。
外部ファイルは主に動きに関するjavascriptとデザインに関するcssファイルがあります。
以下まとめて外部ファイルと言います。

外部ファイルがHTML以外で読み込まれている場合は、見た目が崩れて表示されるのでこちらもコピーが必要です。

外部ファイルの見つけ方

中身・ソースで確認します。

<head>
	<meta charset="UTF-8">
	<meta name="description" content="最新技術と自然との調和を目指す">
	<meta name="viewport" content="width=device-width">
	<title>SAMPLE COMPANY | 最新技術と自然との調和を目指す</title>
	<link rel="stylesheet" media="all" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="js/script.js"></script>
</head>

この場合の外部ファイルはここです。

<link rel="stylesheet" media="all" href="css/style.css">
<script src="js/script.js"></script>

この2つが外部ファイルの場所を示しています。
ドメイン/css/style.cssとドメイン/js/script.jsを読み込んでますー。

ポイントとして、外部ファイルはコピーしなくてもいいものがあります。
たとえば

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

このファイルはみんな共通で使えるもので、サイトとは関係ないところから読み込んでいます。
なのでこのファイルは中身をコピーしなくてもいいです。
見分け方は、自分のサイトのものか、そうでないのかです。
https://ajax.googleapis.comは関係ないからコピーしないでそのまま、といったかんじです。

style.cssやscript.jsの部分はクリックできるので、クリックするとわかりますがブラウザのURLバーに自分のサイトのドメインが表示されると思います。
なので自分のサイトだとわかります。

HTMLのときと同じように同じ名前でファイルを作成し、コピーして保存します。

一つとは限らないので、2つ、3つある場合は同じようにコピペします。

注意点として、CSSファイルなどの外部ファイルが絶対パスの場合、(http//などから始まる)
外部ファイルをコピーしなくても表示される場合がありますが、元サイトのファイルを読み込んでいるので、元サイトが表示されなくなったら、おなじくその外部ファイルも読み込まれなくなります。
すると、いきなりデザインが崩れた!なんてことにもなるので注意です。

画像を保存する

画像がある場合は画像も保存します。

画像はただ保存するだけでなく、適切な場所に保存します。

<img src="images/logo.png" width="87" height="25" alt="logo">

サイトのソースをみると、images/logo.pngの画像を読み込んでいるので
imagesフォルダの中に保存します。ファイル名も同じでないと正しく表示されません。

保存したファイルの全体のイメージ

  • index.html
  • about.html
  • css
    • style.css
  • js
    • script.js
  • images
    • logo.png

ファイルとフォルダがあって、フォルダの中にファイルがある状態になります。
イメージなのでファイル名や数などはそれぞれの環境で違ってきます。

ファイルをアップロードする(公開する)

作成したファイルをサーバにアップロードすると公開されます。

サーバーがすでに用意してあれば、ファイルをアップロードします。

これで完了です。

もしデザインなど崩れる場合はソースをみて、ちゃんと読み込まれているか、抜けているファイルがないか確認してください。

まったく同じ状態で公開は避けましょう。

複製後まったく同じサイトの内容で公開をすると、コピーコンテンツ扱いになるのでご注意ください。

コピーコンテンツ扱いになると検索結果に表示されません。

対策としては、ドメインの新規取得や、サイト名をかえること、文面を変えるなど、内容はできる限り変えましょう。