ブログもHTMLも初心者だから404エラーページは気軽に遊んでみる

WordPressでブログを始めてやっと7ヶ月。
それなりに体裁も整ってきました。
そろそろ404ページもデザインしようかな？
あれ？
404ページってどうやって表示するの？
固定ページとは違うみたいだし？

▪︎contents▪︎

404ページとは？

URLを間違ったり、削除して存在しなくなったページを開こうとすると、

404 ERROR！！

と、書かれたページが出現しますよね。

全面白地に、黒文字で左上に”404ERROR”とだけ書かれた画面に遭遇すると、ちょっとブルーになります。
（実際は小さく短い英文が添えてある事が多いけど読まないです……）

自分の404ページがそんなのだったら嫌なので、カスタマイズしないと。

まず、404ページを見るには？？？
自分のURLに有り得ない数字や文字を追加して検索すれば良いらしい、なるほど。
7ヶ月目にして初めて404ページを開いてみました。

利用させて頂いているWordPressの無料テーマは『Simplicity 2』。
恐る恐る404ページを開いてみましたが……。
タイトルやサイドバーはそのまま、どこからでもリンクで記事に戻れる様になっていました。
何もしなくても全然問題ないです、グッジョブ。

更に、検索エンジンにインデックスされないように設定されているし、広告も出ません。
でもでも、簡単にカスタマイズできる様になっています、グッジョブ。

詳しくは、作者わいひらさんの
Simplicityで404ページをカスタマイズする方法
で、ご確認ください。

さて、インデックスされないという事は、少々遊んでも良いですね、ニヤリ。

アイデアだけは色々と頭に浮かびますが、自分が実装できるかどうかは別問題。
ゲームを仕込もうとか、カッコイイ動画を仕込もうとか、404ページが開いたら悲しい曲が流れるとか……、無理です。

自分のレベルで自分らしくカスタマイズ開始です。
えーっと、404ページは滅多に見てもらえないページです。
「間違って迷い込んでしまった時に、楽しく記事に戻ってもらおう！」
という、自己満足のページデザインです。

まずは画像にお手製イラスト。
『Simplicity 2』では、WordPressのダッシュボード左側、
「外観」→「カスタマイズ」→「レイアウト（全体・リスト）」
の一番下で、404ページに表示したい画像を簡単に追加できます。

メインの画像は簡単に設定できました。
でも、やっぱり何か遊びゴコロが欲しい。

トップページへ戻るよう促す文章をイラストの下に入れようかと思ったのですが、そうだ！文字を動かしてみよう。
どうせならイラストにして、イラストにトップページへのリンクを貼って、イラストを動かそう！
でっきるっかな？でっきるっかな？はてさてふふ〜ん🎶

イラストを描いて、画像にリンクを貼るのは簡単ですね。
問題はその後、どう動かせば？
404用のウィジェットにテキストを入れるのですが、ここはHTMLって奴で書かないといけないんでしょうね。
できればCSSは使わないで済ませたい！

調べてみると、画像を動かす為にはCSSも使っているものばかり、う〜ん却下。
”文字を動かすHTML”で検索すると、いくつか見つかりました。
上下や左右に動くだけのシンプルなHTMLです。
何とか組み合わせて、バウンドしながらボールが行ったり来たりするイメージで、高さも微調整して……。

画像のHTMLと動かす為のHTMLをどうやって合体させるのかは、ちょっと悩みましたが、そこはじっくり見比べて……。
よし、文字が書いてある部分にそのまま画像のタグを入れてみよ。

＜初心者の覚書＞
初心者には画像のタグってどれ？です。
WordPressでは、ビジュアルエディターで作った画像ブロックを「HTMLとして編集」に変更すると、あら不思議、HTMLで書かれていますのでコピーしちゃいましょう。

コピペしてゴニョゴニョ……、お、出来た！画像が動きました。
画像の大きさや、動きの幅を調節したら完成！

せっかく作ったのに披露する機会が少な過ぎるので、このページでお披露目しておきます。
リンクも貼ってあるので、クリックするとトップページへ飛ぶんですよ。

HTMLはこんなに簡単。
ぐるぐる回転させたかったけど、多分、CSSが必要ですよね？

<marquee behavior=”alternate” direction=”up” height=”95″><marquee behavior=”alternate”>ここに文章や画像タグを入れる</marquee></marquee>

＊HTML5では、MARQUEEタグは廃止される予定です。
ブラウザによってはエラーが出る場合があるので、今後は別の方法で動かした方が良いです。
重要なページにはオススメしませんので……。

2つの画像を組み合わせると、こんなデザインに。
実際の404ページでは下部の”丸いの”が動くんですよ！
もし、このページに遭遇してしまった場合は、”動く丸いの”をポチッとして戻ってきてくださいね。

WordPressでブログを始めたばかりだけどチョット余裕が出てきた皆様、404ページもオリジナリティを出して、遊んでみましょう。
凝りすぎても虚しくなる（誰も見に来ないからね）ので、くれぐれも簡単なカスタマイズでね。