HTMLソース・コードの表示の仕方
- admin
- 2019年7月26日
投稿記事でソース・コードを表示する場合は、<div><pre></pre></div>が基本ですけれども、HTMLの場合は基本的に< 、> 、&などをエスケープする必要がありますが、取り敢えず、囲みを作って枠を作り、そちらにソースコードを表示するという手もあるようです。
基本的には、
<div style=”border:solid 1px; background:#F2F5A9;“><pre></pre></div>
「かこみ」などの単語で登録しておきます。エディタの画面をビジュアルではなく、テキスト（HTML）に切り替え、再度、ビジュアルに切り替えます。
こちらに、ソースコードをコピー・ペーストします。
<?php get_header(); ?>
<!-- ▼メインコンテンツ ： 開始 -->
<div id="main" class="l-two-column">
<div class="container">
<!-- ▼メインカラム ： 開始 -->
<div id="main-content" class="l-main site-main">
<!-- ▼記事コンテンツ ： 開始-->
<div class="content-area posts" role="main">
<header class="page-header">
<h1 class="archive-title">404 Not Found</h1>
</header><!-- /.page-header -->
<article>
lt;div class="entry-content">
<h2>ページが見つかりません。</h2>
<p>大変申し訳ございません。<br>
お探しのページは削除されたか、一時的に利用できない可能性があります。<br>
アクセスされたURLをご確認いただき、このサイトのトップページから、また上部ナビゲーションメニューからお探しのページへアクセスして下さい。</p>
<p><a href="<?php echo esc_url( home_url('/')); ?>">»トップページへ戻る</a></p>
</div><!-- / .entry-content -->
</article>
</div>
<!--▼記事コンテンツエリア ： 終了-->
</div>
<!--▼メインカラム ： 終了 -->
<?php get_sidebar(); ?>
</div><!-- /.container -->
</div>
<!--▼メインコンテンツ ： 終了-->
<?php get_footer(); ?>
あとで、<div style=”border: solid 1px; background: #F2F5A9; height: 300px; overflow-y: auto;overflow-x:auto”>などとして、高さを調整し、overflow:autoを入れます。widthは指定しなくても、一行が長い場合はスクロールバーが表示されるようです。
※投稿記事編集画面では背景色も含めて正しく表示されますが、公開してみると背景色が正しく表示されないなど、未完のところがあり、調査中です。背景色のコードを記載しないと、何故か、シルバーがかった背景色になり、一見したところ、正常に表示されているように見えます。
なお、htmlソース・コードの表示はエディターの置換機能を使うよりも、コピー・ペーストが楽でと思い、投稿しております。
※背景色をつけると、プレビューした際に表示が乱れるので当座、背景色なしにしておきます。記述のように背景色が淡いシルバー色になっている感じがしますが、WordPressがデフォルトで持っているCSSのせいかも知れません。なお、autoは強制的にスクロール・バーを表示させるscrollにしています。