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

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

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で作られたサイトの制作実績は以下お問い合わせページからご確認ください。

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

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

コメントを残す