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

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

404ページとは

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

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

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

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

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

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

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

Diviで作った404ページの例

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

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

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

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

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

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

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

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

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

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

カスタムボディの構築

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

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

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

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

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

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

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