404 NotFoundをおしゃれに!サンプルサイトや画像の作り方


 

404 Not Foundって?

対象のアドレスが見つからない場合に出るエラーメッセージです。

ドメインは合っているものの、個別の記事アドレスがないなどの場合、404 Not Found エラー時に、そのサイト内にあるページを設定して表示させることが出来ます。

HTTP 404、またはエラーメッセージ Not Found(「未検出」「見つかりません」の意)は、HTTPステータスコードの一つ。クライアントがサーバに接続できたものの、クライアントの要求に該当するもの (ウェブページ等) をサーバが見つけられなかったことを示すもの。また、要求に応えられない理由をごまかすためにも使われる。

Wikipediaより

 

どんな時に?

様々な要因がありますが、よくありがちなのは以下のような場合です。

  • ユーザーのURL入力ミス
  • ブックマークされていた記事の移動や削除
  • 自身のリンク記述ミス
  • 削除したなど存在しなくなった記事へのリンク

 

画像デザイン参考サイト

フリー画像

フリーの画像サイトはたくさんありますが、個人的に多様しているのは以下です。
※基本無料ですが会員登録が必要です。

PHOTO AC

 

その他、会員登録不要なフリー画像サイト

 

画像文字入れ

フリー画像に自分で文字入れするなどの編集を行う場合は、以下のサイトが便利です。

自分で用意した画像に様々なフォントやサイズ、色で文字入れ可能

画像文字入れ加工 | 写真に文字を入れる無料サイト(フリーソフト)

上記サイトでの作成例

 

 

404画像

以下のような個性的なデザインの404ページ用画像が紹介されていて、ダウンロードも出来ます。
個性的な404エラーページ を作ってみた +ダウンロードどうぞ
上記サイト内サンプル

 

 

CSSデザイン

CSSで作るデザインが紹介されています。CSSをスタイルシートに記述し、404ページにHTMLを書けば利用出来ます。

 

 

設定方法

デザインが決まったらサイト内で設定をします。

テーマによって設定方法が異なりますので、ご自身のテーマでの設定方法をご確認下さい。404ページ生成機能がないテーマもあります。

 

ルクセリタスでの設定方法

超簡単!Luxeritasルクセリタスに404 Not Found ページを設定する
404 Not Foundって? 対象のアドレスが見つからない場合に出るエラーメッセージです。 ドメインは合っているものの、個別の記事アドレスがないなどの場合、404 Not Found エラー時に、そのサイト内にあるページを設定して表示さ...

 

Cocoonでの設定方法

Cocoon 404 Not Foundページの設定方法・画像サンプルサイトも
Cocoonには、ページが見つからない時に表示される404 Not Foundページを自動生成してくれる機能があります。 簡単に設定出来、好みの画像やデザインにする事も出来ます。 サイト内検索窓や、メニューを設置するなどのカスタマイズも可能...

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています