【WordPress】ブロックエディター用CSS「wp-block-library-theme-inline-css」を削除する方法

ワードプレスで構築しているウェブサイトのHTMLコードを確認すると、「wp-block-library-theme-inline-css」というIDのインラインCSSが出力されているはずです。

<style id='wp-block-library-theme-inline-css' type='text/css'>
	.wp-block-audio figcaption {
		color: #555;
		font-size: 13px;
		text-align:center
	}

	.is-dark-theme .wp-block-audio figcaption {
		color:hsla(0, 0%, 100%, .65)
	}

	.wp-block-audio {
		margin:0 0 1em
	}

	.wp-block-code {
		border: 1px solid #ccc;
		border-radius: 4px;
		font-family: Menlo, Consolas, monaco, monospace;
		padding:.8em 1em
	}

	.wp-block-embed figcaption {
		color: #555;
		font-size: 13px;
		text-align:center
	}

	.is-dark-theme .wp-block-embed figcaption {
		color:hsla(0, 0%, 100%, .65)
	}

	.wp-block-embed {
		margin:0 0 1em
	}

	.blocks-gallery-caption {
		color: #555;
		font-size: 13px;
		text-align:center
	}

	.is-dark-theme .blocks-gallery-caption {
		color:hsla(0, 0%, 100%, .65)
	}

	.wp-block-image figcaption {
		color: #555;
		font-size: 13px;
		text-align:center
	}

	.is-dark-theme .wp-block-image figcaption {
		color:hsla(0, 0%, 100%, .65)
	}

	.wp-block-image {
		margin:0 0 1em
	}

	.wp-block-pullquote {
		border-bottom: 4px solid;
		border-top: 4px solid;
		color: currentColor;
		margin-bottom:1.75em
	}

	.wp-block-pullquote cite, .wp-block-pullquote footer, .wp-block-pullquote__citation {
		color: currentColor;
		font-size: .8125em;
		font-style: normal;
		text-transform:uppercase
	}

	.wp-block-quote {
		border-left: .25em solid;
		margin: 0 0 1.75em;
		padding-left:1em
	}

	.wp-block-quote cite, .wp-block-quote footer {
		color: currentColor;
		font-size: .8125em;
		font-style: normal;
		position:relative
	}

	.wp-block-quote.has-text-align-right {
		border-left: none;
		border-right: .25em solid;
		padding-left: 0;
		padding-right:1em
	}

	.wp-block-quote.has-text-align-center {
		border: none;
		padding-left:0
	}

	.wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-quote.is-style-plain {
		border:none
	}

	.wp-block-search .wp-block-search__label {
		font-weight:700
	}

	.wp-block-search__button {
		border: 1px solid #ccc;
		padding:.375em .625em
	}

	:where(.wp-block-group.has-background) {
		padding:1.25em 2.375em
	}

	.wp-block-separator.has-css-opacity {
		opacity:.4
	}

	.wp-block-separator {
		border: none;
		border-bottom: 2px solid;
		margin-left: auto;
		margin-right:auto
	}

	.wp-block-separator.has-alpha-channel-opacity {
		opacity:1
	}

	.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
		width:100px
	}

	.wp-block-separator.has-background:not(.is-style-dots) {
		border-bottom: none;
		height:1px
	}

	.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
		height:2px
	}

	.wp-block-table {
		margin:0 0 1em
	}

	.wp-block-table td, .wp-block-table th {
		word-break:normal
	}

	.wp-block-table figcaption {
		color: #555;
		font-size: 13px;
		text-align:center
	}

	.is-dark-theme .wp-block-table figcaption {
		color:hsla(0, 0%, 100%, .65)
	}

	.wp-block-video figcaption {
		color: #555;
		font-size: 13px;
		text-align:center
	}

	.is-dark-theme .wp-block-video figcaption {
		color:hsla(0, 0%, 100%, .65)
	}

	.wp-block-video {
		margin:0 0 1em
	}

	.wp-block-template-part.has-background {
		margin-bottom: 0;
		margin-top: 0;
		padding: 1.25em 2.375em
	}
</style>

ブロックエディターを使用していない場合、この記述は不要なので削除します。

functions.php にコードを追加する

使用しているテーマファイル内「functions.php」の適当な箇所に以下のコードを記述してください。

add_action( 'wp_enqueue_scripts', 'remove_my_block_library_styles' );
function remove_my_block_library_styles() {
	wp_dequeue_style( 'wp-block-library-theme' );
}

これで該当コードを削除できます。

なお「functions.php」はテーマファイルの中で極めて重要なものです。
必ずバックアップを取ってから作業を行いましょう。