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

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

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


1)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>


2)<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

このブログの人気の投稿

書字方向 横書方向変換スクリプト 左書きから右書きへ(コピペ用途)

PowerShellのGetDetailsOf メソッドでプロパティの詳細情報のID番号と項目名を列挙します

PowerShellで複数ファイルのプロパティを取得する方法(準備編)

簡単 YouTube動画をダウンロード、音声のみ保存する方法 2019

DOMノードオブジェクトを文字列に変換する

ヤバい!JAPANNEXT WQHD対応 27型ワイド液晶ディスプレイ「JN-IPS2716WQHD」を注文してみた!!!

PowerShellでJPG画像のリサイズとウォーターマーク画像との合成を同時に行う

決定版 Edgeでローカルファイルを開く パワーシェルスクリプト (ウインドウズでドロップレット)