fbpx
Diviで404ページを作る方法

Diviで404ページを作る方法【テーマビルダー】

こんにちはナオミです。

皆さんは404ページって知ってますか?
知らないと言う人も、きっと見たことがあるはずです。
この記事では404ページが何なのか、そしてDiviでどうやってそれを作るのかを説明します。

404ページとは

404ページとは存在しないURLを踏んだ時に表示されるページです。
例えば、https://nocodeweb.jp/thisis404なんてリンクは存在しません。
でもそれをクリックするとこんな画像が表示されます。

このページは存在しません

これが404ページです。
あなたのサイトは何が表示されますか?
確かに404ページはよく表示されるものではありませんが、決して表示される可能性がないわけではありません。

404ページが表示される原因

  • ページや投稿を削除した
  • ページや投稿のURLを後で変えた
  • 間違ったURLをサイトで使ってしまった
  • 他の方があなたのサイトをシェアした時に間違ったURLを貼ってしまった

特に最後はよくあります。コピペで一文字コピーし忘れたことなどありませんか?
そんな時に404ページは表示されます。
なので決して軽んじてはいけないページなんです。

Diviのデフォルトの404ページはダサい

Diviの404ページの例

これがデフォルトの404ページです。
『結果がありません』って言う日本語も少しおかしいですよね。

Diviで作った404ページの例

Diviの404ページのデザインのの例

これはElegant Themesが作った404ページです。
面白いデザインですね。

Diviビルダーで出来ることは全て出来る

Diviで404ページを作り、色々な機能を追加した

このようにボタンやリンクやフォームを追加することも可能です。
Diviビルダーで作ってるわけですから全部出来るわけです。

テーマビルダーで実際に404ページを作ってみる

テーマビルダーがなんなのかわからない人は、このテーマビルダーを説明した記事を見てください。

Diviの404ページをテーマビルダーで作り始める

WordPressのダッシュボードから『Divi』→『テーマビルダー』を選択し、『新しいテンプレートを追加』をクリックしてください。

ここをクリックすると、テンプレートを上書き可能なページが出てきます。

Diviのテーマビルダーで404ページを選択

この404ページと書いてる項目をチェックし、『テンプレートを作成』を押します。
404ページのテンプレートが追加されます。

ページ全部を使いたいなら、ヘッダーとフッターを隠す

Diviの404ページのヘッダーとフッターを消す

404ページの項目が出てきたら、上の画像の部分をクリックし、ヘッダーとフッターを隠します。
隠さなくてもいいのですが、ページ全体を使う時は隠します。

『カスタムボデイを追加』をクリックします。

カスタムボディの構築

Diviで404ページのカスタムボディを構築

次に『カスタムボディの構築』をクリックします。

Diviで404ページのボディの構築開始

このように、通常のDiviのビルダーが起動しますので、好きなようにページを作りましょう。

404ページを作りおえたら保存する

Diviの404ページを保存する

まず右下の保存ボタンで保存します。
そして右上のXを押すと前のページに戻ります。

テーマビルダーの保存を忘れない

そうしましたら『変換内容を保存』をクリックします。
これで完了です。

試しに存在しないURLを開いてみましょう。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通