[CSS][WordPress]CSSだけで動きのあるページを作れるAnimate.cssが凄い!なので404ページを作ってみた

  • このエントリーをはてなブックマークに追加
  • トップへ
  • このエントリーをはてなブックマークに追加

404page

Hello World with a Big Smile (^^) @conchikuwaです。

最近のCSSは凄いですね。javascriptいらずで動きのあるページを作ることができちゃいます!って事で僕も早速動きのある404ページを作ってみました。ちょっと手こずった部分もありますが、比較的簡単に実装する事ができると思います!!では、早速ご紹介を!!

404ページはページが無かった時に表示される表示されるページなので、まぁ基本的に表示されたらイカンわけですが、URL直打ちした時に打ち間違いする事もあると思うので、あった方がユーザビリティ的にもいいわけです。

で、せっかく作るなら↓で紹介されているみたいなちょっと遊びココロのある404ページにしたいなと。

日本のWebサイトの404ページデザインいろいろ+α – かちびと.net
いつもありがとうございます!!

▼ Webクリエイターボックスさんもちゃんと用意されてますしね。

Webクリエイターボックスのデザインをリニューアルしました! | Webクリエイターボックス
かわいい404ページだこと!

▼ 最近@OZPAさんも作られてました。

404ページをWordPressで作成する手順と、「All in One SEO Pack」を使用している際の注意点 | OZPAの表4
いつもありがとうございます!!

遊びココロのある404ページといってもどうしようかなといろいろ調べてたら見つけたのがいつもお世話になっているコリスさんの↓の記事!!

animation-nameを変更する事で、動きを変えることができます。ちなみにanimation-delayは動きを開始する時間の指定なので、.content-404-headと.content-404-bodyで少し時間を変えて、「404 PAGE NOT FOUND」表示されてからテキストとトップへ戻るボタン、検索窓がフェードインしてくるように調整しております。

あと一応スマホだとanimation-nameにlightSpeedInに指定するとレイアウトがどうしても崩れてしまうので@mediaを使用してbounceInLeftが適用されるようにしております。

また画像は一切使っておらず、エンボスちっくな「404 PAGE NOT FOUND」もトップへ戻るボタンもCSSだけで装飾してみました。

ソースを見ていただければわかると思いますが、ホントCSSだけで動きをだしております!!いやまじCSS凄いよ!

あっちなみにIEには非対応です(^_^;)
Modernizr」ってのを使えば対応できるようですが、ECサイトでもないし、ブログなんでまぁいいかなと。

あとがき

週末の合宿中にニヤニヤしながら実装していて、個人的にはなかなか良い感じの404ページが出来たかなと思うのですがいかがでしょう。

CSSだけなので比較的簡単に導入できると思います。うちのソースをTPPしていただいても結構ですし(^^♪

ちょっと動きのあるページを作ってみたいけど、javascriptよーわからん、できれば簡単にできたらいいなって方がいらっしゃいましたら、ぜひ一度お試し下さいませ。。。

ではでは。。。

,

コンチクワブログのRSS & ソーシャルページ