【Mediumで独自ドメイン】を使ったホームページを作ってみよう

里 優裕(Ysuke Sato)
Sales Technology Lab
17 min readJan 11, 2017

--

【注意】2017年7月28日(金曜日)現在、新たに独自ドメインで作成したサブドメインでパブリケーションを作成しようとすると、1 パブリケーション75ドルも費用がかかることが判明しました。

既にMediumのパブリケーションを使い独自ドメインで設定しているユーザーは無料で使えます。

新たに始める方にはドメインのセットアップ、SSL認証、独自ドメインに対する継続的なサポートが含まれているようです。

以下はMedium公式の説明より引用。

Custom DomainWith the power of Medium publications, you can create a unique home for your brand and reach millions of our engaged readers directly.
ミディアムのパブリケーションでは、ユニークな独自ブランドを構築するとができ、直接何百万人ものユーザーにアプローチすることができます。
As part of your unique publication, you can create a custom domain for all your content to live under. It includes your domain setup, an SSL certificate, and ongoing support of your domain on Medium, all covered by a one-time payment.
独自のパブリケーションの一環として、すべてのコンテンツが配信されるカスタムドメインを作成することができます。 これには、「ドメイン設定」、「SSL証明書」、および「独自ドメインの継続的なサポートが」含まれ、すべて一回限りの支払いが適用されます。
To get started:
開始するには:
Fill out the form below with your requested domain and valid credit card information for a one-time payment of $75.
以下のフォームに必要なドメインと有効なクレジットカード情報を入力して、1回限りのお支払いで75ドルをお支払いください。
Medium will review your information and send an email confirming the acceptance of your custom domain.
お客様の登録情報を確認後、カスタムドメインの承認を確認するメールを送信します。
Follow the instructions in the email to complete setup and start publishing.
電子メールの指示に従ってセットアップを完了し、公開を開始してください。
Source:[Get started with custom domains / Medium]

前回、【Medium】でブログを書く理由を書きました。今回はMediumを独自ドメインを使ってホームページを作る手順を公開します。ドメインは既に、取得されている方用に解説していきます。では、早速流れを記載します。

  1. ドメインを取得(既に取得済みの方)
  2. Mediumアカウントに登録しパブリケーションを作成する。
  3. DNSを設定する (Domain Name System)
  4. 反映までに丸3日間待つ。

1.ドメインを取得

ドメインとは?、簡単に言うと「インターネット上に存在する住所」のことです。もしあなたが友達の家に遊びに行く時、その友達の住所がないとたどり着くことが出来ませんよね。

会社のホームページも全てドメインという住所を持っています。実際にこのドメインをIPアドレスと言って、「123.456.78.90」などのように表されます。この番号と、ホームページのドメインは同じことを指しています。

ドメインの取得は以下の会社を参考にしてください。

  1. さくらインターネット
  2. お名前.com
  3. エックスサーバー(ドメイン)
  4. ムームードメイン
  5. スタードメイン

2.Mediumアカウントに登録しパブリケーションを作成する。

新しいパブリケーション設定をします。

Name*は、パブリケーションに設定したい名前を入力します。
入力したテキストが下段のLinkに表示されます。
日本語の場合はリンクも日本語になり、英語大文字の場合は小文字に変換されます。スペースを利用すると半角ハイフンが入ります。

Descriptionは、そのパブリケーションの説明になります。

Publication avatarは、パブリケーションの色んな場所で表示される画像です。

“(1) パブリケーションのアバター画像は Medium内の様々なプレビュー箇所で表示されます。アバタ―用画像は正方形である必要があり、サイズは最低 60px x 60px である必要があります。”出典:[パブリケーションを整備する | Medium公式日本語サイト]

Publication logoは、パブリケーションロゴです。

“(2) パブリケーションのロゴ画像はパブリケーションに掲載されているストーリーの最上部に表示されます。ロゴの画像サイズは縦 72px、幅は最大 600px まで登録可能です。”出典:[パブリケーションを整備する | Medium公式日本語サイト]

contact infoは、メールアドレス、ご自身のtwitterプロフィールアドレス、フェイスブックのプロフィールアドレスを設定できます。

タグとは、webで似たような記事を関連付けさせるための荷札のようなイメージです。Mediumでは5つまで設定が可能です。英語でも日本語でもタグ付け可能ですが、英語のほうが圧倒的に関連記事が多いです。

Editorsは、「編集管理者」になります。

“エディター(編集者)として、ストーリーのドラフト(下書き)を画面上部にある「…」ボタンをクリックしていつでもパブリケーションに投稿することができます。
その場ですぐに投稿することもできますが、予約投稿することも可能です。”
出典:[パブリケーションを整備する | Medium公式日本語サイト]

Writersは、「ライター」になります。

“ライター(管理者)として、エディター同様自身が書いたストーリーを画面上部にある「…」ボタンをクリックして「Add to publication」メニューより投稿することができます。投稿されたストーリーは投稿と同時にはライターに通知されます。”出典:[パブリケーションを整備する | Medium公式日本語サイト]

私の場合は、特に何も設定はしていませんが、もし複数名でメディア管理する場合には、権限のある編集管理者にMediumに登録されているユーザー名を入力してください。

ライターの場合は、ライター枠に同じようにMediumに登録されているライターのユーザー名を入力します。

違いは、ライターが書いた記事は編集管理者に権限が任されることになります。記事の公開もEditorsの「編集管理者」で行えます。

EditorsとWritersの階層は下図のようになります。Medium Japan公式日本語サイトの「パブリケーションを整備する」が詳しいです。

次は、パブリケーションのレイアウト作成になります。ここの表紙のレイアウトは3パターンあります。

まず1つ目が、タイトルと説明文のみのレイアウト。

2つ目に、ロゴのみのレイアウト。

3つ目に、ロゴとタイトル・説明文のレイアウト。

他のパブリケーションを見ても3つ目の両方使えるレイアウトが人気のようです。

次に、Alignmentという場所になります。上記で指定したロゴやタイトルの位置を調整できます。左詰めか中央揃いの2通り指定ができます。下記の動画を確認してみましょう。

次に、Colorを設定します。Colorは設定したい方のみ設定してください。実際の動画を見てみましょう。

続いて、背景を挿入できます。実はGIF動画も挿入できます。私のホームページはGIF動画を設定しています。世界中にあるパブリケーションをある程度見てみましたが、GIF動画のパブリケーションはまだ見たことがありません。

下記は、私のホームページになります。

GIF動画の作成のコツは無料のGIF動画作成ツールを使います。私は「GIPHY」を使っています。また動画はyoutubeなどからも引っ張ってこれますが、著作権の問題もあるのでおすすめはしません。

動画は自分の持っているスマホのカメラ機能に「タイムプラス」というものがあればそれで秒数送りの素早い動画が撮れます。もしくはアプリをダウンロードして撮ると良いです。

出典:GIPHY

次に、記事が表示されるレイアウトを決めます。さまざまな組み合わせが可能です。実際に2つの動画を見てみましょう。

最後に、少し修正をします。一番左にあるSizeのS/M/Lですが、下記の動画のように背景のサイズが変更できます。(動画)

もう一度パブリケーションの内容を確認して、良ければ上段に戻りCreateを押します。

これで、Mediumに紐付いたパブリケーションの完成です。しかし、独自ドメインはこの後、設定を行っていきます。なぜか「bitbit」で通らず、「bitbite」で通りましたのでこちらで進めてます。

DNS設定をする前に、一度作成したパブリケーションを作り直したいという場合もあると思います。その場合の手順をご紹介します。

次のページへ遷移したら、Advancedをクリックして、「Delete publication」を押してください。

最後に、Confirmを押すと完全にパブリケーションが無くなります。

では次に独自ドメインを使って、DNS設定を行っていきます。

3.DNSを設定する。

DNSとは、ドメインネームシステム (Domain Name System) の略になります。

Use your own domainをクリックすると英語の説明文が開きます。どちらでも構いませんので、一方のリンクをクリックしてください。さらに英語の説明文へ遷移します。

this formをクリックします。今度はサブミットフォームが現れます。

サブミットフォームが現れます。Custom domain setupに設定しましょう。実際の動画を見てみましょう。

続きは下図になります。

Submitでカスタムドメインの申し込みを提出した後は、Medium Support よりメールが届きます。私の場合は、数時間で下記のようなメールが届きました。

メールの中には、「CNAME Domain=1個」と「CNAME Target=1個」および「A Records=12個」あるので、それらをお名前.comの「DNS関連機能の設定」より設定を行っていきます。

まずはお名前.comの設定画面へログインします。ログインができたら、「ネームサーバー設定」>「DNS関連機能の設定」をクリックします。

対象ドメインを選択し次へ進みます。

すると、対象ドメインのDNS関連機能設定-機能一覧が出てきます。

「A/AAAA/CNAME/MX/NS/TXT/SRV/DSレコード」という枠より「CNAME Domain=1個」と「CNAME Target=1個」および「A Records=12個」を設定していきます。左から2番目のTYPEの選択を「CNAME」や「A」に変更可能です。

実際の動画も確認してみましょう。

最初に「CNAME Domain=1個」と「CNAME Target=1個」を設定します。

次に、「A Records=12個」を設定していきます。DNS設定画面の「A/AAAA/CNAME/MX/NS/TXT/SRV/DSレコード」>左から2番目のTYPEを「A」に変更します。TTLは3600のままで大丈夫です。これを12個ぶんのAレコードを追加していきます。

12個のAレコードの設定を終えると下記のようになります。

最後に、DNSレコード設定用のネームサーバーに変更確認のチェックボックスにチェックを入れ、確認画面へ進んでください。

4.反映までに丸3日間待つ

これで全ての設定が完了です。私の場合、反映には丸3日間くらいかかりました。

英語版で設定の動画もありましたが、サーバーが違うと設定方法も違うので、あくまで参考にする程度が良いです。

出典:How do I set up a custom domain? | Medium

注意

独自ドメインホームページ上でストーリーを投稿し、その記事をタグ付けし、まとめてフィルターをかけたい場合、最初に何か記事を投稿した後でしか設定ができません。その場合は下記の場所から設定ができます。

まとめ

最後に、サーバがお名前.comではなく他社サーバーを使っているという方もいると思います。調べてみたらムームードメインやエックスサーバー等で設定されている方もいらっしゃいました。その方は下記の記事を参考にしてみると良いです。

【ムームードメイン編】

西村創一朗さん

出典:ブログ「Now or Never」をMediumに完全移行しました。

堀 E. 正岳さん

出典:Mediumパブリケーションに取得したドメインを設定する手順 | Lifehacking.

ホシナカズキさん

出典:Mediumでオウンドメディアを運営するために独自ドメインを設定する方法(ムームードメイン編)

【エックスサーバー編】

クリエイティブライフハックさん

出典:Medium に独自ドメイン(サブドメイン)を設定する方法|エックスサーバ

【海外:Dotster Domain編】

いしたにまさきさん

出典:Mediumでドメインマッピングする方法、Publications限定

【お名前.com】

伊勢 隼人さん

出典:パブリケーション@Mediumを独自ドメインで使う方法

Toru Sasakiさん

出典:Mediumでパブリケーションに独自ドメインを適用してみた

パブリケーションを整備する | Medium公式日本語サイトより

パブリケーションの設定からストーリーの投稿まで紹介されています。

出典:パブリケーションを整備する

テクノロジー関連記事

2018年3月27日に「【初心者入門】プログラミングを学んで感じたおすすめプログラミング学習サイト」について書きました。

Twitterはこちら→@sato__yusuke

ビットコインやCoinTipで投げ銭をしていただけた方は、お返しにだるま型のSTL COINをお返しいたします。

ビットコインで寄付したい金額を選んでください。寄付金額に応じた 「STLCOIN」 をお返しします。「STLCOIN」を受け取るにはIndieSquare Walletをスマホにインストールし、事前に寄付したい金額以上のビットコインをIndieSquare Walletにチャージしておく必要があります。
出典:Coin Tipビットコイン】をTwitterで送るサービスCoinTip

過去・関連記事

--

--

Japan / Sales Technology Lab CEO/プログラミング言語:Ruby,Swift,Unity_C#