行き着く先はあんこ

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

2016.3.19

ブログのページが存在しない時に表示されるのが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ページを見てみるのも結構楽しいですよ。

では!

スポンサーリンク

スポンサーリンク

コメントを残す