Blogger このブログ内でお探しのページは存在しません。の不具合

Custom 404 Page Not Found For Blogger Blogspot status-msg-body をカスタマイズ

2017年に追加された新しいテンプレートで記事がなかった場合のエラーメッセージ（ページ）をスマホでみるとメインエリア(main)がサイド（aside）にケラれて消えてしまうバグを解消。

１）asideをdisplay:none;する

テンプレートに赤色を追加して、エラーページの時はサイドを強制的に隠す

ついでにメッセージが表示される親要素にclassを追加する

          <b:include name='super.main'/>
                      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
                          <b:class name='status-msg-body'/>
                          <style type='text/css'>
                              aside { display: none; }
                          </style>
                      </b:if>

２）<body>タグにclass名（error-view）を追加する

テンプレートに赤色を追加して、エラーページの時はクラス名を追加する

  <body>
    <b:class cond='data:blog.pageType == &quot;error_page&quot;' name='error-view'/>

あとはCSS　スタイルシートで調整する

body.error-view #blog1 {
    width: 100vw;
    background-color: #729c0b;
}
body.error-view .status-msg-body {
    color: #ffffff;
    box-sizing: border-box;
    margin: 32px 0px 16px;
    padding: 12px 16px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}

Custom 404 Page Not Found For Blogger - Customization / XHTML/JavaScript - Blogger Help Forum