WordPress | wp-block-library-cssから必要なスタイルだけ使う方法
WordPressのGutenbergで採用されたブロックライブラリ「wp-block-library-css」はお手軽にスタイルを適用できるので便利な機能です。
しかし、そのほとんどが全く使わないスタイルをまとめて読み込むことになることもあり、またAMPページではファイルサイズの問題で使えない場合があります。
このページでは、「wp-block-library-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
使わない人も多いと思います。
/* ドロップキャップ */
.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は記述していないので、キャプチャ画像です。
テーブル本体
クラス名：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;
}| 項目 | A | B |
| C | D |
テーブルー列を同じ幅に揃える
クラス名：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;
}| 項目 | A | B |
| C | D |
引用ー拡大
拡大を使う場合は以下を記述します。
/* 引用 */
.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;
}