WordPressのテーマ「SANGO」はデフォルトの状態でも非常に見やすく素晴らしいテーマですが、個別でより使いやすくカスタマイズするにはそれなりにCSSやPHPなどを編集していく必要があります。
今回はデフォルトの404ページで猫の写真が出ているものをオリジナルの画像に差し替えてサイトに合わせてオシャレに見せるカスタマイズ方法を紹介。
カスタマイズの見た目の変化
このカスタマイズを行うと以下の画像のように変化します。画像を差し替えるだけでだいぶ印象がかわるよ✨
カスタマイズ前
修正前のデザイン（デフォルト）
カスタマイズ後
修正後のデザイン
content-not-found.phpを編集
親テーマ内にある entry-footer.phpを子テーマと同じ位置にコピーします。そしてこのファイルを修正していきます。
このサイトのソースコードはこちら。
差し替え画像のサイズ
404のところに入る画像サイズは 800 x 450 ピクセルになります。自分でデザインして入れたいときにはこの画像サイズで404エラー画像を作成してメディアに追加します。
画像が追加できたら、上のソースコード部分にある以下の部分のアップロードした画像のURLをコピペして保存します。
<img src="●●●ここに画像のURLを追加●●●">これで完成です！
404の白い文字も削除したい場合
完全にオリジナルで404画像をわかるように作ってしまった場合には、画像の上に乗っている404の白い文字が邪魔になることもあります。
その場合には、11行目にあるソースコードを以下のように書き換えます。
<div class="nofound-img"><img src="●●●ここに画像のURLを追加●●●"></div>そうすると404の文字が消えて画像のみが表示されるようになります。
今回のカスタマイズはこれで終了になります。
コピペして画像をアップしてURLを貼り付けて終わるのでかなり簡単に変更できると思います。
以上、NORI（@norilog4）でした。
WordPressのことならお任せください。サーバー設定からインストール、カスタマイズなどを有料で承っております。WordPressで作られたサイトの制作実績は以下お問い合わせページからご確認ください。
