【SANGO】404ページの画像をオリジナル画像に変更表示するカスタマイズ方法

WordPress SANGO(サンゴ)のカスタマイズ方法

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

WordPressのテーマ「SANGO」はデフォルトの状態でも非常に見やすく素晴らしいテーマですが、個別でより使いやすくカスタマイズするにはそれなりにCSSやPHPなどを編集していく必要があります。

今回はデフォルトの404ページで猫の写真が出ているものをオリジナルの画像に差し替えてサイトに合わせてオシャレに見せるカスタマイズ方法を紹介。

この記事を書いた人

カスタマイズの見た目の変化

このカスタマイズを行うと以下の画像のように変化します。画像を差し替えるだけでだいぶ印象がかわるよ✨

カスタマイズ前

WordPress 404 カスタマイズ

修正前のデザイン(デフォルト)

カスタマイズ後

WordPress 404 カスタマイズ

修正後のデザイン

このカスタマイズ方法について
手軽さ
(5.0)
難しさ
(2.0)
デザインの美しさ
(5.0)
総合評価
(5.0)

NORI

そんなにむずかしくないのでチャレンジしてみてね!
注意

カスタマイズは自己責任でお願いいたします。カスタマイズにチャレンジしたけどテーマが壊れた場合にはサポートができません。

content-not-found.phpを編集

親テーマ内にある entry-footer.phpを子テーマと同じ位置にコピーします。そしてこのファイルを修正していきます。

このサイトのソースコードはこちら。

差し替え画像のサイズ

404のところに入る画像サイズは 800 x 450 ピクセルになります。自分でデザインして入れたいときにはこの画像サイズで404エラー画像を作成してメディアに追加します。

404 エラー WordPress

画像が追加できたら、上のソースコード部分にある以下の部分のアップロードした画像のURLをコピペして保存します。

content-not-found.php 変更箇所

<img src="●●●ここに画像のURLを追加●●●">

これで完成です!

404の白い文字も削除したい場合

完全にオリジナルで404画像をわかるように作ってしまった場合には、画像の上に乗っている404の白い文字が邪魔になることもあります。

その場合には、11行目にあるソースコードを以下のように書き換えます。

content-not-found.php 変更箇所

<div class="nofound-img"><img src="●●●ここに画像のURLを追加●●●"></div>

そうすると404の文字が消えて画像のみが表示されるようになります。

今回のカスタマイズはこれで終了になります。
コピペして画像をアップしてURLを貼り付けて終わるのでかなり簡単に変更できると思います。

気になったらチャレンジしてみてね!

NORI

以上、NORI(@norilog4)でした。

WordPressのカスタマイズ依頼

WordPressのことならお任せください。サーバー設定からインストール、カスタマイズなどを有料で承っております。WordPressで作られたサイトの制作実績は以下お問い合わせページからご確認ください。

制作・カスタマイズ依頼をする

WordPress SANGO(サンゴ)のカスタマイズ方法 【SANGO】カテゴリーを英語から日本語に変更しアイコン表示するカスタマイズ方法
WordPress SANGO(サンゴ)のカスタマイズ方法 【SANGO】WordPressの固定ページのコメントのみ非表示にするカスタマイズ方法
WordPress SANGO(サンゴ)のカスタマイズ方法 【SANGO】WordPressの縦に長いコメント欄をクリックで開閉式にするカスタマイズ方法
WordPress SANGO(サンゴ)のカスタマイズ方法 【SANGO】SHARE(シェア)の部分の文字を別の言葉に変更するカスタマイズ

コメントの通知/購読設定
受け取る通知
guest

0 件のコメント
古い順
新しい順 評価順
Inline Feedbacks
全てのコメントを見る