皆さんこんにちはGB350.comです。
今回は、403ページをWordPressで作成していきたいと思います。
このページでは多少のHTML知識などがあることが前提となっていますが、知識がなくてもこのページを見ることで403ページを作成することができると思います!
準備
403ページをいきなりコードを書いてゼロから作成するのは結構難しいので、まずはWordPressにてページを作成します。
ページの作成を本番環境でやるのが嫌な場合はシンクラウドFreeなどの無料サーバーやレンタルサーバーのデフォルトドメイン、サブドメインなどを利用してテスト環境で作成すると良いと思います。
※このとき、本番環境との混同を避けるため、検索エンジンがサイトをインデックスしないようにする設定をします。
WordPressにて記事を書くように403ページのデザインを作成します。
ちなみに当サイトの403、404ページは下記のようになっています。
https://gb350.com/403.html -403ページ
https://gb350.com/404 -404ページ
下記画像は403ページの画面です。
ページを作成するうえで入れたほうがよい要素は以下のものです。また、用途などによっていれるべきものは変わってくるので、ご自身で判断して作成してください。
- 403ページにアクセスしたことがわかりやすい画像をいれる。
- このページ飛ばされた理由を説明する文を入れる。
- 閲覧者のブラウザバックを避けるため、検索バーをいれる。
- 他の記事を進める。
- 前のページへ戻るボタンの設置。
画像を用意することが難しかったら当サイトと同じ画像を設定してみてはどうでしょうか。
https://gb350.com/img/403.webp
上記 URLはPNGでも使用することができます。(コチラ)
画像を必要に応じてダウンロードしたり、リサイズしたりして使ってみてください。
作成することができたら、外部からも閲覧することができるように公開にします。
これで準備完了です。
HTML化・アップロード
作成したページを403ページとして設定するためには、サイトをHTMLという言語に変換する必要があります。
知識は必要ありません。ソースコードビュアーというサイトを使用します。
使い方はカンタンです。開いたサイトの中央上にあるEnter URLの右のバーに先ほど作成したページのURLを貼り付けます。
URLを入力して「View」を押すと、
このようにズラッとHTMLコードが表示されます。
正常に表示されたら、
コードをコピーします。上図参照
コピーできたら各サーバーのファイルマネージャーにログインします。
ログインの仕方は各社サイトを御覧ください。
その他のサーバーはGoogleなどで「サーバー名 ファイルマネージャー ログイン」などで検索すると良いと思います。
ログインできたら、WodPressをインストールしたファイルまで移動します。
各社設定方法が違ってくるので、開いて403ページの設定をしてください。
Xserver
Xserver
403ページを表示したいページのドメインをダブルクリックします。
開いたらpublic_htmlをダブルクリックで開きます。
開いたら左上の「新規ファイル」をクリック。
ファイルの名前を403ページとわかり易い名前にします。このとき末尾に「.html」を忘れず記入してください。例:403.html
作成をクリック。
作成したページを表示した状態で上のツールの編集を選択します。
開いたポップアップの中に先ほどコピーしたものをペーストします。
正常に設置できているか確認をするために
https://example.com/403.html – example.comはあなたの設定したドメインに変更します。
にアクセスして表示できるか、表示が崩れていないか確認します。
表示がきちんとされたら一旦完成です!
次は自動で403ページに飛ばされるよう設定します。
サーバーパネルにログインします。
ログインしたら ホームページ – エラーページ設定に移り、403.htmlをおいたドメインを選択します。
選択したら、403をONにして確認画面に進みます。
設定するをクリックします。 ※画像はすでに設定している状態で変更しようとしているので「変更前」がON担っていますが気にせず設定するをクリックします。
設定変更が完了したことを伝えるページに変わったら設定完了です。
https://example.com/.htaccess – example.comはあなたの設定したドメインに変更します。
などにアクセスしてきちんと403ページに飛ばされるか確認します。
飛ばされたら今度こそ完成です!お疲れ様でした!
lolipop
lolipop
WordPressをインストールした場所がわからない方は
lolipopにログインして「サーバーの管理・設定」から独自ドメイン設定に移動して403を設定したいドメインのアップロードフォルダの名前を確認します。
確認できたらlolipopFTPへ移動します。
FTPを開いたら先程確認したファイル名を開きます。
開いたら上のバーの新規ファイル作成をクリックします。
クリックしたら上の画面が開くので、先程コピーしたものを貼り付けます。
上のファイル名を403.htmlなど403ページとわかり易い名前にします。※末尾に「.html」を忘れずに入力してください。
保存するをクリックします。
画面上にポップアップが出でくるのでOKを選択します。
しばらくして上の方に「403.html ファイルを作成しました」と出るので出たらOKです。
次に自動で403ページが出現されるようにします。
lolipopのホームから「サーバーの管理・設定」の中の「エラーページ変更」のページに移動します。
エラーページ変更をクリックします。
「変更するエラーページ」から「ディレクトリを指定」からファイルの名前を入力、もしくは「設定したドメインのディレクトリから入力できます。をクリックしてドメインを指定します。
自作エラーページを選択して403エラーの欄に
/ファイルの名前/403.html – ファイルの名前には403.htmlを作成した場所のファイル名を入力してください。
と記入します。
変更をクリックします。
上にポップアップが出るのでOKをクリック。
OKをクリック。
最初の画面に戻るので指定したファイル名があるかどうか確認します。
http://から始まるURLはアカウントの初期ドメインです。
きちんと設定ができているか確認をします。
https://example.com/.htaccess – example.comはあなたの設定したドメインに変更します。
などにアクセスして作成した403ページが表示されるか確認します。
表示されたら403ページの設定は完了です!お疲れ様でした!
その他のサーバー
その他のサーバー
申し訳ありません。当方その他のサーバーを持っていないため検証することができません。おそらくXserverやlolipopと設定方法はにているはずなのでそちらをお読みになってご自身で設定をしてみてください。
最後に
完成させることができたでしょうか?少しでもお役に立てたのなら幸いです。
わからないことがあればできる限りお答えさせていただきますので、是非コメントいただければと思います。
ここまでお読みいただきありがとうございました。それでは。
コメント