WordPressにおいて、コードを以下のように「縦横のスクロール画面」で載せる方法を紹介します⇩
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,0">
<title>Let's go on a trip</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="container">
<header>
<div class="txt">
<h1>Let's go on a trip</h1>
<p>さあ、新たな旅に出よう</p>
</div>
</header>
<div class="frame frame1">
<div class="inner">
<section id="okinawa">
<div class="okinawa-left">
<img src="沖縄写真.jpg" alt="沖縄写真">
</div>
<div class="okinawa-right">
<h2>沖縄県</h2>
<p>沖縄県は日本有数の観光地です。綺麗な海では様々なアクティビティを楽しむことができます。</p>
</div>
</section>
</div>
</div>
<div class="frame frame2">
<div class="inner">
<section id="hokkaido">
<div class="hokkaido-left">
<h2>北海道</h2>
<p>北海道はグルメの宝庫として非常に人気です。市場で新鮮な海の幸を楽しむことができます。</p>
</div>
<div class="hokkaido-right">
<img src="北海道写真.jpg" alt="北海道写真">
</div>
</section>
</div>
</div>
<footer>
<div class="footer-inner">
<h2>新規登録はこちら</h2>
<a class="btn general">会員登録</a>
<p>or</p>
<a class="btn twitter"><i class="fab fa-twitter"></i>Twitterで登録</a>
<a class="btn facebook"><i class="fab fa-facebook"></i>Facebookで登録</a>
</div>
</footer>
</div>
</body>
</html>
縦と横の2方向でスクロールすることができる
⇒量が多いコードも小さい画面に収めることができる
ワードプレスのデフォルト機能では縦スクロールが適用されない
ワードプレスの通常の「コード」入力機能では縦スクロールが適用されません。
長いコードを入力するとこのようにサイトがコードで埋め尽くされてしまいます⇩

読み手にとっては非常に見づらいですよね。縦長ですし、勝手に改行されています。
コード画面をスクロールできるようにして見やすくしましょう!⇩
縦横スクロールで表示する方法
1. 「コード」入力で載せたいコードを入力

⇩

2.編集画面をコードエディターに変更

3.2か所のコードを書き換える
スクロールを適用させるために2か所のコードを書き換えます
・1か所目(該当コードの始まり部分)
変更前

⇩
変更後
<!-- wp:code {"className":"scroll"} -->
<div class="scroll-box">
<pre class="scroll-inner"><code><!DOCTYPE html>
・2か所目(該当コードの終わり部分)
変更前

⇩
変更後
</code></pre>
</div>
<style>
.scroll-inner{
overflow:visible;
width:1500px; /*スクロールで隠れた部分を含めた全体の横幅をお好みで設定*/
/*幅が小さいとコードが勝手に改行されてしまう*/
}
.scroll-box{
height:600px; /*スクロール画面の高さをお好みで設定*/
overflow:scroll;
}
</style>
<!-- /wp:code -->
widthとheightの値はお好みで調節してください。
4.完成です!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,0">
<title>Let's go on a trip</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="container">
<header>
<div class="txt">
<h1>Let's go on a trip</h1>
<p>さあ、新たな旅に出よう</p>
</div>
</header>
<div class="frame frame1">
<div class="inner">
<section id="okinawa">
<div class="okinawa-left">
<img src="沖縄写真.jpg" alt="沖縄写真">
</div>
<div class="okinawa-right">
<h2>沖縄県</h2>
<p>沖縄県は日本有数の観光地です。綺麗な海では様々なアクティビティを楽しむことができます。</p>
</div>
</section>
</div>
</div>
<div class="frame frame2">
<div class="inner">
<section id="hokkaido">
<div class="hokkaido-left">
<h2>北海道</h2>
<p>北海道はグルメの宝庫として非常に人気です。市場で新鮮な海の幸を楽しむことができます。</p>
</div>
<div class="hokkaido-right">
<img src="北海道写真.jpg" alt="北海道写真">
</div>
</section>
</div>
</div>
<footer>
<div class="footer-inner">
<h2>新規登録はこちら</h2>
<a class="btn general">会員登録</a>
<p>or</p>
<a class="btn twitter"><i class="fab fa-twitter"></i>Twitterで登録</a>
<a class="btn facebook"><i class="fab fa-facebook"></i>Facebookで登録</a>
</div>
</footer>
</div>
</body>
</html>
ぜひお試しください!