Web制作

プログラミング言語やWordPressやら、動きを確認するデモページを別ページで表示させているサイトありますよね!

今回デモページを作成するにあたり、調べてみましたのでやり方をご紹介します。

デモページの用意

まずはデモページを準備します。

フォルダを用意し、その中にデモページのファイルを準備します。

demo1フォルダに
 js/script.js
 css/style.css
 index.html
を準備してみてください。
index.htmlだけでも大丈夫です。

画像だとこんなイメージです。

デモページのファイル構成

デモページのサンプル

試しにやってみたいという方はこちらのコードをコピーして使用してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デモサンプル</title>
    <meta name="viewport" content="width=device-wisth,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>
    <div>
        <p>デモサンプルです。</p>
        <p>表示させてみましょう!</p>
    </div>
</body>
</html>

style.css

@charset "utf-8";
p {
    // テキストを中央配置
    text-align: center;
}

script.js

window.onload = function() {
    // コンソール画面に"hello world!!"を表示
    console.log("hello world!!")
}

サーバにファイルをアップする

今回サーバへのファイルアップロードにはffftpのソフトを使用しています。
アップロードができればソフトを使用してもOKですし、サーバ会社の管理画面よりファイルをアップしても問題ありません。

デモを配置する親フォルダを作成

ここからが大事なところですが、デモを配置する親フォルダをWordPressがインストールされているフォルダ直下に作成します。
こちらの画像で表示されているフォルダやファイルを参考に場所を見つけてください。

初期設定にもよりますが、ドメイン直下もしくはWordPressフォルダ直下にあることが多い気がします。
また、「wp-admin」「wp-content」「wp-includes」のフォルダや「.htaccess」「index.php」のファイルがあるフォルダと考えると見つけやすいです。

demoフォルダ作成

今回は「demo」というフォルダを作成しています。

親フォルダにデモファイル一式をアップロードする

続いて、先ほど作成した「demo」フォルダに「demo1」フォルダ毎アップロードします。

demo1フォルダ作成

「demo」フォルダに複数のデモが格納されるイメージです。

デモの配置イメージ

デモページの表示

先ほどアップロードしたデモページをさっそく確認してみましょう。

デモページのリンクの貼り方

htmlに実際にリンクを貼ってみましょう。
「リンク」をクリックし、URLを設定します。

URLは
https://[ドメイン]/[デモの親フォルダ]/[デモのフォルダ]/
のように設定してください。
※ 例:https://nyanblog2222.com/demo/demo1/

デモページのリンクの設定

デモページの確認

こちらのページから先ほど設定したデモページを確認することができます。

デモページ

まとめ

いかがでしたでしょうか。
簡単にデモページを作ることができますが、私自身少し調べる必要がありましたので、今回は記事にしてみました。

一度親フォルダを作成しておけば、次からも同じように3つの手順でデモページを引き続き作成することができます。
1. デモページを作成
2. 作成したフォルダ毎「demo」フォルダに上げる
3. 記事のhtmlへリンクを貼り付ける

良かったら参考にしていただければと思います。
本記事をご覧いただき、ありがとうございました。