WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます! WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます!

WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます!

何かいい感じの面白い404ページは無いものか?
と色々探ってる内にいいもの発見!
ブラウン管モニター風に表現だと!?
って事でそれを採用する事にしました。
CONTENTS

NINEの404ページがこちら

ホームページをリニューアルしたので、404ページも変えてみました。
では、さっそく完成を見てみましょう。

Design Office NINEの404ページがこちら

画像だと分からないので上のリンクから実際のページを見てください。
ブラウン管モニターの電源を入れた感じ。
独特のチラツキ感。
などが表現されています。

実はこっそり右下に電源ボタンもついています。
モニターの電源のOn/Offが操作できます。

404ページとは?

こちらはXサーバーさんの404ページ。

404ページはリンクが切れている、htaccessにエラーがある時、などに表示されるエラーページのことです。
一般的には「ページが見つかりません」「Not Found」などのエラーメッセージで通知しています。

404ページを作らないとデフォルトの404ページになってしまいます。
これでは読者はページを閉じてしまうかもしれません。

エラーメッセージ

404ページには、エラーが発生したことを示す簡潔なメッセージが表示する。
「お探しのページが見つかりません」「ページが存在しません」「Not Found」など。

ナビゲーションオプション

ナビゲーションオプションもあると良い。
TOPへ戻るボタン、リンク、サイト内の検索ボックス、関連するリンクなどがあります。

ブランディング

サイトのブランドイメージを維持するとより良い。
サイトのロゴやデザイン要素入れて、ユーザーにちゃんとサイトにいる事を伝えます。

SEO

適切に設定された404ページは、クローラーに正確な情報を提供し、検索エンジンランキングに影響を与えることもあります。
ネットで「404page」で検索すると海外の面白い404ページを見る事ができますよ。

WordPressで404ページを作る

WordPressでオリジナルの404ページを作成します。
(オリジナルテーマの作成を前提としています)

子テーマフォルダ内に、新しいファイル「404.php」を作成しましょう。
(使用している子テーマに404ページがあるならそれを編集しよう)
これが404エラー時に読み込むデフォルトのテンプレートファイルになります。
基本的には404.phpを作るだけで404ページが作成できます。

ここにTOPに戻るボタンだったり、検索窓を作ったりするのもありです。

<?php get_header(); ?>
<main>
  <h1>404 NOT FOUND</h1>
  <p>お探しのページはありませんでした。</p>
  <div><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Top</a></div>
</main>
<?php get_footer(); ?>

で、簡単な404ページは作成できます。

ブラウン管モニター風にする

Codepenでいくつかご紹介します。
この辺はCRTモニターとか、グリッチエフェクトと言われてますね。

作者
Written By isao
三重県四日市市でホームページを制作しております。 DIY、塊根植物、ガジェット大好きなのでブログ書いてます。 気になる事・質問などあればお気軽にコメントお問い合わせください。
三重県四日市市でホームページを制作しております。 DIY、塊根植物、ガジェット大好きなのでブログ書いてます。 気になる事・質問などあればお気軽にコメントお問い合わせください。
COMMENT

Leave Your Message

RELATED
WEB
Nov 14, 2023
READ MORE
【2023年】おすすめのドメイン取得サービス BEST5!

【2023年】おすすめのドメイン取得サービス BEST5!

WEB
May 11, 2023
READ MORE
WPの階層を変更!URLの「wp」を取ってドメイン直下にする方法

WPの階層を変更!URLの「wp」を取ってドメイン直下にする方法

WEB
May 10, 2023
READ MORE
box-shadowはもう古い?drop-shadowなら疑似要素にもSVG画像にも影がつく!

box-shadowはもう古い?drop-shadowなら疑似要素にもSVG画像にも影がつく!

WEB
Oct 23, 2023
READ MORE
【2023年】おすすめのレンタルサーバー会社 BEST5!

【2023年】おすすめのレンタルサーバー会社 BEST5!

WEB
Oct 21, 2023
READ MORE
WEBデザイン事務所がぶっちゃける!ホームページって何にお金がかかってる?安く作る方法とは?

WEBデザイン事務所がぶっちゃける!ホームページって何にお金がかかってる?安く作る方法とは?

READ MORE
POPULAR
May 27, 2023
READ MORE
伝説の左手装備?「TourBox」の使い方と設定!EliteとNEOの違いも解説
GADGET No.3

伝説の左手装備?「TourBox」の使い方と設定!EliteとNEOの違いも解説

DIY
Apr 20, 2023
READ MORE
温湿度篇 温度と湿度を徹底管理する!|IKEAファブリコールを全自動温室にDIY
FABRIKOR Vol.5

温湿度篇 温度と湿度を徹底管理する!|IKEAファブリコールを全自動温室にDIY

Jun 2, 2023
READ MORE
最も簡単な連携方法で家電を操作する方法!Stream DeckとSwitchBotの連携でスマートライフを実現
GADGET No.5

最も簡単な連携方法で家電を操作する方法!Stream DeckとSwitchBotの連携でスマートライフを実現

DIY
Apr 9, 2023
READ MORE
はじまり篇 温室を作る事になった理由とは?|IKEAファブリコールを全自動温室にDIY
FABRIKOR Vol.1

はじまり篇 温室を作る事になった理由とは?|IKEAファブリコールを全自動温室にDIY

DIY
Dec 14, 2023
READ MORE
まとめ IKEAファブリコールを全自動温室にDIY
FABRIKOR SUMMARY

まとめ IKEAファブリコールを全自動温室にDIY

READ MORE
SHARE THIS PAGE