トフでもできる!? 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>

このようになりました!
ページ内できちんとリンクが貼られていればあまり見ることのないページですが、ドメインの後ろに適当な文字列を入れて、確認してみてくださいね。

サンプルを見る