行き着く先はあんこ

Bloggerの404エラーページをカスタマイズする方法

blogger-404page-customize

ブログのページが存在しない時に表示されるのが404エラーページ。

「このページは存在しません。」と何の味気もない文字だけが表示されたら、ほとんどの人は即戻るボタンを押すに違いありません。

そんなユーザーをそのまま帰すなんてもったいない。うまいこと自分のブログを見てもらうように404エラーページをカスタマイズしましょう。

スポンサーリンク

2通りの設定方法

Bloggerで404エラーページをカスタマイズするのには、2通りの方法があります。Bloggerの設定画面から編集する方法と直接HTMLを編集する方法です。

それぞれ順番に解説していきます。

Bloggerの設定画面から

この方法はHTMLを編集せずに設定できるため、HTMLをいじるのが得意でない人におすすめです。

まず、404ページに表示させたい内容を書きます。ことのき、普段記事を書いているページで書いてください。画像もいつもどおり使えます。

内容が完成したら、左上の「作成」を「HTML」に変更します。そして、表示されたものをすべてコピーします。

Bloggerの左上で「HTML」に変更する。

次にBloggerの「設定」→「検索設定」→「カスタム404ページ」に先ほどコピーしたものを貼り付けます。

先ほどコピーしたものを「カスタム404ページ」の枠に貼り付ける。

最後に「変更を保存」を押して終了です。

直接HTMLを編集

Bloggerには404ページのときのみ動作するコードがあります。

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<!--404ページのみ動作する内容-->

</b:if>

これを使うことで404ページが表示されたとき、思い通りのカスタマイズができるようになるわけです。

一例ですが、このブログの404エラーページは次のように設定しています。

もととなったテンプレートは、先日このブログのデザイン変更に使った「Revoltify 2」。

関連記事ブログデザインを大幅にリニューアルしました

HTML(<body>のすぐ下に入力)

<!--404ページ-->
<b:if cond='data:blog.pageType == "error_page"'>
 <div id='error-page'>
  <div id='error-text'>
     <span>404</span>
   <p>Oooooops!<br/>Page Not Found</p>
   <p><a class='error-home' href='/'>Homepage</a></p>
  </div>
 </div>
</b:if>

css

/*css404ページ*/
#error-page {
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 45px;
    position: fixed;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
    z-index: 9999;
}
#error-text {
    top: 30%;
    position: relative;
    font-size: 40px;
    color: #666;
}
#error-text a {
    color: #666;
}
#error-text p {
 margin: 0;
}
#error-text span {
    color: #f78297;
    font-size: 100px;
    font-weight: bold;
}
#error-text a.error-home {
    background: #f78297;
    color: #fff;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid #fff;
    line-height: normal;
    text-transform: uppercase;
    transition: all 0.5s ease-out;}
#error-text a.error-home:hover {
    background: #fff;
    color: #e59610;
    border: 1px solid #f78297;
}
#error-text a.error-home:active {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    background: #f56c7e;
    color: #fff;
    border: 1px solid #f78297;
}
@media only screen and (max-width: 640px){
#error-text {
    color: #8c949d;
    font-size: 20px;
}
#error-text span {
    font-size: 60px;
}
#error-text a.404page-home {
    padding: 5px 10px;
    font-size: 15px;
}
#error-text a.error-home:hover,#error-text a.error-home:active {
    border:0;
}}

404ページが完成したら、念のため確認も忘れずに。

さいごに

今回は忘れられがちな404ページの設定方法を紹介しました。BloggerにはHTMLを直接編集しなくてもいい機能があり、気軽に設定できるので、まだしてなければぜひとも挑戦してみてください。

あと、勉強としていろんなサイトの404ページを見てみるのも結構楽しいですよ。

では!

スポンサーリンク

スポンサーリンク

コメントを残す