ITスキル

【WordPress】コードを縦横のスクロール画面で載せる方法（プラグイン不要！）

  /

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>&lt;!DOCTYPE html&gt;

・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>

ぜひお試しください！

ワカバ

RELATED POST