Bloggerの404エラーページを設定する【画像を設置】

404ページを確認するには、自分のブログのTOPページにアクセスした後、URLに『/』とランダムな文字列を追加して検索して見ましょう。

このブログの場合、次のように入力すると404ページを見ることができます。

Bloggerの管理画面にアクセスし、ログインします。

>>Blogger.com

『設定』→『検索設定』→『エラーとリダイレクト』の項目に『カスタム404ページ』があるので、編集をクリックします。


すると、404ページを編集するためのスペースが表示されます。

このスペースに入力したものが、404ページとして表示されます。


また、このスペースではHTML形式の入力ができます。

一番シンプルに表示したいなら、ここに次のテンプレを貼り付けましょう。

<div style="font-size: 24px;">404 NotFound!</div>
<br/>
<div>お探しのページは見つかりませんでした。<div>

404ページに画像を設定

404ページではHTML形式の入力ができるので、CSSと組み合わせてカスタマイズすることもできます。

しかし、画像を使うことでより簡単に柔軟なカスタマイズが行えます。

404ページに画像を設定するには、まず使いたい画像をアップロードします。

Bloggerの管理画面から『ページ』へ移動し、新しいページを作ります。


新しく作ったページに使用したい画像を貼り付けて、保存しましょう。

このページは、公開する必要はありません。

画像を貼り付けた後、記事作成画面を『HTML』に切り替え
、HTML、CSSで編集を加えましょう。


HTMLで記入したあと、『作成』に切り替えることで、どのように表示されているか確認できます。

今回は画像に加えて、『TOPページに戻る』ボタンをつけてみました。

あとはこのコードを全て選択してコピーし、404ページのスペースに貼り付けましょう。

『TOPページに戻る』ボタンのコードを載せておくので、参考にしてください。

<div style="clear: both; text-align: center;">
<a href="ブログURL" style="background-color: #34cce0; color: white; font-weight: bold; padding: 1em 2em; text-align: center; text-decoration: none;">TOPに戻る</a>
</div>

ブログURLの部分は、自分のブログのURL

また、404ページで使用している画像は『Canva』で作成しました。

Canvaの使い方はこちらをご覧ください。

>>【アイキャッチ作成の決定版】Canvaの登録方法と使い方

Bloggerの機能を利用することで、とても簡単に404ページを設定することができます。

テーマによっては設定できないものもあるようなので、きちんと設定できるか確認しましょう。

Bloggerの新テーマ【Orange ZELO】では、Bloggerの機能を使って404ページをカスタマイズすることができます。

詳しくはこちらの記事をご覧ください。

>>Blogger最強テーマ【Orange ZELO】の機能・特徴を紹介します