WEBやプログラムなど色々発信します

作ってもらった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

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

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

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

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

これで完了です。

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。