phoenix-powerOctopress Blog にオリジナルの 404 Page を作りました。

http://syui.github.io/…

作り方は簡単で、/path/to/octopress/source以下に404.mdまたは、404.htmlを置きます。

Markdown で書く場合は、以下のコマンドより書式の一部を作成できます。

1
$ rake new_page\[404.md\]

書式は、以下の通りです。

  layout: page
  title: "404 Page Not Found"
  comments: false
  sharing: false
  footer: false
  published: true

私は、元の 404 Page を参考にしましたので、 HTML で書きました。

source/404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page not found &middot; GitHub Pages</title>
    <style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }

      a { color: #4183c4; text-decoration: none;}

      a:hover { color: #990000;}

      h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
      p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }

      ul { list-style: none; margin: 25px 0; padding: 0; }
      li { display: table-cell; font-weight: bold; width: 1%; }

      .logo { display: inline-block; margin-top: 35px; }
      .logo-img-2x { display: none; }
      @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (   min--moz-device-pixel-ratio: 2),
      only screen and (     -o-min-device-pixel-ratio: 2/1),
      only screen and (        min-device-pixel-ratio: 2),
      only screen and (                min-resolution: 192dpi),
      only screen and (                min-resolution: 2dppx) {
        .logo-img-1x { display: none; }
        .logo-img-2x { display: inline-block; }
      }

      #suggestions {
        margin: 35px;
        color: #ccc;
      }

      #suggestions a {
        color: #666666;
        font-weight: 200;
        font-size: 14px;
        margin: 0px 10px;
      }

      #suggestions a:hover {
        color: #428bca;
      }

span.icon-phoenix {
  color: #428bca;
  font-size: 40px;
  margin:10px;
}

span.icon-phoenix:hover {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  color: #990000;
}

    </style>
<link rel="stylesheet" href="/fonts/icomoon.css">
  </head>
  <body>

    <div class="container">

      <h1>404</h1>
      <p><strong>There isn't a GitHub Page here.</strong></p>

      <p><em>Are you trying to publish one?</em>
        It may take up to ten minutes until your page is available.
      </p>

      <div id="suggestions">

      </div>

      <a href="/"><span class="icon-phoenix"></span></a>

    </div>
  </body>
</html>