法人・個人事業主向けの新サービスAmazonビジネス→【詳細はこちら】

mixhostのCloudflare設定【簡単・無料・高速化】の３拍子

2019/02/10

WordPress講座の概要

第９回目の講座は「Cloudflareの設定」です。

Cloudflareとは？

WEBサイトの高速化に役立つサービスの1つです。

設定も楽ですし、無料で使えるのでまだの方はこの機会に導入してみましょう。

補足

解説に使用した画像は日本語に翻訳しています。

記事の目次

Cloudflareの登録方法
Cloudflareのネームサーバーに変更する
CloudflareのAPIキーを取得
CloudflareのAPIキーをLiteSpeed Cacheに設定
Cloudflareの基本設定
Cloudflareのブラウザキャッシュの有効期限について
次回予告

Cloudflareの登録方法

「Cloudflare登録ページへ」

STEP1

クラウドフレアトップページ

「サインアップ」をクリック

STEP2

クラウドフレアアカウント作成

「Eメール」と「パスワード」を入力
↓
「チェックボックス」のチェックを外す
↓
「アカウントを作成する」をクリック

STEP3

クラウドフレアにサイトを追加

ドメインを入力して「サイトを追加」をクリック

STEP4

クラウドフレアDNSレコード照会

「次へ」をクリック

STEP5

クラウドフレアプランを選択

「無料」をクリック→「計画を確認する」をクリック

STEP6

クラウドフレア計画の確認

「確認」をクリック

STEP7

クラウドフレアDNSクエリ結果

「持続する」をクリック

STEP8

クラウドフレアネームサーバーをコピー

「2つのネームサーバーをコピー」→「持続する」をクリック

Cloudflareのページは開いたまま、別タブで現在利用しているドメイン管理サイトへアクセスします。

補足

当WordPress講座では「お名前.com 」を使用しているので、そちらで解説します。

Cloudflareのネームサーバーに変更する

STEP1

「お名前.comログイン画面へ」

お名前.comログイン

「ID」と「パスワード」を入力して「ログイン」をクリック

STEP2

お名前.comトップページ

左上の「ドメイン」をクリック

お名前.com更新手続きのお知らせ

「更新画面から移動する」をクリック

STEP3

お名前.comネームサーバー

変更するドメインの「ネームサーバー」をクリック

お名前.comネームサーバーの選択

手順

「その他」をクリック
「その他のネームサーバーを使う」にチェック
ネームサーバー1と2に、先ほどコピーした「Cloudflareのネームサーバー」を貼り付ける
「確認」をクリック

補足

ネームサーバー3以降にも入力されてる場合は、すべて削除してください。

お名前.comネームサーバー変更の確認

「OK」をクリック

お名前.comネームサーバー変更完了

「完了しました」と表示されればOK

注意：ネームサーバーが切り替わるまで最大72時間ほどかかる場合がありますが、気にせず作業を進めてください。

CloudflareのAPIキーを取得

「MixHost 」にはプラグイン「LiteSpeed Cache」があるので、そちらも合わせて解説します。

開いた状態の「Cloudflare」のページに戻る

STEP1

クラウドフレアAPIキーを取得

右側にある「APIキーを取得する」をクリック

STEP2

クラウドフレアグローバルAPIキーを見る

下までスクロールして「グローバルAPIキー」の「見る」をクリック

STEP3

クラウドフレアAPIキー取得のパスワード

「Cloudflare」に登録したパスワードを入力
↓
「チェックボックス」をクリック
↓
「見る」をクリック

クラウドフレアAPIキー確認

「あなたのAPIキー」をコピー

Cloudflareのページは開いたまま、別タブでWordPressの管理画面を開いてください。

CloudflareのAPIキーをLiteSpeed Cacheに設定

STEP1

LiteSpeed Cache設定

管理画面の「LiteSpeed Cache」にマウスを乗せ「設定」をクリック

STEP2

LiteSpeed Cache CDN設定

「CDN」をクリック

一番下の「Cloudflare API」までスクロール

LiteSpeed Cache CloudflareAPI設定

手順

Cloudflare APIを「オン」にする
メールアドレス：「Cloudflare」と入力
グローバルAPIキー：先ほどコピーした「APIキー」を貼り付け
ドメイン：自分のドメインを入力
「変更を保存」をクリック

Cloudflareの基本設定

最後に「Cloudflare設定」を1カ所だけ変更します。

開いた状態の「Cloudflare」のページへ戻る。

クラウドフレアトップへ戻る

「Cloudflareアイコン」をクリックしてホーム画面へ戻る

↓

今回「設定したドメイン」を選択

クラウドフレア速度設定

真ん中らへんにある「速度」のアイコンをクリック

自動縮小の

「JavaScript」
「CSS」
「HTML」

にチェックする。

これでCloudflareの設定はすべて完了です。

その他にも設定できる項目はありますが、基本そのままでOKです。

ただし、次の「ブラウザキャッシュの有効期限」だけは重要なので覚えておきましょう。

Cloudflareのブラウザキャッシュの有効期限について

クラウドフレアキャッシング設定

Cloudflare設定の「キャッシング」をクリック

下にスクロールすると「ブラウザキャッシュの有効期限」が出てくるので、この部分について解説しますね。

Cloudflareブラウザキャッシュの有効期限

有効期限は「30分〜1年」の間で指定できます。デフォルトは「4時間」となっています。

このキャッシュ期限は用途に合わせて変更したいので、キャッシュの仕組みを理解しておきましょう。

ブラウザキャッシュの仕組み

上記の通り「リピーター向け」の機能です。

指定した期限内に同じページを見にきた人は、保存されたデータを閲覧する＝読み込みがなくなり、サイト表示が高速化される仕組みです。

で、ここからが重要

例えばサイトを始めたばかりの頃は、カスタマイズやデザインをちょくちょく変更しますよね。

そんな状態の時に、キャッシュの有効期限を1年とかにしてしまうと、ユーザー側にはいつまでも古いページが表示される可能性が高いのです。

もちろんキャッシュクリアすれば、最新データを読み込めるわけですが、一般ユーザーはそこまでしないので、こちらである程度コントロールしましょう。

なので最初は「1〜4時間程度」に指定して、サイトが完成したら「5日〜16日」くらいに指定するのがおすすめです。

その後は大幅に変更する時だけ「有効期限を短めに変更する→戻す」ってことだけ覚えておいてください。

以上簡単ですが「ブラウザキャッシュの有効期限」について解説しました。

その他の設定は下手にイジらない方がいいですね。もしガッツリ勉強したい方は、こちらのサイトが参考になります。「cloudflare 設定 – 高速化できる設定方法 | パソコン生活サポートPasonal」

お疲れ様でした。

次回予告

次回はWordPressの「ローカル環境」の作成方法を解説します。

本来は開発者向けのものですが、ローカル環境を構築することで、本サイトをイジらず「カスタマイズの確認」や「デザイン変更」などができるのでいろいろと便利です。

カゲオ

気づけばもう9回目の講座でしたね。

最初からこの講座に沿って構築している人はずいぶん楽しくなってきたのではないでしょうか。

もう十分検索に強いWordPressを構築できているので、あとはSEOを学べばバッチリですね。

ご質問・ご感想・受付中コメントをキャンセル