WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます! WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます!
.side_cate { width:300px; height:100%; border:1px solid #000; position:absolute; top:0; right:0; z-index:2; }
   
   
CONTENTS

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

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

WEB
Aug 18, 2024
READ MORE
Macのショートカット記号

Macのショートカット記号

WEB
Jul 20, 2024
READ MORE
絶対入れるべきChromeの拡張機能!おすすめ10選!WEBデザイナー向け

絶対入れるべきChromeの拡張機能!おすすめ10選!WEBデザイナー向け

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

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

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

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

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

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

Jan 7, 2024
READ MORE
iPhoneユーザー必見!Apple「ホーム」アプリをオススメする理由!Homekit対応にする方法
GADGET No.14

iPhoneユーザー必見!Apple「ホーム」アプリをオススメする理由!Homekit対応にする方法

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

READ MORE