悩む人
このようなお悩みを解決する記事です。
記事の内容
- 既存のWordPressブログにポートフォリオサイトを埋め込む方法
- サブドメインを使用してポートフォリオサイトを公開する手順
自分のブログにポートフォリオサイトを埋め込みたいあなた。
ブログも書いて、プログラミングも勉強して素晴らしいですね！
でも、既存のブログにポートフォリオサイトを埋め込む方法って意外と解説されてないですよね。
新しいサーバーを契約すると、またお金かかりますし、僕自身やり方をめちゃくちゃ調べました。(笑)
本記事は、僕が実際にやって成功した方法をまとめたものになります。
新しいサーバーを契約せずにポートフォリオサイトを公開したいという方は、参考にどうぞ。
なお、「ポートフォリオサイトは制作したけど、WordPressブログはまだ開設してない」という方は、先にWordPressブログを開設しましょう。
下記の記事でWordPressブログの開設方法を１つ１つ画像付きで解説しているので、参考になるかと思います。
WordPressブログの始め方【全８手順を解説】
目次
既存のWordPressブログにポートフォリオサイトを埋め込む方法
結論から言うと、サブドメインを使えばOKです。
サブドメインとは、１つの独自ドメインを目的別や用途別に利用する際に使用されるものです。
サブドメインと独自ドメインの違い
- 独自ドメイン：https://aiplog.com
- サブドメイン：https://〇〇○.aiplog.com
例えば、「Yahoo!」などが分かりやすいですね。
| サービス名 | URL | ドメイン名 |
| Yahoo! JAPAN | https://www.yahoo.co.jp/ | yahoo.co.jp |
| Yahoo! ショッピング | https://shopping.yahoo.co.jp/ | shopping.yahoo.co.jp |
| ヤフオク | https://auctions.yahoo.co.jp/ | auctions.yahoo.co.jp |
| Yahoo! 天気 | https://weather.yahoo.co.jp/ | weather.yahoo.co.jp |
| Yahoo! ニュース | https://news.yahoo.co.jp | news.yahoo.co.jp |
赤い部分がサブドメインに当たります。
サブドメインは、独自ドメインを持っている人なら無料で使用可能。(ドメイン名も自分で決めれます)
また、サブドメインのサイトは、既存の独自ドメインのサイトとは全く別のサイトとして扱われます。
なので、独自ドメインのサイト(既存のブログ)には影響ありません。(SEOにも影響なし)
ただし、サブドメインのサイトは全く別のサイトのため、ドメインパワーが0からのスタートになります。
今回は、このサブドメインを使って、既存のWordPressブログで制作したポートフォリオサイトを公開する方法を解説していきますね。
サブドメインを使用してポートフォリオサイトを公開する手順
では、実際にサブドメインを使用して、既存のWordPressブログにポートフォリオサイトを公開する方法を解説していきますね。
今回は、サーバーとしてmixhostを用いていますが、xserverなど他のサーバーでも手順は同じはずです。
手順は、下記の通り。
- サーバーの管理画面にアクセスし、「マイページ」をクリック
- サブドメインを作りたい契約中サーバーをクリックし、サブドメインを選択
- サブドメイン名を選択して「作成」をクリック
- FileZillaのインストール
- ポートフォリオサイトをサーバーにアップロードする
①サーバーの管理画面にアクセスし、「マイページ」をクリック
まずは、サーバーの管理画面にアクセスし「マイページ」をクリックしましょう。
※ログインが必要な場合は、ログインしてください。
②サブドメインを作りたい契約中サーバーをクリックし、サブドメインを選択
サブドメインを作りたい契約中サーバー(既存のWordPressブログで使用しているサーバー)を選択しましょう。
下記のように表示されるので、「サブドメイン」を選択しましょう。
③サブドメイン名を選択して「作成」をクリック
サブドメイン名を決めましょう。
僕は、「portfolio」にしましたが、なんでもOKです。
下記のように表示されたら、サブドメインの作成成功です。
④FileZillaのインストール
※既にFileZillaをインストール済みの方や、他のFTPクライアントソフトをインストール済みの方は、この手順は飛ばしてOKです。
ローカル側からサーバー側にフォルダ・ファイルをアップするために、FileZillaをインストールしましょう。
お使いのPCに合わせて、下記からどうぞ。
- Windows版：FileZilla for Windows
- Mac版：FileZilla for Mac
ダウンロードできたら、インストールして立ち上げましょう。
下記のようになればOKです。
⑤ポートフォリオサイトをサーバーにアップロードする
「ホスト名」「サーバー名」「パスワード」を入力後、「クイック接続」をクリックし、サーバーと接続しましょう。
「ホスト名」「サーバー名」「パスワード」は、サーバー契約時に送られてきたメールに記載されています。
例えば、mixhostの場合は、下記のようなメールに記載されています。
接続できたら下記のようになるので、
というフォルダを選択しましょう。
ここにポートフォリオサイトで使用しているファイル・フォルダをアップロードしていきます。
アップロードするファイルやフォルダは人それぞれ違いますが、基本的に下記のようなファイル名・フォルダ名のはず。
- index.html
- style.css
- reset.css
- image(フォルダ)
これらを全てアップロードしていきましょう。
アップロードは、ドラッグアンドドロップでいけますよ。
以上でポートフォリオサイトが公開されました！
「https://サブドメイン名」にアクセスすると、あなたのポートフォリオサイトが見れるはずです。
例えば、僕の場合は、下記からアクセスできます。
独学に疲れたらプログラミングスクールに通うのもあり
以上、WordPressブログにポートフォリオサイトを公開する方法でした。
わざわざ新規サーバーと契約する必要はないので、ぜひ参考にしてくださいね。
これは余談ですが、独学でポートフォリオサイト制作した方は、めちゃくちゃすごいですね。
僕も最初は、独学でやってたんですが、諦めてプログラミングスクールに通いました。
ポートフォリオ作成後どうすれば良いか行き詰まってる方は、プログラミングスクールもありなんじゃないかな〜と思います。
お試しあれ〜。
