【WordPress】Code Block Proを角丸にするCSS

2025年1月26日WordPress

この記事では、WordPressのブロックエディターで追加した「Code Block Pro（Code Pro）」ブロックの四隅を角丸にするCSSを書きます。

子テーマの編集のスタイルシート（style.css）に貼り付けることで一括で角丸にできます。

ナポリタン寿司は2024年12月からWordPressプラグイン「Code Block Pro」を利用しはじめました。「Visual Studio Code」風のシンタックスハイライターブロックで非常に見やすく、使い勝手も良きです。

Luxeritasのシンタックスハイライターから「Code Block Pro」に移行した話

この記事では、WordPressテーマ「Luxeritas」に標準で内蔵されているシンタックスハイライターから「Co ...

https://www.naporitansushi.com/luxeritas-syntax-highlighter-...

一点気になることがあると言えば、四隅がカックカクで一切の角丸もない状態な点でした。当サイトを見ると分かるように僕は角丸が好きです。角を丸めたいです。

「Code Block Pro」内にはシンタックスハイライターの角丸具合を調整するオプションが用意されていません。（2024年12月現在）

CSSを使うことで自分で好きな角丸具合にできます。

1. WordPressの「Code Block Pro」ブロックを角丸にする手順
2. 感想

WordPressの「Code Block Pro」ブロックを角丸にする手順

子テーマの編集を開く

WordPressの管理画面を開きます。左側サイドバーにあるテーマ名→「子テーマの編集」をクリックします。僕は「Luxeritasルクセリタス」というテーマを使っていますが人によって変わります。

「子テーマの編集」のスタイルシートにGoogleマップを角丸にするCSSを書き込む手順画像1

角丸にするCSSを書く

子テーマの編集ページを開けたら、上部のタブが「スタイルシート」になっていることを確認します。CSSを書き込める画面が表示されるので、既に書かれているコードは弄いじらず一番下にカーソルをあててEnterで改行します。新しい行に以下のCSSを書きます。

CSS

/*Code Block Proの四隅を角丸にする（上部分）*/
.wp-block-kevinbatdorf-code-block-pro>span:nth-of-type(1):not([role="button"]),
.wp-block-kevinbatdorf-code-block-pro>span[role="button"]:nth-of-type(1)+pre {
	border-top-right-radius: 15px !important;
	border-top-left-radius: 15px !important;
}

/*Code Block Proの四隅を角丸にする（下部分）*/
.wp-block-kevinbatdorf-code-block-pro>:is(pre,span):last-child {
	border-bottom-right-radius: 15px !important;
	border-bottom-left-radius: 15px !important;
}