90%オフは当たり前!? いま買える期間限定デザイン素材バンドルまとめ

アドビポートフォリオのURLを独自・カスタムドメインに設定する方法

Adobe Portfolioを使う金髪のウェブデザイナー

こんにちは! Keiko(@kmy_design)です。

アドビポートフォリオ(Adobe Portfolio)のURLを独自(カスタム)ドメインに設定する方法は?

今回はこの疑問にお答えします!

▼この記事の内容

  • Adobe PortfolioのURLを独自ドメイン(カスタムドメイン)に変更するプロセス

Keiko

せっかく見栄えがいいサイトが出来上がったら、独自ドメイン(カスタムドメイン)に変更したいですよね?

▼こちらはわたしのポートフォリオサイトですが、きちんと独自ドメインが反映されています(わたしはサブドメインを設定しました)。

参考 KMY Online PortfolioKMY Online Portfolio

アドビポートフォリオを見てみる

アドビポートフォリオは、Adobe Creative Cloud利用者なら無料で利用できるサービスです。

シンプルで画像中心のポートフォリオサイトがサクサク作れます。詳しく知りたい方は、こちらをご覧ください。

今回はエックスサーバーで設定する方法を紹介します。では、そのプロセスを早速見ていきましょう。

(Disclosure:記事内のリンクの一部はアフィリエイトリンクです。詳しくはプライバシーポリシーをお読みください。)

Adobe PortfolioのURLを独自ドメイン(カスタムドメイン)に設定するプロセス

それではURLを購入済みの独自ドメインに設定する手順を説明していきます。

注意
この記事では、アドビポートフォリオ上で直接ドメインを購入するプロセスは説明していませんので、ご注意ください。
STEP.1
独自ドメインを用意する
まずはアドビポートフォリオで使いたい独自ドメインを用意しましょう。

Keiko

購入してもいいですし、新規サーバー申し込み時にもらえる無料のドメインでも、どちらでもOK!
>>> エックスサーバーのドメイン新規取得手順はこちらです。
STEP.2
独自ドメインに割り当てるためのIPアドレスを調べる①
次に、用意した独自ドメインに割り当てるためのIPアドレスを調べます。

Adobe Portfolioの編集画面に移動し、左側のバーの中央にある「設定を編集」をクリックしましょう。

アドビポートフォリオ「設定を編集」画面

STEP.3
独自ドメインに割り当てるためのIPアドレスを調べる②
中央に新たにウィンドウが表示されます。

左側のメニューの中から、上から3番目「ドメイン名」を選択すると、下の画面になります。
アドビポートフォリオ「ドメイン名」ウィンドウ

 

「ドメイン名」下の文章の中央あたりに、下記のような数字とピリオドの組み合わせが二つ表示されます。

〇〇.〇〇〇.〇〇.〇〇〇(丸は全て数字になります)

 

必ず二つともコピペするか、メモをとっておきましょう。

 

MEMO
一部の DNS プロバイダーでは 2 つ目の IP アドレスは必要ありませんが、ここでは念のため二つとも控えておいてください。
STEP.4
DNSレコードを編集する①
IPアドレスをメモしたら、次はドメインのDNSレコードを編集します。

エックスサーバーのサーバーパネルへログインし、「DNSレコード設定」へと進みましょう。

 

▼「使用前のご注意」「DNSレコードの一覧」「DNSレコードの追加」タブから、いちばん右の「DNSレコードの追加」タブを選択。

エックスサーバーのDNS設定画面

STEP.5
DNSレコードを編集する②ホスト名が空白のDNSレコードを追加する

DNSレコードを編集します。
エックスサーバーのDNS設定画面2

 

もし「example.com」というドメインを使いたい場合、以下のように2つ設定する必要があります。

ホスト名 空白のままにしてください
種別 必ず「A」を選択
内容 STEP.3でメモした一つ目のIPアドレスを記入
優先度 変更する必要なし
ホスト名 www
種別 必ず「A」を選択
内容 STEP.3でメモした一つ目のIPアドレスを記入
優先度 変更する必要なし

エックスサーバーでは先ほどメモしておいた二つ目のIPアドレスは必要ないので、どこにも記入する必要はありません。

ここではホスト名が空白のものを最初に登録します。

サブドメインを登録したい場合は下記のサブドメインの設定方法をご覧ください。

STEP.6
DNSレコードを編集する③
設定項目を入力後、「DNSレコードの追加(確認)」をクリックしましょう。

エックスサーバーのDNS設定画面3

 

設定内容を再度確認し、間違いがなければ「DNSレコードの追加(確定)」をクリック。

「DNSレコードが追加されました。」と表示されればOKです。

STEP.7
ホスト名がwwwのDNSレコードを追加する
ホスト名が空白のDNSレコードの登録が終わったら、STEP.5を参照しながら、ホスト名が「www」のものも登録してください。

注意
DNS の変更は、正常に動作するまで 24 時間から 72 時間かかることがあります。
STEP.8
設定が完了したドメイン名をAdobeポートフォリオの設定画面に入力する
再びAdobeポートフォリオの設定画面に移動します。

STEP.2の画面に戻ってきたら、「カスタムドメイン名」欄に先ほど設定が完了したドメイン名「example.com」を入力します。

注意
www.example.comではないので注意してください!

ドメイン名を入力したらすぐ右の「適用」ボタンが青くなるので、クリックしましょう。

アドビポートフォリオでドメイン名を適用する

 

「適用」ボタンを押したあと、すぐ下に赤い文字で以下のようなエラーが表示される場合があります。

ドメイン設定が IP アドレスで正しく設定されていません。手順をここで確認してください。(DNS ステータスをこちらで確認してください)

この場合はサーバー側でDNSの変更がまだ完了していません。しばらく待ってからもう一度試して見ましょう。最大72時間かかるようです。

Keiko

DNSステータスはwhatmydns.netからも確認できます。

エラーがなければDNSの変更は完了しています。すぐ下の「完了」ボタンを押しましょう。

STEP.9
確認作業
設定したURLにアクセスして、アドビポートフォリオの自分のページが表示されれば、設定完了です!

サブドメインをAdobe PortfolioのURLとして設定する方法

私はサブドメイン「portfolio.kmy.website」を自分のアドレスとして登録しましたが、上記のステップと違うのはSTEP.5のみ。

portfolio.kmy.website」と「www.portfolio.kmy.website」の2つを必ず登録します。

ホスト名 portfolio
種別 必ず「A」を選択
内容 STEP.3でメモした一つ目のIPアドレスを記入
優先度 変更する必要なし
ホスト名 www.portfolio
種別 必ず「A」を選択
内容 STEP.3でメモした一つ目のIPアドレスを記入
優先度 変更する必要なし

独自ドメイン(カスタムドメイン)の設定が終わった私のポートフォリオサイトはこちらです。

参考 KMY Online PortfolioKMY Online Portfolio
KMY Online Portfolio
アドビポートフォリオを見てみる

この記事を書くにあたり参照したサイトはこちらです。

Get Started Now With Shutterstock

さいごに&まとめ

帰り際の男性 ▼英語ですが、今回のプロセスを説明した動画をYoutubeで見つけたので参考にしてください。この動画ではGoDaddyというレンタルサーバーを使った場合の独自ドメイン設定方法を紹介しています。

▼自分のポートフォリオのプロフィールページに何を書いたらいいかわからない、またはもっと充実させたい方は、こちらの記事が参考になりますよ。

2 COMMENTS

takizuan

お世話になります
上記方法を参考に進めて、カスタムドメインを入力したところ、

ドメイン設定が www サブドメインで正しく設定されていないようです。手順をここで確認してください。(DNS ステータスをこちらで確認してください)

と表示され、反映されません、、
DNS設定は、ドメインを取得したサーバに確認済みで間違っていないそうです、、
もし、解決策がお分かりになれば教えていただきたいです
よろしくお願いいたします

Keiko

STEP.5 DNSレコードを編集する②のところで
もうひとつ新たに設定を加えてみていただけませんか?

ホスト名 www
種別 必ず「A」を選択
内容 STEP.3でメモした一つ目のIPアドレスを記入
優先度 変更する必要なし

この設定が完了したあと、アドビポートフォリオの設定画面でもう一度
example.com(あなたのドメイン。wwwは不要)を入力してみてください。

現在コメントは受け付けておりません。