【図解】ブログと複数のポートフォリオを1つのドメインに実装する方法

プログラミング学習がある程度進んでくると、ポートフォリオサイトを複数作る人はたくさんいらっしゃいます。その際、ドメインとポートフォリオの関係性に悩む人は少なくないです。

この記事では、1つのドメインで、“複数のポートフォリオサイト”と“ブログ（WordPress）”を設置する方法をお伝えします。図解を用いて解説するので、たどっていくだけで簡単に設置できますよ。

この記事について

この記事が目指す状態

この記事で目指す状態は下記の通りです。

弊ブログのドメインがこの記事の完成状態なので、具体例として、お伝えします。ポートフォリオは営業時に僕が使用してたものです。いま見ると修正点に溢れてますね…。（portfolioのスペルが間違ってるのはスルーしてください笑）

この記事は下記の図解の通りに、ディレクトリを作成したり、 ファイルをいじったりします。そして、1つのドメイン内に複数のポートフォリオサイトとブログを設置された状態を構築します。

このように、ドメインの下層である「サブディレクトリ」にポートフォリオサイトを設置していくのが、この記事で解説する方法です。

一方、サブドメインを取得して、そこにポートフォリオサイトを設置していく方法もあります。もしご興味があれば、調べてみてください。

この記事の前提条件

この記事は、下記3つが前提条件です。

もしこの条件を満たしていない場合には、下記の記事をご覧ください。こちらも図解を用いて、わかりやすく解説しています。そして、条件を満たしたのちに、本記事をご覧ください。

https://kaki-lab.org/how-to-portfolio/

では、本題に入っていきましょう。

フルスクラッチのポートフォリオサイトを複数アップロード

フルスクラッチとはWordPressなどのCMSは用いず、HTMLやCSS、jQueryなどを用いて、コーディングしたプログラミングデータのことをいいます。

まずは下の図の“青部分”に取り掛かります。

フルスクラッチPF設置①：ポートフォリオサイトをまとめる
後々に作業しやすいように、デスクトップなどに、「portfolio」というフォルダを作成し、下のようにポートフォリオサイトをまとめましょう。

フルスクラッチPF設置②：ローカル側（左側）をポートフォリオサイト一覧にしつつ、サーバー側（右側）で、対象のドメインをクリック

フルスクラッチPF設置③：「public_html」をクリック

フルスクラッチPF設置④：サーバー側（右側）で右クリックを押して「portfolio」というフォルダを作成→クリック

フルスクラッチPF設置⑤：「portfolio」の下層にポートフォリオサイトをすべてアップロードする

フルスクラッチPF設置⑥：こんな状態になってるか確認する

フルスクラッチPF設置⑦：ちなみに、「site-1」の中身はこんな感じ

フルスクラッチPF設置⑧：ブラウザにそれぞれのURLを入力して、アップロードできていることを確認

WordPressのポートフォリオサイトもアップロード

次に“緑部分”に取り掛かります。WordPressのポートフォリオサイトがある方のみが対象です。もし、ポートフォリオサイトにWordPressがない場合には、やらなくてOKです！

WordPressPF設置⑨：対象ドメインを選択し、「設定する」をクリック→「WordPress簡単インストール」をクリック

WordPress設置⑩：下記の赤枠部分に「portfolio/site-4」と入力し、その他の部分も入力していく※site-4の部分は任意です

WordPress設置11：インストールしていく

WordPress設置12：インストール完了です。
確認画面URL・ユーザー名・パスワードは控えておきましょう。

WordPress設置13：ブラウザにURLを入力して、WordPressがインストールされたことを確認する

あとは、FTPツールを用いて、ポートフォリオサイトとして作成したWordPressテーマをアップロードすれば完了です。

次は、ドメインにWordPressでブログを設置し、なおかつ、トップページをドメイン直下に持ってきたい人に向けて、その方法を解説していきます。

トップページをブログにする

2段階で進めていきます。

1. 第二階層にWordPressを簡単インストール
2. 表示を最上階層に移す

第二階層にWordPressを簡単インストール

ブログ設置①：先ほどと同じように「WordPress簡単インストール」に進みます

ブログ設置②：第二階層にWordPressをインストールする
※ディレクトリ名はなんでもOKです。

ブログ設置③：確認したらインストール開始

ブログ設置④：インストールできたか確認する
※この時点では、ドメインの最上位階層ではなく、第二階層にWordPressのトップページがある

表示を最上階層に移す

表示変更①：管理画面URLをクリックし、ログイン画面へ→ログインする

表示変更②：「設定」をクリック→サイトアドレスの「wp」を削除→保存

表示変更③：FTPツールで再接続する
※WordPressをインストールしたため

表示変更④：該当するドメインをクリック

表示変更⑤：「public_html」をクリック

表示変更⑥：「wp」をクリック

表示変更⑦：下図のように「htaccess」を最上階層に移動させ、「index.php」はダウンロードする
※移動後、この階層（第二階層）から「htacssess」は削除しますが、「index.php」は削除しないでください。

表示変更⑧：上記の操作でサーバー側（右側）の第二階層は下図のようになっていればOKです

表示変更⑨：ダウンロードした「index.php」を開き、下図のように「/wp」を挿入します

表示変更⑩：下図のようになればOKです。

表示変更11：上記の操作で修正した「index.php」をサーバーへアップロードします。上書き保存してしまってOKです。

表示変更12：ブラウザで確認すると、最上位階層でWordPressが表示させることを確認できます。

お疲れ様でした。

終わりに

この記事の図解の通りに進めると下記の状態に設定することができます。

ポートフォリオとブログを一つのドメインで一元管理すると、楽ですので、ぜひやってみてくださいね。

最後までお読みいただき、ありがとうございました。