404 ページをカスタマイズしてみた

このサイトで使用している WordPress テーマ「Lightning G3」のデフォルトの 404 ページは以下のように表示されます。

このサイトのデフォルトの 404 ページ

なんらかの情報を得るためにサイトに来てくれた人に見てもらうコンテンツとしてはこの画面は不親切なのかもしれません。

その人がすぐに他のサイトに行ってしまい、もしかしたら大事な見込み客を逃してしまうことになるかもしれませんので、この 404 ページをカスタマイズしてみました。

カスタマイズした後の 404 ページはこちら ↓ です。実際に表示される 404 ページを こちら でご覧いただけます。

カスタマイズした後の 404 ページ

Lightning G3 で 404 ページをカスタマイズするには

Lightning G3 で 404 ページをカスタマイズするやり方はベクトルさんのオンライン学習サービス「ベクトレ」で解説されています。

ベクトレで説明されている手順に加えて、このサイトでは 固定ページの内容を 404 ページに表示するように アクションフックでカスタマイズしましたので、404 ページに表示する内容を以下のようにブロックエディターで容易に編集できます。

404 ページに表示するコンテンツ

Lightning G3 Pro Pack ならもっとかんたんです

有料版の Lightning G3 Pro Pack を使うと、以下のようにブロックエディターを使って 404 ページを追加・編集するだけで、ノーコードで超かんたんに 404 ページの内容をカスタマイズできます。

Lightning G3 Pro Pack を使うと、ノーコードでかんたんに 404 ページの内容をカスタマイズできます。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら G3 Pro Unit がおすすめ

Lightning G3 Pro Pack
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの作成担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。
【CSS だけ】アコーディオンを実装しました (Lightning 無料版)
カテゴリー
カスタマイズ

JavaScript を使わずに CSS だけでアコーディオンを実装するやり方を紹介します。

ヘッダーロゴ画像のリンク先を変更するやり方
カテゴリー
Lightning G3カスタマイズ

フックが豊富な Lightning G3 でも、ここにはフィルターフックが用意されていなかったので、jQuery を使ってカスタマイズしました。