どうもおはようポテトです。
よく「デモページはこちら」のようなリンクからデモページを見れるブログがありますよね。
そこで多くの方が疑問に思うことがこちら。
デモページってどうやって作るん？
「WordPressでデモページを作って公開したい」
「簡単なデモページを記事にリンクで貼りたい」
という方に向けて「WordPressでデモページを作成して公開する方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
デモページを作成するまでの手順
手順はいたってシンプルかつ簡単です。
WordPressでデモページを作成する方法
HTML/CSSファイルを用意する
上の赤枠内のフォルダとファイルを作り、それをアップロードするのが最もオススメかと思います。
html・cssファイルを作る(名前はなんでもOK)
それを一つのフォルダにまとめる(demo1)
更にそのデモページ達をまとめるフォルダを作る(demos)
くるみ
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。
これで記事からデモページへ飛ぶことができます⸝⸝- ̫ -⸝⸝
くるみ
結論：デモページを作るのは難しくない
以上になります。
参考になりましたらシェアなどしていただけると喜びます！では⸝⸝- ̫ -⸝⸝
プログラミング、楽しく学んでみない?
TechAcademy（テックアカデミー）
- 受講生に1人ずつ現役のプロのパーソナルメンターがつくので未経験でも安心
- オリジナルサービスやオリジナルアプリなどの開発までサポート
評価 おすすめポイント 自宅にいながらオンライン完結で勉強できる 最短4週間で未経験からプロを育てるオンライン完結のスクール。受講生に1人ずつ現役のプロのパーソナルメンターがつき、チャットで質問すればすぐに回答が返ってくるのでサポート体制も万全です。
DMM WEBCAMP COMMIT
- プログラミング未経験者でも安心のサポート体制
- 転職、就職の保証付き
評価 おすすめポイント プログラミング未経験者でも安心のサポート体制 磨き上げられた「実践的なスキルが身につく」学習カリキュラムにより、どこよりも高い「継続率」「修了率」「転職率」で受講者満足度も90%以上。プログラミング未経験の方でも安心なスクールです。
CodeCamp（コードキャンプ）
- レッスン満足度94.6%、現役エンジニアから実践的なスキルを学べる
- 就職/転職やキャリアについての相談も無料でできる
評価 おすすめポイント 実績No.1のオンライン・プログラミングスクール（受講者20,000名以上） オンラインで365日/7時〜24時まで、時間と場所を選ばずに自分のペースで学習でき、PCとネット環境があればすぐに学習が始められます。更に無料体験レッスンを受講すると受講料が1万円引に。
