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

HTMLサイトの複製手順

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

手順です。

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

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

パソコンにあらかじめ、サイトのファイルを保存するフォルダを作成しておきます。
サイトの名前などで大丈夫です。
トップページであれば、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

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

ファイルをアップロードする（公開する）

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

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

これで完了です。

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

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

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

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

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

目次