トフでもできる!? Movabletype.netテーマ開発

もくじに戻る

404ページを作ろう!

ここまでで、大体のページと作り方を習得しました。
ですが…デザイン>テンプレート内に、もう1つシステムテンプレートがありますね。
システムテンプレートには存在しないページをリクエストした場合に表示される、「404ページ」が用意されています。
これを設定しないと、なんとも味気ないエラーページが出てしまいます。

サイトを見ている人がビックリしちゃうかも!?

びっくりトフ

404ページも、サイトに合わせたデザインのものに作り変えましょう!今まで使ったタグやモジュールを使えば、カンタンなはずです♪
ウェブページから、必要なヘッダーやフッターのモジュールをコピーしてきましょう。

ヘッダー、フッターをモジュールに置き換えて…と

タグをもってきたトフ

最終的なタグはこうなります。

<body>
<$mt:Include module="header"$>
  <section class="UL-mainImage">
    <div class="mt-container">
      <h2 class="UL-mainImage__title">
        <i class="fa fa-frown-o"></i>
        404 notfound
      </h2>
    </div>
  </section>
  <main class="pages-wrap">
    <div class="mt-container">
      <div class="notfound-textArea">
        お探しのページは見つかりませんでした。
      </div>
    </div>
  </main>
<$mt:Include module="footer"$>
</body>

このようになりました!
ページ内できちんとリンクが貼られていればあまり見ることのないページですが、作成しているサイト・ブログのURLに、存在しないページ名を入れると確認することができます。

サンプルを見る