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

Diviで404ページを作る方法

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

404ページとは

404ページとは存在しないURLを踏んだ時に表示されるページです。
例えば、https://tofutech.xyz/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ページをテーマビルダーで作り始める

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

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

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

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

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

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

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

カスタムボディの構築

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

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

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

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

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

Diviの404ページを保存する

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

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

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

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

Diviのことをもっと深く知りたい方は、Diviの使い方完全マニュアルをご覧ください。

コメントする

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

Scroll to Top