Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

Compass Note|ITエンジニアの羅針盤

【2025年版】はてなブログにCloudflareで独自ドメインを設定する最安&最強手順!エラー解決法も網羅解説

* 本ページはプロモーションが含まれています
プロフィールアイコン

筆者名:仁志詩馬(にし しうま)

最先端のIT企業で15年以上働く現役システムエンジニア。AWS/GCP、CISSP/CCSP、FP2級/AFPなどの資格を活かし、IT、セキュリティ、資産運用、ガジェットなど、幅広いテーマで自身の知見を発信しています。

\ 好きなことば /

  • 何事もまずは小さく始める(Small start)
  • 情報は羅針盤(Compass)であり、羅針盤に従うのは自分自身
  • 未来を予測する最善の方法は、それを発明することだ

詳しいプロフィールはこちら

はじめに:なぜ「はてなブログ + Cloudflare」が最強なのか?

ブログを運営していると、多くの人が「独自ドメイン」の導入を検討します。独自ドメインは、ブログの専門性や信頼性を高め、SEOの観点からも非常に重要です。

しかし、

「ドメインの維持費って、結構ばかにならない…」

「設定が複雑で、エラーが出たらどうしよう…」

といった悩みもつきものです。

この記事では、そんな悩みを一挙に解決する「はてなブログにCloudflareで独自ドメインを設定する方法」を、どこよりも詳しく解説します。

私自身が実際に設定する中で詰まったポイントや、発生したエラーとその解決策をすべて盛り込みました。この手順通りに進めれば、あなたも最安コストで、高速かつ安全なブログを手に入れることができます。

料金比較:Cloudflareは本当に安いのか?

独自ドメインを取得できるサービスは多数ありますが、ランニングコストを考えるなら更新料金が最も重要です。主要なサービスとCloudflareの料金を比較してみましょう。

サービス名 取得料金 (.com) 更新料金 (.com) 特徴
Cloudflare 約1,700円 約1,700円 原価提供で最安。高機能。
お名前.com 1円〜 約1,738円〜 キャンペーンは安いが更新料金に注意。
Xserverドメイン 1円〜 約1,980円〜 国内で安心感。サーバーとセットがお得。

※2025年10月時点の目安。料金は為替や時期により変動します。

見ての通り、Cloudflareはドメインの卸売価格(原価)でサービスを提供しているため、取得料金と更新料金が変わらず、長期的に見て最もコストを抑えられます。

全体像:設定完了までの5ステップ

これから行う設定の全体像を把握しておきましょう。

  1. Cloudflareで独自ドメインを取得する
  2. はてなブログ側で独自ドメインを設定する
  3. CloudflareでDNSレコードを設定する(最重要!)
  4. Cloudflareでリダイレクト設定を行う
  5. 動作を確認し、トラブルシュートする

専門用語が出てきますが、一つずつ丁寧に解説するのでご安心ください。

Step1. Cloudflareで独自ドメインを取得する

まずはCloudflareのアカウントを作成し、ドメインを取得します。

  1. Cloudflare公式サイトにアクセスし、アカウントを無料作成します。
  2. ログイン後、メニューから「ドメイン登録」を選び、希望のドメイン名を検索して購入手続きを完了させます。クレジットカード情報が必要です。

Step2. はてなブログで独自ドメインを設定する

次に、はてなブログ側に「これからこのドメインを使いますよ」と宣言します。

ここで一つ前提条件があります。 はてなブログで独自ドメインを設定するには、有料プランである「はてなブログPro」に登録する必要があります。無料版ではこの機能が使えないため、もしあなたが本気でブログの資産価値を高めたいと考えているなら、Proへのアップグレードは必須の投資と言えるでしょう。

私自身もProを契約していますが、独自ドメインが使えるだけでなく、広告非表示やデザインの自由度向上、1アカウントでBlogサイトを10個作成できる、など、得られるメリットはその価値を大きく上回ると感じています。

>> はてなブログPro 公式サイトで詳細をチェックする

では、Proに登録していることを前提に、設定を進めていきましょう。

  1. はてなブログのダッシュボードから 「設定」→「詳細設定」 を開きます。
  2. 「独自ドメイン」の項目に、取得したドメイン名を入力します。

【超重要ポイント①】 ここで入力するドメイン名は、www を付けた www.team-creative-lab.com の形式にしてください。

はてなブログ独自ドメイン

team-creative-lab.com のように www なしで設定すると、後述するDNSレコードとの不一致が原因で、いつまで経ってもエラーが解消されません。 これは私が実際に時間を溶かした、最初のトラップでした。

正しく入力して保存すると、「ドメインの設定状況」が「有効」になります。

Step3. CloudflareでDNSレコードを設定する(最重要!)

ここが設定の心臓部であり、エラーが最も発生しやすい箇所です。慎重に進めましょう。

Cloudflareのダッシュボードで、取得したドメインを選択し、左メニューから「DNS」を選びます。

CNAMEレコードの追加

まず、www付きのドメインをはてなブログに向ける設定です。

  • タイプ: CNAME
  • 名前: www
  • ターゲット: hatenablog.com
  • プロキシステータス: DNSのみ(雲のマークを灰色にする)

cloudflare DNS 登録

【超重要ポイント②】 プロキシステータスの雲のマークは必ず灰色(DNSのみ)にしてください。

ここがオレンジ色の雲(プロキシ済み)になっていると、Cloudflareのセキュリティ機能がはてなブログのSSL証明書と衝突し、「接続がプライベートではありません (NET::ERR_CERT_COMMON_NAME_INVALID)」というエラーが永続的に発生します。

Step4. Cloudflareでリダイレクト設定を行う

次に、wwwなしのURL(例: team-creative-lab.com)にアクセスしたユーザーを、自動的にwwwありのURLに転送する設定を行います。

1. ダミーのAレコードを追加する

この設定を有効にするための「おまじない」として、ダミーのDNSレコードを追加します。

  • タイプ: A
  • 名前: @
  • IPv4 アドレス: 192.0.2.1 (このまま入力してください)
  • プロキシステータス: プロキシ済み(雲のマークをオレンジ色にする)

2. ページルール(Page Rule)を作成する

左メニューの「ルール」→「Page Rules」を選択し、新しいルールを作成します。

  • URL: team-creative-lab.com/*
  • 設定を選択: Forwarding URL (URLの転送)
  • ステータスコードを選択: 301 - Permanent Redirect (恒久的なリダイレクト)
  • 宛先URL: https://www.team-creative-lab.com/$1

cloudfrare page  rule

これで、wwwの有無にかかわらず、すべての訪問者を正規のURLに集約できます。

Step5. トラブルシューティング:エラーが出たら

ここまでの設定が完了しても、すぐに表示されない場合やエラーが出ることがあります。私が遭遇したエラーと解決策を共有します。

エラー①:「接続がプライベートではありません」

接続がプライベートではありません。

  • 原因: ほぼ100%、Step3で設定したCNAMEレコードの雲マークがオレンジ色になっていることが原因です。
  • 解決策: 雲マークをクリックして灰色(DNSのみ)に変更し、数分待ってから再度アクセスしてください。

エラー②:「404 Blog is not found」

404 not fouond

  • 原因: DNSは正しくはてなブログを向いているものの、はてなブログ側がどのブログを表示すべきか認識できていない状態です。これは、Step2のはてなブログ側の設定が www なしになっている場合に発生します。
  • 解決策: はてなブログの「詳細設定」で、独自ドメインをwww付きの www.team-creative-lab.com に修正し、設定を保存してください。私の場合は、この「保存」を忘れていたことで解決が遅れました。

まとめ:最強のブログ環境をその手に

お疲れ様でした! Cloudflareを使った独自ドメイン設定は、いくつかの重要なポイントさえ押さえれば、決して難しくありません。

  • コスト面: 長期的に見て最安
  • パフォーマンス: CDNで高速表示
  • セキュリティ: SSLやDDoS対策も万全

この記事で解説した手順とトラブルシューティングを参考に、ぜひあなたも「はてなブログ + Cloudflare」という最強のブログ環境を構築してみてください。

最後に:本気のブログ運営なら「はてなブログPro」から

ここまで、Cloudflareを使った技術的な設定を解説してきましたが、その大前提となるのが「はてなブログPro」です。

独自ドメインの設定はもちろん、収益化の邪魔になる広告を非表示にしたり、最大10個の複数のブログを運営したりと、無料版にはない機能が満載です。特に、今回のように専門的な内容を発信するブログであれば、Proにすることで読者からの信頼性も格段にアップします。

まだ無料プランで迷っている方は、この機会にぜひProへのアップグレードを検討してみてください。ブログ運営の可能性が、きっと大きく広がるはずです。

>> はてなブログProの詳細を確認してみる【公式サイト】