T.Takahashi bloggerで404エラーページをカスタマイズする 2017-06-23T04:59:01Z
０；ゼロからはじめる！

ブログカスタマイズ

bloggerで404エラーページをカスタマイズする

フローチャート

もし表示しているページがエラーページだったら？

YES:404ページを表示

NO:次の処理へ

実際の処理

b:if cond処理でdata:blog.pageType（現在のページ）がerror_page（エラーページ）かどうかを判定し、==（イコール）だったら404ページを表示させる。


<!--404ページ-->
<b:if cond='data:blog.pageType == "error_page"'>
      ・
      ・
    （404ページの内容）
      ・
      ・
</b:if>
<!--end 404ページ-->

追加する場所

html部分は<head>を探す。見つかったらしたのコードを追加する。


<!--404ページ-->
<b:if cond='data:blog.pageType == "error_page"'>
  <div class="error-page">
    <h1>404 Page Not Found</h1>
    <p>お探しのページは見つかりませんでした。</p>
    <p>Return Home</p>
  </div>
</b:if>
<!--end 404ページ-->

CSS部分は、]]></b:skin>を探す。見つかったらコードを追加する。


/* error-page CSS
------------------*/
.error-page{
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 45px;
    width: 100%;
    height: 100%;
}
.error-page {
    top: 30%;
    font-size: 25px;
    color: #666;
}
.error-page a {
    color: #666;
}
.error-page p {
 margin: 50px;
}
.error-page h1 {
    color: #46b8da;
    font-size: 50px;
    font-weight: bold;
}
.error-page a.error-home {
    background: #46b8da;
    color: #fff;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
}
.error-page a.error-home:hover {
    opacity: 0.5;
}

/* error-page CSS(ここまでを追加)
------------------*/

@media・・・

関連記事


スポンサーリンク

0 件のコメント :

コメントを投稿