既存のWordPressブログにポートフォリオを埋め込む方法

既存のWordpressブログにポートフォリオを埋め込む方法

悩む人

既にあるWordPressブログに制作したポートフォリオサイトを埋め込みたい。別サーバーでもいいんだけど、お金かかるし…何かいい方法はないかな。

このようなお悩みを解決する記事です。

記事の内容

  • 既存のWordPressブログにポートフォリオサイトを埋め込む方法
  • サブドメインを使用してポートフォリオサイトを公開する手順

自分のブログにポートフォリオサイトを埋め込みたいあなた。

ブログも書いて、プログラミングも勉強して素晴らしいですね!

でも、既存のブログにポートフォリオサイトを埋め込む方法って意外と解説されてないですよね。

新しいサーバーを契約すると、またお金かかりますし、僕自身やり方をめちゃくちゃ調べました。(笑)

本記事は、僕が実際にやって成功した方法をまとめたものになります。

新しいサーバーを契約せずにポートフォリオサイトを公開したいという方は、参考にどうぞ。

なお、「ポートフォリオサイトは制作したけど、WordPressブログはまだ開設してない」という方は、先にWordPressブログを開設しましょう。

下記の記事でWordPressブログの開設方法を1つ1つ画像付きで解説しているので、参考になるかと思います。

WordPressブログの始め方【全8手順を解説】WordPressブログの始め方【全8手順を解説】

既存のWordPressブログにポートフォリオサイトを埋め込む方法

既存のWordPressブログにポートフォリオサイトを埋め込む方法

結論から言うと、サブドメインを使えばOKです。

サブドメインとは、1つの独自ドメインを目的別や用途別に利用する際に使用されるものです。

サブドメインと独自ドメインの違い

  • 独自ドメイン: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など他のサーバーでも手順は同じはずです。

手順は、下記の通り。

  1. サーバーの管理画面にアクセスし、「マイページ」をクリック
  2. サブドメインを作りたい契約中サーバーをクリックし、サブドメインを選択
  3. サブドメイン名を選択して「作成」をクリック
  4. FileZillaのインストール
  5. ポートフォリオサイトをサーバーにアップロードする

①サーバーの管理画面にアクセスし、「マイページ」をクリック

まずは、サーバーの管理画面にアクセスし「マイページ」をクリックしましょう。

»mixhost

※ログインが必要な場合は、ログインしてください。

mixhostにアクセス

②サブドメインを作りたい契約中サーバーをクリックし、サブドメインを選択

サブドメインを作りたい契約中サーバー(既存のWordPressブログで使用しているサーバー)を選択しましょう。

契約中の項目をクリック

下記のように表示されるので、「サブドメイン」を選択しましょう。

サブドメインを選択

③サブドメイン名を選択して「作成」をクリック

サブドメイン名を決めましょう。

僕は、「portfolio」にしましたが、なんでもOKです。

サブドメインの作成

下記のように表示されたら、サブドメインの作成成功です。

サブドメイン作成成功

④FileZillaのインストール

※既にFileZillaをインストール済みの方や、他のFTPクライアントソフトをインストール済みの方は、この手順は飛ばしてOKです。

ローカル側からサーバー側にフォルダ・ファイルをアップするために、FileZillaをインストールしましょう。

お使いのPCに合わせて、下記からどうぞ。

ダウンロードできたら、インストールして立ち上げましょう。

下記のようになればOKです。

filezilla起動

⑤ポートフォリオサイトをサーバーにアップロードする

「ホスト名」「サーバー名」「パスワード」を入力後、「クイック接続」をクリックし、サーバーと接続しましょう。

⑤ポートフォリオサイトをサーバーにアップロードする

「ホスト名」「サーバー名」「パスワード」は、サーバー契約時に送られてきたメールに記載されています。

例えば、mixhostの場合は、下記のようなメールに記載されています。

mixhost】 サーバーアカウント設定完了のお知らせ
mixhost メール内容

接続できたら下記のようになるので、

/public_html/指定したサブドメイン名

というフォルダを選択しましょう。

サーバー接続完了

ここにポートフォリオサイトで使用しているファイル・フォルダをアップロードしていきます。

アップロードするファイルやフォルダは人それぞれ違いますが、基本的に下記のようなファイル名・フォルダ名のはず。

  • index.html
  • style.css
  • reset.css
  • image(フォルダ)

これらを全てアップロードしていきましょう。

アップロードは、ドラッグアンドドロップでいけますよ。

ドラッグアンドドロップ

以上でポートフォリオサイトが公開されました!

https://サブドメイン名」にアクセスすると、あなたのポートフォリオサイトが見れるはずです。

例えば、僕の場合は、下記からアクセスできます。

独学に疲れたらプログラミングスクールに通うのもあり

以上、WordPressブログにポートフォリオサイトを公開する方法でした。

わざわざ新規サーバーと契約する必要はないので、ぜひ参考にしてくださいね。

これは余談ですが、独学でポートフォリオサイト制作した方は、めちゃくちゃすごいですね。

僕も最初は、独学でやってたんですが、諦めてプログラミングスクールに通いました。

ポートフォリオ作成後どうすれば良いか行き詰まってる方は、プログラミングスクールもありなんじゃないかな〜と思います。

お試しあれ〜。

»プログラミングスクールおすすめランキング5つ【ニーズ別】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です