みんな404エラーページをデザインしてる？　WordPressテーマ「SANGO」で、プラグイン不要でカスタマイズする方法。

<article class="notfound">

	<div class="nofound-title">
		<?php if(is_search()||is_archive()){
			echo '
			<i class="fa fa-tint fa-lg"></i>
			記事が見つかりませんでした。';
		} 
		
		else {
			echo '
			<i class="fa fa-tint fa-lg"></i>
			お探しのページが見つかりませんでした。';
			}?>
	</div>
	
	<div class="nofound-img">
		<img src="
			<?php echo get_template_directory_uri() 
			. '/library/images/notfound.jpg'; ?>">
		<?php if(is_404())echo '<h2 class="dfont strong">404</h2>'?>
	</div>

	<div class="nofound-contents">
		<?php if(is_search()): ?>
			<p>指定されたキーワードでは記事が見つかりませんでした。
			別のキーワード、もしくはカテゴリーから記事をお探しください。</p>
		<?php elseif(is_archive()): ?>
			<p>まだ記事が投稿されてゐません。以下でキーワードや
			カテゴリーから記事を探すことができます。</p>
		<?php else: ?>
			<p>お探しのページは「すでに削除されてゐる」、
			「アクセスしたアドレスが異なつてゐる」
			などの理由で見つかりませんでした。
			以下でキーワードやカテゴリーから記事を探すことができます。</p>
		<?php endif; ?>
		<?php get_search_form(); ?>
		<p>以下のカテゴリー一覽から記事を探すこともできます。</p>
		<div class="withtag_list">
			<span>カテゴリー</span>
			<ul>
				<?php wp_list_categories('depth=2&title_li=');?>
			</ul>
		</div>
		<div class="ct">
			<a class="raised accent-bc" 
				href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<i class="fa fa-home"></i> ホームに戻る</a>
		</div>
	</div>
</article>

<div class="nofound-title">
	<?php if(is_search()||is_archive()){
		echo '
		<i class="fa fa-tint fa-lg"></i> /*①*/
		記事が見つかりませんでした。'; /*②*/
	} 
	
	else {
		echo '
		<i class="fa fa-tint fa-lg"></i> /*①*/
		お探しのページが見つかりませんでした。'; /*③*/
		}?>
</div>

<div class="nofound-img">
	<img src="<?php echo get_template_directory_uri() . '/library/images/notfound.jpg'; ?>"> /*①*/
	<?php if(is_404())echo '<h2 class="dfont strong">404</h2>'?> /*②*/
</div>

<div class="nofound-contents">
	<?php if(is_search()): ?> /*①*/
		<p>指定されたキーワードでは記事が見つかりませんでした。
		別のキーワード、もしくはカテゴリーから記事をお探しください。</p>
	<?php elseif(is_archive()): ?> /*②*/
		<p>まだ記事が投稿されてゐません。以下でキーワードや
		カテゴリーから記事を探すことができます。</p>
	<?php else: ?> /*③*/
		<p>お探しのページは「すでに削除されてゐる」、
		「アクセスしたアドレスが異なつてゐる」
		などの理由で見つかりませんでした。
		以下でキーワードやカテゴリーから記事を探すことができます。</p>
	<?php endif; ?>
	<?php get_search_form(); ?> /*④*/
	<p>以下のカテゴリー一覽から記事を探すこともできます。</p>
	<div class="withtag_list"> /*⑤*/
		<span>カテゴリー</span>
		<ul>
			<?php wp_list_categories('depth=2&title_li=');?>
		</ul>
	</div>
	<div class="ct"> /*⑥*/
		<a class="raised accent-bc" 
			href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<i class="fa fa-home"></i> ホームに戻る</a>
	</div>
</div>

<article class="notfound">
	<div class="nofound-title"></div>
	<div class="nofound-img"><img src="http://wanduoying.com/wp-content/uploads/2018/05/notfound_2.png"></div>
	<div class="nofound-contents">
		<?php if(is_search()||is_archive()){echo '<h2 class="hh hh3 main-bdr">おっと！　ここは404教室だつたやうです。</h2>';} else {echo ' <h2 class="hh hh3 main-bdr">おっと！　ここは404教室だつたやうです。</h2>';}?>
		<?php if(is_search()): ?>
		<p>どうやらサクラちやんは404<ruby>教室<rt>ページ</rt></ruby>で着替へ中だつたやうです。このまま<ruby>見續<rt>みつづ</rt></ruby>けるのも可哀想なので、何も言はず去つてあげませう。	</p>
		<?php elseif(is_archive()): ?>
			<p>どうやらサクラちやんは404<ruby>教室<rt>ページ</rt></ruby>で着替へ中だつたやうです。このまま<ruby>見續<rt>みつづ</rt></ruby>けるのも可哀想なので、何も言はず去つてあげませう。	</p>
		<?php else: ?>
			<p>どうやらサクラちやんは404<ruby>教室<rt>ページ</rt></ruby>で着替へ中だつたやうです。このまま<ruby>見續<rt>みつづ</rt></ruby>けるのも可哀想なので、何も言はず去つてあげませう。	</p>	
		<?php endif; ?>
		&nbsp;
		<p>サクラちやんがフリーズしてゐます。<ruby>氣<rt>き</rt></ruby>の毒なので早く立ち去つてあげませう。ここはひとつ、このサクラちやんを描いた萬朶櫻の<a href="https://goo.gl/JtDpa7">プロフィールページ</a>なんかいかがでせう。</p>
		&nbsp;
		<p>え？　もう見た？　これは<ruby>失禮<rt>しつれい</rt></ruby>。サクラちやんの<ruby>顏<rt>かほ</rt></ruby>が見る見る赤くなつてゐます。ずつと見てゐるのも申しわけ無いので、早く立ち去つてあげませう。えーっと、それでは萬朶櫻からのオススメ記事なんかいかがでせう。</p>
		<p>↓↓↓以前描いたイラストのまとめです。量が多いので<ruby>見應<rt>みごた</rt></ruby>へありますよ！</p>
		<p><a href="https://goo.gl/xPUc83">2017年に描いたニコフレユーザーまとめ</a></p>
		&nbsp;
		<p>↓↓↓今使つてる机のレビューです。L字デスクつて興味ありません？</p>
		<p><a href="https://goo.gl/GQgx8h">一人暮らしにL字デスクはオススメ！　使つたらメリットしかなかつたので紹介するよ！</a></p>
		&nbsp;
		<p>↓↓↓Pixiv FANBOXについての記事です。みんな案外見てくれる記事ですよ？</p>
		<p><a href="https://goo.gl/gX7QPn">ピクシブ歴９年の繪描きが書く。Pixiv FANBOXの登録方法と使つてみた感想</a></p>
		&nbsp;
		<p>え？　そんな記事には興味が無い？　こ、これは<ruby>失禮<rt>しつれい</rt></ruby>。さうですね…それでは<ruby>檢索<rt>けんさく</rt></ruby>で記事を探しませう。サクラちやんの肩が震へてきてゐます。さすがにこれ以上の長居は心苦しいですね。</p>
		<?php get_search_form(); ?>
		&nbsp;
		<p>え？　焦つて良いワードが思ひつらない？　困りました。サクラちやんの目から涙が溢れさうです。</p>
		<p>それでは手つ取り早くカテゴリー<ruby>一覽<rt>いちらん</rt></ruby>からも記事を探してみませう。</p>
		<div class="withtag_list">
			<span>カテゴリー</span>
			<ul>
				<?php wp_list_categories('depth=2&title_li=');?>
			</ul>
		</div>
			<p>カテゴリー<ruby>一覽<rt>いちらん</rt></ruby>からも見附からない！？　ああ、もうダメだ。サクラちやん、もう泣いてしまひましたよ……</p>
		&nbsp;
			<p>しかたないですね。サクラちやんは僕が慰めておきますので、いつたんホームでお待ちください。</p>	
		<div class="ct">
			<a class="raised accent-bc" href="<?php echo esc_url( home_url( '/' ) ); ?>"><i class="fa fa-home"></i> ホームに戻る</a>
		</div>
	</div>
</article>