• TOP
• ブログ

＜Blogger設定記④＞404エラーページをカスタマイズしたはなし

2019-12-05T00:00:00+09:00 2019-12-29T05:41:07Z Blogger カスタマイズ ブログ

URLを直入力したときとか、そもそも著者側がリンク設定を間違えていたときなんかに出る「404 not found」のエラーページ。

企業によっては遊び心があるものにしていたりなんかして、ひそかに人気みたいです。
わたしもかわいい画像くらい貼りたいと思います！


まぁマジメなはなしをすると、エラーページが表示されちゃった場合は機会損失にならないように（ほかのページも見てもらえるように）、サイト内へのリンク集みたいなのを一緒においておくのがいいって趣旨なんですけどね。

このサイトは個人が趣味で運営しているモノなので、そこまでガチじゃないカンジで。

とりあえず、

• 「存在しないページだよ」ってことがわかって、
• せめてトップページにでも戻ってもらえれば

万々歳かな。

ではいきます！

ビフォーアフター

ビフォー

ワードプレスのときの404エラーページ

「ZELO」デフォルトの404エラーページ

アフター

Bloggerでオリジナルの404エラーページを作る方法

※設定→検索設定　から入る「カスタム404ページ」を更新するのではうまくいかなかったので、HTMLを直接編集しています。

①いいカンジの404エラー画像をさがす

わたしは「404　画像　フリー」とかで検索しました。

ねこが好きなので、”ねこが金魚鉢に手をつっこんで、手が濡れてしまってアウチ××”みたいなイラストに。

②「ページ」で404ページのデザインをする

ページ

　→　［新しいページ］

で、404ページのデザインをします。

イメージとしては、

1. タイトル　：　404 NOT FOUND
2. アイキャッチ　：　①でさがした画像
3. 定型文　：　「お探しのページは見つかりませんでした」など
   （わたしは画像に著作権があったのでその表示も足しています。）
4. トップページへの移動を促したり、
5. サイト内検索窓
6. 新着記事や人気記事など

を掲載したいところです。

とりいそぎ、４つめまで載せてみましたー。

が。

Bloggerのしばりで、カスタム404ページの文字数は10,000文字までなんですよね～。

コード書いてたらあっとゆー間に到達しそう(´；ω；`)ｳｯ…

③デザインしたページのHTMLをコピーする

左上の［作成］［HTML］から、［HTML］を押して、英数字の羅列をすべてコピーします。

④HTMLを編集する

テーマ
　→　「・」がたてに３つ並んでいるメニューを選択
　→　HTMLを編集

        <!--404ページ-->
        <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
          <div class='404'>
            <h1>404 Page Not Found!</h1>
            <!-- 画像はここに挿入 -->
            お探しのページは見つかりませんでした&#12290;<br/>
          </div>
        </b:if>

上記の記載の、<div>～</div>の間に、コピーしたHTMLを挿入します。

　→　保存


サイト内検索や、新着記事・人気記事を載せるカスタマイズは、またそのうち～。