QooQ 404エラーページのカスタマイズ【Blogger】

2020/07/31 投稿

2024/05/22 最終更新

今はもうなくなったURLにアクセスした時に表示される「404エラー」のページに画像を入れたりしてカスタマイズ。

デフォルトの404エラー（テンプレート：QooQ）

ちょっと寂しい…？

まぁ一応一言あるからこのままでも良いのかもしれないけれど何かねぇ…。という事でカスタマイズしてみる事にしました。

ざっくりな手順としては以下の通り。

投稿ではなく、ページで画像を入れたり文字をセンタリングしたりのデザインを考えます。なお、今回は既存のCSSを使うので、404ページだけの特別なCSSの追加はしません。

ちなみに私は、h1のタイトルで「404 Error」h2の見出しで「404 Not Found !」の文字を入れました。こうすると設定しているCSSで見出しの装飾がつきます。

出来上がっても公開しない仮ページなので、タイトルは入れても入れなくてもOKです。

ページで出来上がったHTMLをそのまま貼り付けても形にはなりますが、リンクの色など他のページと細かく揃えたい場合には、ちょっと手を加える必要がありました。

<h1 id="single-header-title">404 Error</h1>
 <div class="post-body" id="single-content">
 　＜!--★ページで作ったHTMLをここにコピペ--＞
 </div>

ページで作ったHTMLを <div class="post-body" id="single-content"> で括ってあげるのです。終わりの </div> もお忘れなく。

こうして出来上がったHTMLを、設定＞カスタム404にコピペします。

管理画面TOPのメニュー「設定」からちょっと下に行くと「エラーとリダイレクト」という項目の中に「カスタム404」があります。クリックすると小さなウィンドウが出てきますので、ここに手順２で作ったHTMLをコピペ。

こうして出来上がった404ページはこんな感じ。

基本的にあまり見ることのないページだとは思いますが、ちょっとでも和んでもらえれば。（そしてせっかくなので、別の記事を読んでもらえたら…）

なお、勉強不足の素人が試行錯誤したら出来た！というレベルなので、いろいろお詳しい方から見て「ここ変だよ」「こうするといいよ」という箇所があればご教授くださいませ。

当ブログ内、QooQカスタマイズ記事をまとめました