Bloggerテンプレート「Vaster2」で記事っぽい404ページの作り方


 Vaster2にて「404 Page Not Found.」というエラーが表示された場合の、ページの作り方を解説しています。雛形があるのでコピペでOKです。

404ページを舐めるべからず


 404ページを設定していないブログは、絶対に損をしています。

「何を馬鹿な……」という声が聞こえてきそうですが、論より想像。以下の問題について、考えてみてください。

Q.次に自分が何をするかイメージしよう
1,休日、暇なのでネットサーフィンをしていた。
2,とあるブログ記事のリンクを見つけ、タイトルに興味を惹かれる。
3,URLをクリックしてみると、肝心の記事が出てこない。
4,該当の記事が削除されたか、URLが変更されたことに気づく。
5,僕は○○をした。


 さて、皆さんは5番目に何をしますか?

 回答はありませんが、僕なら……、

「さっさと、そのブログを離れる」

 ですね。理由は以下の通りです。

「わざわざ探すのが面倒くさい」
「情報発信系ブログなら、他に似たような記事なんかいくらでもある」

 自分で言うのもなんですが、至極当然の行動かと思います。

 しかし、404ページがあったらどうでしょうか?

 ……って、この記事を来ている人はたぶん、404ページを作りたくて読んでいるんですよね。無粋な話は最後にして、とっとと作り方に移りましょう!

404ページに置く文章を考えよう



 まずは記事作成ページで、404ページに表示させたい文章を作ります。


<!--404ページ-->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='entry-content'>
<div class='date-outer'>
  <h1>404 Page Not Found.</h1>
<!--画像を入れたいなら、ここに挿入-->
<br />
 お探しのページは見つかりませんでした。<br />
<br />
<h2>
目的のページを探すには?</h2>
<br />
 いつも当サイトをご利用いただきありがとうございます。<br />
<br />
 大変申し訳ございませんが、お探しのページは削除されたか、URLが変更されています。お手数ですが、以下の方法で目的のページをお探しください。<br />
<br />
<fieldset>
<div style="line-height: 1.4;">
<br />
・ブログ内検索機能を使う<br />
・カテゴリから探す<br />
・人気記事、関連記事などから探す<br />
・連絡フォームで問題報告をする<br />
<br /></div>
</fieldset>
<br />
 これからもよろしくお願い致します。<br/>
</div></div>
</b:if>
<!--404ページここまで-->


 上のコードは雛形として使ってください。最低限の文章しかありませんので、主に内部リンクを充実させてください。

 完成したらHTMLモードにして、内容を全部コピーします。

タグの解説


 今回divタグで使用しているclassを解説します。

 自分も試行回数を重ねて作っただけなので、間違ってるかもしれませんが、今後のブログカスタマイズの参考になれば幸いです。

【entry-content】
 記事ページの見出しデザイン。

【date-outer】
 おそらく、記事ページのデザイン設定かと思われる。

【main-outer】
 下記で取り扱うclass名。
 おそらく、ボディのメイン領域(左側に表示される)と思われる。

404ページを貼り付ける


「管理画面」 → 「テンプレート」 → 「HTMLの編集」と移動して、以下の文字列を探します。

        <!--コンテンツ部分-->
        <div class='main-outer'>

 見つかったら、その下にコピーした文章を挿入しましょう。

 テンプレートを保存し、実際に何かしらのエラーページに飛んで、表示を確認します。



 思った通りに表示されていたら、完成です。

 ちなみに、エラーページを出す1番簡単な方法は、ブログ内検索ガジェットを使うことです。何も入力せずに検索ボタンを押すと、飛んだ先のURLがエラー扱いになっています。

 検索ガジェットを設置していない場合は、URLに滅茶苦茶テキトーな文字を入力して、エンターキーを押しましょう。

タイトルを「404 Page Not Found.」にする


 せっかくそれっぽいページを作ったのに、ページタイトルが「|ブログ名」と表示されているのが格好悪いですよね。

 というわけで、タイトルもそれっぽくしましょう。


<!--404ページのタイトル-->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>
404 Page Not Found.|<data:blog.title/>
</title>
</b:if>

 上記のコードを、<head>内にある<!--ブログタイトル-->の、一つ上に挿入するだけでOK!

巡回率を上げる404ページを作るコツ


 冒頭で「404ページは大切だ」と書きましたが、ただ「エラーページですよ」と報告しているだけでは意味がありません。

 良い404ページを作るには、以下の要素を満たす必要があります。

・ページが表示されない理由を説明する
・ページを探す方法を教える
・サイトマップへのリンクや、検索ガジェットなどを置いて内部リンク対策をしておく

 特に重要なのは、内部リンクです。ぶっちゃけ目当ての記事を探させるのが目的ではなく、「俺のブログには良い記事がめっちゃあるぞー!」とアピールしまくるのに意味があるんです。

 要は「いかに、別の記事に注目させるか」の工夫が大事、ということですね。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

Vaster2にて「404 Page Not Found.」というエラーが表示された場合の、ページの作り方を解説しています。雛形があるのでコピペでOKです。

コメントを投稿

[disqus]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.