WordPress | wp-block-library-cssから必要なスタイルだけ使う

WordPress Gutenberg,WordPress

wp-block-library-cssから必要なスタイルだけ使う

WordPressのGutenbergで採用されたブロックライブラリ「wp blocks library css」はお手軽にスタイルを適用できるので便利な機能ではあります。

しかし多くの人にとって、そのほとんどが全く使わないスタイルをまとめて読み込むことになることもあり、またAMPページではファイルサイズの問題で使えない場合があり、結局はAMP様にスタイルを記述しなくてはいけなく、検索してもわかる通り「削除する方法」や「読み込まない方法」なんかがズラっと並んでおり、少々不人気なようです。

個人的にも、結局は「段落」「テーブル」「引用」と、3つほどのブロックにあるスタイルが適用されていれば済むので、子テーマのstyle.cssにて個別に記述して済ませています。

こうすることで、wp-block-library-cssは読み込まないまま、ブロックライブラリのスタイル機能を使いつつ、カスタマイズもしやすいのでおすすめかと思います。

今回は、「段落」「テーブル」「引用」など汎用性の高いブロックのwp-block-library-cssからデフォルトのスタイルを引っ張ってきて紹介していきます。

wp-block-library-cssのある場所

wp-block-library-cssは以下の場所にあります。

wp-includes/css/dist/block-library/style.min.css

汎用性の高い個別スタイル集

フォントサイズ

クラス名:has-xxx-font-size

段落ブロックなどで利用、style.cssに書くなら好みに調整できます。

/*フォントサイズ*/
.has-small-font-size {
	font-size: 13px;
}

.has-regular-font-size,
.has-normal-font-size {
	font-size: 16px;
}

.has-medium-font-size {
	font-size: 20px;
}

.has-large-font-size {
	font-size: 36px;
}

.has-larger-font-size,
.has-huge-font-size {
	font-size: 42px;
}

色設定ー背景色

段落以外でも有効なオプションがある。
これを指定していないと、paddingがまったくなくピチピチです。

/*テキスト背景色*/
p.has-background {
	padding: 20px 30px;
}

表示結果

テキスト

※当ブログで設定しているstyleのままなので、上記CSSよりpadding幅は小さいです。

ドロップキャップ

クラス名:has-drop-cap

使わない人も多いかもですが、一応。

フォントサイズ8.4em・・・だと?!

/*ドロップキャップ*/
.has-drop-cap:not(:focus)::first-letter {
	float: left;
	font-size: 8.4em;
	line-height: 0.68;
	font-weight: 100;
	margin: 0.05em 0.1em 0 0;
	text-transform: uppercase;
	font-style: normal;
}

.has-drop-cap:not(:focus)::after {
	content: "";
	display: table;
	clear: both;
	padding-top: 14px;
}

表示結果

ドロップキャップCSS

※当ブログではドロップキャップのCSSは記述していないので、キャプチャ画像です。

テーブル本体

クラス名:wp-block-table

wp-block-library-cssを使っていなくて、横幅が100%になっていない場合はこれをstyle.cssに追記する。

/*テーブル*/
.wp-block-table{
  width: 100%;
}

テーブルーストライプ

クラス名:is-style-stripes

色を変更したい場合はbackground-colorを調整。

/*テーブル ストライプ*/
.wp-block-table.is-style-stripes {
	border-spacing: 0;
	border-collapse: inherit;
	background-color: transparent;
	border-bottom: 1px solid #f3f4f5;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #f3f4f5;
}

表示結果

項目AB
CD

テーブルー列を同じ幅に揃える

クラス名:has-fixed-layout

/*テーブル 均一幅*/
.wp-block-table .has-fixed-layout {
	table-layout: fixed;
	width: 100%;
}

.wp-block-table .has-fixed-layout td,
.wp-block-table .has-fixed-layout th {
	word-break: break-word;
}

表示結果

項目AB
CD

引用ー拡大

拡大を使う場合は以下を記述します。

/*引用*/
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
	margin: 0 0 16px;
	padding: 0 1em;
}

.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
	font-size: 24px;
	font-style: italic;
	line-height: 1.6;
}

.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer,
.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer {
	font-size: 18px;
	text-align: right;
}

表示結果

引用文

引用元

以上のスタイルだけをまとめたCSS

これらをまとめて子テーマのstyle.cssに適用させる用。

/*フォントサイズ*/
.has-small-font-size {
	font-size: 13px;
}

.has-regular-font-size,
.has-normal-font-size {
	font-size: 16px;
}

.has-medium-font-size {
	font-size: 20px;
}

.has-large-font-size {
	font-size: 36px;
}

.has-larger-font-size,
.has-huge-font-size {
	font-size: 42px;
}

/*ドロップキャップ*/
.has-drop-cap:not(:focus)::first-letter {
	float: left;
	font-size: 8.4em;
	line-height: 0.68;
	font-weight: 100;
	margin: 0.05em 0.1em 0 0;
	text-transform: uppercase;
	font-style: normal;
}

.has-drop-cap:not(:focus)::after {
	content: "";
	display: table;
	clear: both;
	padding-top: 14px;
}

/*テキストの背景色*/
p.has-background {
	padding: 20px 30px;
}

/*テーブル*/
.wp-block-table{
  width: 100%;
}
/*テーブル ストライプ*/
.wp-block-table.is-style-stripes {
	border-spacing: 0;
	border-collapse: inherit;
	background-color: transparent;
	border-bottom: 1px solid #f3f4f5;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #f3f4f5;
}

/*テーブル 均一幅*/
.wp-block-table .has-fixed-layout {
	table-layout: fixed;
	width: 100%;
}

.wp-block-table .has-fixed-layout td,
.wp-block-table .has-fixed-layout th {
	word-break: break-word;
}

/*引用*/
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
	margin: 0 0 16px;
	padding: 0 1em;
}

.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
	font-size: 24px;
	font-style: italic;
	line-height: 1.6;
}

.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer,
.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer {
	font-size: 18px;
	text-align: right;
}