「Blogger」File not found 404のページをかっこよくしたい
 |
「Blogger」管理画面では、テキストのみ入力できるような雰囲気がありますが、実はスタイルシートや画像を貼り付けることができます。
今回はそのやり方を説明していきたいと思います。
Bloggerブログの「エラー」時の設定をする
Bloggerの管理画面を開き、「設定」をクリックします。
 |
設定ページに移動後、下へスクロールしていくと「エラーとリダイレクト」という設定項目があります。
 |
上の画像は、このブログで設定されている「カスタム 404」の内容が表示されています。
ご覧の通り、<br>なども利用できることがわかるでしょうか。
この中には、画像のURL（<img src="○○.jpg">）を貼り付けることもできますが、スタイルシート（CSS）も設定できます。
テキストとスタイルシートでデザインしたい
以下の画像は、このブログの現在の「File not found 404」が表示されるページです。テキストとスタイルシートのみにしているため、とても読み込みが早く軽いです。
 |
下のコードのように入力すれば、上の画像のように表示されます。
<div style="text-align: center;">
<p style="font-size: 150px; font-weight: bold; line-height: 150px; margin: 0px;">404</p>
<p style="font-size: 30px; margin-top: 20px;">お探しのページは見つかりませんでした。</p>
<p>アクセスしようとしたページは削除されたかURLが変更されているため、見つけることができません。</p>
</div>
難しいことをしなくても、割と簡単にかっこよくできるので、興味があったら試してみてください。
画像を「カスタム 404」に貼り付けるには？
今回貼り付ける画像は以下の画像です。
 |
この画像と共に、テキストを表示したいと思います。
一度、貼り付けたい画像をブログの投稿記事内に貼り付けます。
次に、編集モードを「HTMLビュー」に変更して、画像のHTMLタグをコピーします。
※ブログ内の画像フォルダにアップロードしたいため、このようなことをします。
画像をHTMLタグを取得したら、あとは簡単、「カスタム 404」の説明欄に貼り付けるだけです。
上の画像のパスを選択する際、以下の範囲を選択することをオススメします。
中には、認識できないタグがある場合もあるので、画像のみのタグになるように加工しましょう。
<img border="0" data-original-height="527" data-original-width="1054" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggs5XkS-9SDZBVaCKn8rdUtURxeyf2Stqc5ok9OmlXApdf_tPCgWGGf0omfvXorz_Y8iHnwgw3QmVhW5VixLxcEjCuFsUPK-E_x_la7VEKcrK1oqLNGt2LKug7tHWra6CcxiEVgYhVkXx2Ltthl82hMGOsPYUsd3sMp-0WnLCEp_6Rxb-NiMAsDmg/w640-h320/404.jpg" width="640" /><br>
＜以下、説明文を追加する＞
以上の内容を追加できたら、実際にブログのエラーページを表示させて、確認してみてください。
 |
以上のように、画像がエラーページ内に、画像がレイアウトされた状態になりました。
※画像が異なりますが、ほぼこんな感じで貼り付けることができます。
とても簡単ですし、エラーページも少しデザインしたいと考えていたら、試してみてください。
