【コピペでOK】おしゃれな404エラーページを作る | ゆぱんだらいふ

とある夢女の雑記ブログ

【コピペでOK】おしゃれな404エラーページを作る

#Webデザイン

文字だけ「404 Not Found」だとちょっと味気ない…かといって、凝ったエラーページを作るのも疲れる…。という、そんな方へ!

Sponsored Link

アイコンフォントを利用して、手軽におしゃれな404エラーページを作ってみませんか?

ということで、記事に載せている写真はupanda.lifeで使っているエラーページです。
今は背景のグラデーションもCSSで実装できるので、とても便利な世の中になりました…。と、いうことで、おしゃれな404エラーページを作ってみましょう!

※こちらの記事はワードプレスでの実装を前提に進めております。

使用するアイコンフォントは定番も定番、『Font Awesome 5』を使用します。
有料版やらダウンロードやらいろいろと方法がありますが、スタイルシートを読み込むタイプで進めていきます。※freeです。

Step.1 スタイルシートを読み込む

スタイルシートのURLを<head>~</head>の中にぺぺっと張り付けます。

参考:https://fontawesome.com/get-started/web-fonts-with-css

Step.2 [404.php]の中身の編集

今回は「ページが見つからない!」ということを表したいので、虫眼鏡のアイコンを選びました。
虫眼鏡にもいろいろな種類があるので、お好みのものを選んでください!他によさそうなアイコンがあったらそちらでも構いません。
そして以下のようなコードがありますので、そちらをそのままコピーして[404.php]に貼り付けます。

アイコンのサイズを変えたいときに、この[fa-〇x]も一緒に入れるとラクチンです。
[fa-5x]という数字のところを[fa-2x]や[fa-9x]とすることで、アイコンの大きさが簡単に変えられます。
数字は1~9まで入るので、お好みで調整してみてください。サンプルの大きさを下に載せてみました。
サイズは1→9です。


ちなみに、upanda.lifeでは下記のように記載しています。

※ワードプレスを使用しているので、途中で専用のテンプレートタグが入っています。また、ヘッダー・フッターの読み込みタグは省いています。

もし、検索で記事ページにたどり着いたとして、「ページがみつかりませんでした!」だけだと、せっかく訪問してきてくれた方はそのまま帰ってしまいますよね。
なので、私は一緒にブログ内の検索機能も[404.php]に入れこんでいます。この辺りはお好みでどうぞ♪

Step.3 CSSでアレンジ

では、スタイルシートでデザインを整えていきます。
サイトによってはズレる場合もあると思うので、marginやpadding、font-sizeの調整は各自でどうぞ。

スマホ・タブレットでのレスポンシブはwidthを100%にしているので個別に設定はしていませんが、パソコンの方でpaddingで高さを少し多めにとっています。
もしちょっと高さとかずれていたら各自調整していただけたら…!

inputタグについての補足

検索フォームで使用するinputですが、スマホやタブレット端末から見るときにfont-sizeが16px以上でないと、フォームを選択したときにズームしてしまいます。なのでこちらのfont-sizeは変更しない方がいいです。
また、iPhoneで見た際にsubmitの背景色をbackground:#000;などに設定していたらうまくCSSが反映されないので、liner-gradientで指定しています。rgbで設定しても効きません。

そして完成したupanda.lifeのエラーページはこちら

今回は全面的にグラデーションをかけていませんが、bodyの背景色をグラデーションにしてもおしゃれだと思います。
ワードプレスをご利用で、もしbodyで全面的にグラデーションをかけたい場合は、<body>をいじる必要があります。(テーマによっては不要かもしれません)

こうすることで、404.phpが読み込まれたときに<body>に<body id=”not_found”>というIDがつくので、CSSで個別に背景色を指定することが可能になります。
また、背景のグラデーションで使用している

ですが、私はshadeさんのものを使っています。というかそのままですね(;^ω^)
自分でお好みのグラデーションにできるので、ぜひ試してみてください!
右下の方にグラデーションのbackgroundが表示されているので、そちらを先ほどのコードと張り替えるだけで簡単です。

ということで、コピペで簡単(なはず)おしゃれな404エラーページ制作でした~!

この記事をシェアする