ホーム / 日本語表記 /

Bloggerブログ|simplify2|404NotFoundエラー表示を変更

simplify2 日本語表記

投稿2019年6月1日 更新



記事の削除後にその記事にアクセスされると404Not Foundエラーが表示されますが、simplify2のデザインは少し刺激的なので変更しました。そのついでに英語を日本語に直しました。

変更前
変更後

もくじ

日本語（拙訳）


拙訳1
THE PAGE COULD NOT BE FOUND

The page you are looking for might have been removed had its name changed or is temporarily unavailable

Please try the following :

If you type the page address in the Address bar, make sure that it is spelled correctly.

Click here to return to our main page.

If you were linked to this page, contact the administrator and make them aware of this issue.

お求めの記事は表示することができません。


この記事は削除されたかアドレスが変更になったか一時的にご覧いただけない状態となっています。


お手数ですが以下の項目をお試し下さい。

アドレスバーにURLを入力された場合は綴りが正しいかどうかご確認ください。


こちらからブログトップページに移動をお願いします。

外部リンクからこのページにお越しになったようでしたら、そのリンクが貼られているページの管理者の方にリンク切れとなっていることをお知らせください。

拙訳2
この記事は削除したか一時的にご覧いただけない状態となっています。
お手数ですがこちらからブログトップページに移動していただき、お探しの記事と類似した内容の記事をお探し下さい。



文章を変更


HTMLの記述を変更します。検索ワードは
<div class='container404'>
です。
「テーマ」→「HTMLの編集」と進みctrl+Fで検索欄を出しそこに貼り付けます。

変更するのは以下の白字のところです。
<b:if cond='data:blog.pageType == "error_page">
<div class='container404'>
<div class='boxi404'>
<h2>404</h2>
<h3>The page could not be found</h3>
<hr/>
<p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p>
<p>Please try the following :</p>
<ul>
<li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li>
<li>Click <strong><a expr:href='data:blog.homepageUrl'>here</a></strong>to return to our main page.</li>
<li>If you were linked to this page, contact the administrator and make them aware of this issue.</li>
</ul>
</div>
<div class='copyright404'>
© 2016 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved.
</div>
</div>

変更後
<b:if cond='data:blog.pageType == "error_page">
<div class='container404'>
<div class='boxi404'>
<h2>404</h2>
<h3>お求めの記事は表示することができません。</h3>
<hr/>
<p>この記事は削除されたかアドレスが変更になったか一時的にご覧いただけない状態となっています。</p>
<p>お手数ですが以下の項目をお試し下さい。</p>
<ul>
<li><strong>アドレスバー</strong>にURLを入力された場合は綴りが正しいかどうかご確認ください。</li>
<li><strong><a expr:href='data:blog.homepageUrl'>こちらから</a></strong>ブログトップページに移動をお願いします。</li>
<li>外部リンクからこのページにお越しになったようでしたら、そのリンクが貼られているページの管理者の方にリンク切れとなっていることをお知らせください。</li>
</ul>
</div>
<div class='copyright404'>
© 2019 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved.
</div>
</div>


背景の赤が刺激的すぎるので次項でsimplify2のタイトルバーの色に変更してみます。

デザインを変更


スタイルシート部分を変更します。検索ワードは
.container404
です。
.container404の一つ上のbodyから.boxi404 h2{display:none}}までが404Not Foundエラーに関する記述です。


一番上の
body{background:#fa4949;
を
#2c4584
に変更すると以下の色に変わります。

使用しているデバイスの幅によると思いますが、画面の下の方が切れて表示されていたのでついでに直します。
.boxi404
の中の
padding:20px;font-size:110%;
を削除するとすべての文字が収まります。 これで十分だと思いますがなんとなく味気ないのでさらに手を加えてみました。


変更後のHTML 　
<div class='container404'> <div class='boxi404'> <h2>お求めの記事は表示することができません</h2><br/> <div> <img data-original-height="1200" data-original-width="1600" height="240" src="画像のurl" width="320" /></div> この記事は削除したか一時的にご覧いただけない状態となっています。<br/> お手数ですが<strong><a expr:href='data:blog.homepageUrl'>こちら</a></strong>からブログトップページに移動していただき、お探しの記事と類似した内容の記事をお探し下さい。 </div> <div class='copyright404'> © 2019 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved. </div> </div> </b:if>

変更後のcss 　
body{color:#0040d1;}
.container404{margin:1% ;max-width:1024px;min-width:200px;line-height:normal;font-size:16px;backface-visibility:hidden;position: fixed;bottom: 5%;left: 5%;right: 5%;text-align: center;}
.boxi404 hr{background:transparent;display:block;border:none;border-bottom:4px solid rgba(255,255,255,.3)}
.boxi404{color:#0040d1;}
.boxi404 h2,.boxi404 h3{font-weight:700;font-size:100%;text-transform:uppercase;}
.boxi404 p{display:block;margin:10px 0}
.boxi404 ul li{margin:0 0 8px 20px;list-style:initial;list-style-type:square}
.boxi404 ul li a{color:#0040d1;}.boxi404 ul li a:hover{background:rgba(0,0,0,0.1);color:#0040d1;text-decoration:none;}
.copyright404{display:block;margin:auto;font-weight:normal;max-width:768px;min-width:200px;padding:0 20px}
.copyright404 a,.copyright404 a:hover{color:#0040d1}
@media screen and (max-width:1024px) { .boxi404 h2{font-size:100%;}}

Bloggerブログ特有のタグ


HTMLのルールでは「bodyタグは一度だけ使用することができる」とされていますが、Bloggerブログ（xml）はそうではなく、bodyタグの使い分けが可能なようです。

テンプレートにもよると思いますがbodyタグが複数存在する場合があり、simplify2では今回取り上げた404NotFoundに関する表示はエラーページのbody内に設定されています。

通常時に表示されるページは以下のタグの間に記述？
　
<b:if cond='data:blog.pageType == "static_page"'></b:if>


エラーページの場合は以下のタグの間に記述？
　
<b:if cond='data:blog.pageType == "error_page"'></b:if>


404の背景色を変更する際に該当箇所を探すのに手間取ったためメモしておきました。

画像の紹介


今回使用した画像はイラストACさんでダウンロードさせて頂いた「なのなのな」さんの作品です。
なのなのなさんは同じキャラのいろいろなポーズをお描きになっているので、ブログで使用する際に統一感が出しやすく、きっと重宝すると思います。
イラストACさんの画像をダウンロードするにはアカウントの開設が必要になりますが、googleアカウントでログインできるのでBloggerブログを利用している方にはおススメです。
（Bloggerブログ利用者は必ずgoogleアカウントが必要）
ダウンロードするとクリエーターさんにお金が入る仕組みになっているようなのでぜひ利用してみて下さい。
すべて無料でダウンロードできますよ。

QooQ