どうもおはようポテトです。
よく「デモページはこちら」のようなリンクからデモページを見れるブログがありますよね。
そこで多くの方が疑問に思うことがこちら。
デモページってどうやって作るん？
ということで今回は
「WordPressでデモページを作って公開したい」
「簡単なデモページを記事にリンクで貼りたい」
という方に向けて「WordPressでデモページを作成して公開する方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
手順
手順はいたってシンプルかつ簡単です。
WordPressでデモページを作成して公開する方法
HTML/CSSファイルを用意する
上の赤枠内のフォルダとファイルを作り、それをアップロードするのが最もオススメかと思います。
html・cssファイルを作る(名前はなんでもOK)
それを一つのフォルダにまとめる(demo1)
更にそのデモページ達をまとめるフォルダを作る(demos)
ソロモン
「デモページが作れるか試したいだけでhtmlやCSSを書くのは面倒」な方は、以下にサンプルを用意したのでコピペして使ってください⸝⸝- ̫ -⸝⸝
htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>デモページ</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<h2 class="title">デモページだよ</h2>
<script src="script.js"></script>
</body>
</html>
CSSファイル
.title{
color:#888;
text-align: center;
position: absolute;
top: 30%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
}
.title:before{
font-family: "Font Awesome 5 Free";
content: "f105";color:#fcd69e;
font-weight: 900;
padding-right:7px;
padding-left:10px;
}ブログ主
FTPソフトを使ってサーバーに接続する
次にその用意したファイルをアップロードするのに必要な「FTPソフト」でサーバーに接続します。
「サーバー」→「再接続」を選びパスワードを入力し接続
「まだFTPソフト使ったことないンゴ…」という方は以下の記事がとても分かりやすいので参考にしてみてください。
参考 WordPressのFTP設定のやり方全手順｜FileZillaを使った接続方法は？アフィブログ
FTPソフトでアップロードする
接続に成功したら…
ルートディレクトリの下に自分のサイトのドメイン名と同じフォルダがあると思います。
そのフォルダの中に「public_html」というフォルダがあるので、そこに先ほど作ったフォルダをアップロードしていきます。
このようにドラッグしてきて「public_html」のところでドロップさせてあげればアップロードは完了です。
デモページのリンクを記事に貼る
デモページのURL
先ほどのこの図と”同じ名前で”フォルダやファイルを作った場合、そのデモページのURLは
(自分のサイトのドメイン名)/demos/demo1/index.htmlこのようになります。
ブログ主
記事に貼る方法
記事の編集画面で「リンクの挿入」を選択し…
先ほどのURLをペーストしてあげればOK。
これで記事からデモページへ飛ぶことができます⸝⸝- ̫ -⸝⸝
ソロモン
実際のウチのデモページがこちら。
参考 デモページぽてちる
結論：デモページを作るのは難しくない
以上になります。
参考になりましたらシェアなどしていただけると喜びます！では⸝⸝- ̫ -⸝⸝
