2015年5月29日

404ページをカスタマイズする。Bloggerでは自分でカスタムできます。

スポンサードリンク

 当ブログ内に、無いページURLを検索した時。
または、以前あったけれども、何らかの理由で削除された時。

そのページに対して404を返すようになっています。

その404ページを、見やすく変えましょう。



404ページを自分のサイトのテンプレートで作る



 Googleのカスタム404ページのツールがあります。
が、そのページがなぜか今見られない状態になっています(2015/5/29)。

おそらく一時的だと思うのですが、
URLは載せないでおきます。


 しかし、当ブログの404ウィジェットは機能しています。

という事で、
Googleが提供しているカスタム404ページの
ウィジェットコードはこちらです。


<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'ja';
  var GOOG_FIXURL_SITE = 'http://あなたのページURL'
</script>
<script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>


 このウィジェットの素晴らしい点は、
自分のサイトのテンプレートを利用して、
404ページを表示してくれる事です。


 もちろん、他に言葉を追加して
より分かりやすいページにする事もできます。

CSSを指定して、
見栄えを良くすることも出来ます。


 WordPressをご利用の方はよく使われていると思います。
便利なので、おすすめします。

ひょっとすると
ご契約のレンタルサーバーで404ページを
使っている方も多いのでしょうか?

もちろん、どちらでも構いません。


無料ブログBloggerは404ページをカスタムできる



 一般的な無料ブログでは、
404ページのカスタムは出来ない事もあります。

Bloggerは404をカスタムできて、ありがたいです。


 という事で、当ブログでも指定しています。
コードはこのようにしています。



<br>
 お探しのページはありませんでした。
<br><br>
<a href="http://トップページURL" title="トップへ戻る" style="  display: inline-brock;
  background:#c1e5ff;
  padding: 5px 5px;
  margin-top: 10px;
  border-top: 1px solid #DCDDDD;
  border-radius: 10px;
  font-size:140%;
  font-weight:bold;">トップページはこちら</a>
<br><br>
<br><br>
 URLが違っているかも?<br />
別のURL候補から検索してみたい場合はこちら。<br />
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'ja';
  var GOOG_FIXURL_SITE = 'http://トップページURL'
</script>
<script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>
<br><br><br><br><br><br>
          <style>#blog-pager { display:none !important; }</style>



 <br>を多用しています。
このへんは、段落にするなど
皆様良いように変えて下さい。


 ちなみに、完成した404ページはこのようになっています。
こちら。

http://custom.rabbitshimako.com/2010/05/blogger.html


 このページは404です。
なぜなら、当ブログは2014年からスタートしているのに、
2010/05…となっているからです。

そのようなページは存在しないのですね。


 さらに色々言葉を追加して、
よりわかりやすい内容にしています。

が、もっとシンプルでも良いかもしれません。


 CSSは、テンプレートではなく、
このコード内に埋め込みました。

style="  display: inline-brock;
  background:#c1e5ff;
  padding: 5px 5px;
  margin-top: 10px;
  border-top: 1px solid #DCDDDD;
  border-radius: 10px;
  font-size:140%;
  font-weight:bold;"

ですね。

こちらも皆様のサイトに合うように、
変えてみてください。



 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク