CSSやJavaScriptのコードをブログ記事に載せると、コードブロックだけで記事がかなり縦長になってしまうことがあります。
特に、WordPressやSWELLのカスタマイズ記事では、
- CSSコード
- JavaScriptコード
- functions.php用コード
- プラグイン設定用コード
などを紹介することが多く、1つのコードブロックが長くなりがちです。
そこで便利なのが、コードブロックの高さを制限して、ブロック内だけ縦スクロールできるようにする方法です。
この記事では、WordPressのコードブロックにCSSで縦スクロールを追加する方法と、実際につまずいたポイントをまとめます。
コードブロックが長すぎると何が問題か
WordPressのコードブロックは、ソースコードを記事内に見やすく表示するためのブロックです。公式ドキュメントでも、コードブロックは他のユーザーに見せるフォーマット済みコードを追加するためのブロックとして説明されています。
ただ、長いコードをそのまま表示すると、次のような問題が出ます。
- 記事全体が長くなりすぎる
- 本文の流れが止まる
- スマホで読みづらい
- 読者がコードの後に本文が続くことに気づきにくい
特にスマホでは、長いコードブロックが画面を何スクロール分も占めてしまいます。
そのため、長いコードは一定の高さで区切って、コードブロック内だけスクロールできるようにすると読みやすくなります。
完成形のCSS
まず、今回うまくいったCSSはこちらです。
/* ==============================
コードブロックに縦スクロールを追加する
============================== */
pre.wp-block-code,
.wp-block-code pre,
.hcb_wrap pre,
.hcb-code pre {
max-height: 420px;
overflow-y: auto;
overflow-x: auto;
}
@media (max-width: 767px) {
pre.wp-block-code,
.wp-block-code pre,
.hcb_wrap pre,
.hcb-code pre {
max-height: 320px;
}
}このCSSを追加すると、コードブロックの高さが一定以上になったときに、ブロック内だけスクロールできるようになります。
CSSの意味
max-height
max-height: 420px;これは、コードブロックの最大の高さを指定しています。
コードが短い場合はそのまま表示されます。
コードが長い場合だけ、420pxを超えた部分がスクロール対象になります。
スマホでは少し低めにしています。
@media (max-width: 767px) {<br> max-height: 320px;<br>}スマホは画面が小さいため、PCと同じ高さにすると少し大きく見えます。
そのため、スマホでは320pxにしています。
overflow-y
overflow-y: auto;これは、縦方向にはみ出した部分をスクロールできるようにする指定です。
auto にしているので、コードが短いときはスクロールバーは出ません。
長いときだけスクロールできるようになります。
overflow-x
overflow-x: auto;これは、横方向にはみ出した場合に横スクロールできるようにする指定です。
コードは1行が長くなることがあります。
そのときに折り返して崩れるのを避けたい場合は、横スクロールを許可しておくと安全です。
pre.wp-block-code と .wp-block-code pre の違い
今回、少しハマりやすいのがここです。
最初にこう書いても効かない場合があります。
.wp-block-code pre {<br> max-height: 420px;<br>}これは、次のようなHTML構造を想定した指定です。
<div class="wp-block-code">
<pre>...</pre>
</div>つまり、.wp-block-code の中にある pre を対象にしています。
しかし、環境によっては次のように出力されることがあります。
<pre class="wp-block-code">...</pre>この場合、wp-block-code クラスは pre 自体に付いています。
そのため、指定はこうなります。
pre.wp-block-code {
max-height: 420px;
}意味は、wp-block-code クラスが付いた pre タグです。
今回のように環境差を考えるなら、両方書いておくと安全です。
pre.wp-block-code,
.wp-block-code pre {
max-height: 420px;
overflow-y: auto;
overflow-x: auto;
}Highlighting Code Blockを使っている場合
Highlighting Code Blockなどのコード表示プラグインを使っている場合は、標準のコードブロックとはHTML構造が違うことがあります。
そのため、以下も対象に含めています。
.hcb_wrap pre,
.hcb-code preこの指定によって、Highlighting Code Block側のコードブロックにも高さ制限をかけられる可能性があります。
ただし、コードブロック系プラグインは、行番号やコピーボタンの表示に独自のHTMLやCSSを使っている場合があります。
そのため、表示が崩れる場合は、まず対象セレクタを絞って確認するのがおすすめです。
カッパパ当サイトでも、Highlighting Code Blockを使っています！
Copy Anything to Clipboardとの競合に注意
今回つまずいた原因は、CSSそのものではなく、Copy Anything to Clipboard側の設定でした。
Copy Anything to Clipboardは、指定した要素にコピーボタンを追加できるプラグインです。公式ページでも、Global Injectorで pre、code、blockquote などのCSSセレクタを指定して、コピー機能を付けられると説明されています。
便利な反面、対象を広くしすぎると、コードブロックの表示CSSとぶつかることがあります。
たとえば、Copy Anything to Clipboardの対象を次のようにしている場合です。
preこの指定だと、ページ内のすべての pre に対してコピーボタンが追加されます。
そこに、今回のような高さ制限CSSを当てると、
- コピーボタンの位置がずれる
- 行番号表示が崩れる
- コードブロック以降の記事までおかしく見える
- 背景色やスクロール表示が崩れる
といった症状が出ることがあります。
カッパパ当サイトでも、もともとCopy Anything to Clipboardを使っていたところに、Highlighting Code Blockを入れました。完全移行すると既存記事を全て直さないといけないのが面倒くさかったので、併用する方式にしています。
Copy Anything to Clipboardを使う場合の対策
Copy Anything to Clipboardを使う場合は、対象を pre 全体にするのではなく、できるだけ絞るのが安全です。
たとえば、標準コードブロックだけに効かせたいなら、
pre.wp-block-code特定のコードブロックだけに効かせたいなら、独自クラスを付けて、
.copy-code-targetのように指定します。
逆に、次のような広すぎる指定は注意が必要です。
precode.entry-content preこれらは、思わぬ場所にまでコピーボタンが入る可能性があります。
おすすめの設定方針
今回のように、長いコードブロックを記事に載せる場合は、次の方針がおすすめです。
コードブロックの高さ制限：CSSで行う
コピーボタン：対象を絞って設定する
Copy Anythingの対象：pre全体にはしない特に、pre 全体指定は便利ですが、他のコード装飾プラグインやテーマCSSとぶつかりやすいです。
CSSをどこに入れるか
CSSは、WordPressの「追加CSS」や、WPCodeなどのコード管理プラグインに入れます。
コードが少ないうちは、追加CSSでも問題ありません。
ただし、カスタマイズ用CSSが増えてきたら、WPCodeなどでスニペットとして分けて管理した方が見返しやすくなります。
たとえば、スニペット名を次のようにしておくと管理しやすいです。
コードブロック縦スクロール用CSSまとめ
WordPressの記事で長いコードを紹介すると、コードブロックだけで記事がかなり縦長になってしまいます。
その場合は、CSSでコードブロックに max-height と overflow を指定すると、ブロック内だけ縦スクロールできるようになります。
今回の基本CSSはこちらです。
pre.wp-block-code,
.wp-block-code pre,
.hcb_wrap pre,
.hcb-code pre {
max-height: 420px;
overflow-y: auto;
overflow-x: auto;
}
@media (max-width: 767px) {
pre.wp-block-code,
.wp-block-code pre,
.hcb_wrap pre,
.hcb-code pre {
max-height: 320px;
}
}ポイントは、pre.wp-block-code と .wp-block-code pre の違いです。
pre.wp-block-code
→ preタグ自体に wp-block-code クラスが付いている場合
.wp-block-code pre
→ wp-block-code の中に pre がある場合また、Copy Anything to Clipboardを使っている場合は、pre 全体にコピーボタンを付けると表示が崩れることがあります。
その場合は、Copy Anything to Clipboardの対象を絞るか、コードブロックごとにクラスを分けると安全です。
長いコードを載せる記事では、コードの見やすさと本文の読みやすさの両方が大事です。
コードブロックに縦スクロールを追加しておくと、読者が本文の流れを追いやすくなります。