WordPress のビジュアルエディターのスタイルをカスタマイズする

2020/04/12

WordPress のエディターには独自のスタイルが適用され，見た目が実際に投稿するものとは大きく異なっている．
編集する上で不便であるから，これを実際のスタイルに近しいものに変更した．

エディタ用CSS の適用

今回，参考にしたのは次のサイト

「WordPress：Gutenberg用CSSを読み込んだり設定する方法」NxWorld　https://www.nxworld.net/wordpress/wp-gutenberg-css-settings.html

まず，エディターに editor-style.css を適用させるために，functions.php に次のように書き加えた．

//editorのcss適用
add_action( 'after_setup_theme', 'nxw_setup_theme' );
function nxw_setup_theme() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}

これで，editor-style.css に用意したスタイルがエディターに適用されるようになった．

CSS を記述

各要素に関して，スタイルを自分好みに変更していく．

ただし，スタイルがインラインに挿入されるにあたって，全てのセレクタの先頭に，.editor-styles-wrapper が追記されるので注意する．

具体的には，

h1, h2, h3 {
    font-weight: bold;
}
.box {
    background: #ffe6cb;
}

のようなものが

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
    font-weight: bold;
    color: #000;
}
.editor-styles-wrapper .box {
    background: #ffe6cb;
}

のように書き換えられる．

ただし，例外として body と html はそのまま .editor-styles-wrapper に置き換えられる．

つまり，

html {
    font-size: 16px;
}
body {
    font-family: sans-serif;
}

は，

.editor-styles-wrapper {
    font-size: 16px;
}
.editor-styles-wrapper {
    font-family: sans-serif;
}

のように書き換えられる．

すなわち，CSSに書く場合は，基本的には難しいことを考えずにタグを直接指定すれば問題ないように設計されている．

では，以下に主な調節した事項を記していく．

本文・見出しのフォント

デフォルトでは，なぜか明朝体になっている．
あと，やたら見出しの文字が大きい．

これをまず修正する．

body {
    /*フォント*/
    font-family: Meiryo;
}

/*見出し*/
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/*タイトル*/
.editor-post-title__input {
    font-family: Meirio;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}


h2 {
    font-weight: normal;
    font-size: 1.5rem;
    margin: 2.5rem 0 2rem;
    padding: .4rem 0 0 0;
    border-bottom: solid 2px #442300;
}

h3 {
  font-size: 1.2rem;
  margin: 2.5rem 0 1.8rem;
  padding: 0 1rem 0 0;/
}

h4 {
  font-size: 1rem;
  margin: 2rem 0 1.4rem;
}

h5 {
  font-size: 1rem;
  margin: 0 0 1rem 1.5rem;
}

.editor-styles-wrapperに化ける body でまとめてフォントをメイリオに変更．

しかし，タイトルだけはこれで変わってくれなかったので，.editor-post-title__input でもう一回指定している．

その後，各見出しのレベルごとにフォントサイズとmargin/paddingの調整をしている．

各ブロックの位置の調整

実際に表示されるように設定したページの幅に対して，エディターの max-width が狭すぎた．

ということで，これも修正．

.wp-block {
    box-sizing: border-box;
    max-width: 840px;
    margin-right: auto;
    margin-left: auto;
}
.wp-block.is-selected{
    margin-top: 55px;
}
.block-editor-block-list__block{
    margin: 0 auto;
}

各ブロックの指定は，wp-block属性で，最大幅を広げた他，ブロック間の間隔を狭めてより実際の表示に近づけた．

また，ブロックを選択したときに左上に出てくるボタンが前のブロックに被って前の内容が読めなく泣くのが気に入らなかったので，ブロック選択時（.wp-block.is-selected）に限り margin-top の幅を広げてこの問題を解決した．

表

表のスタイルも表示されるものと同一に．基本的に table に関するタグをそれぞれそのまま指定すればできる．

table {
    border-collapse: collapse;
}
th, td {
    padding: 0.1rem .7rem;
    vertical-align: middle;
    border: 1px solid #000;
}
th {
    background-color: #f7d4ad;
}

figure table{
    margin-bottom: 0;
}
figure{
    margin-bottom: 1.5rem;
}

.wp-block-table table{
    width: auto;
}
.block-editor-block-list__block[data-type="core/table"][data-align="right"] table {
    margin-left: auto;
}
.block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .is-block-content,
.block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .is-block-content{
    float:none;
}

他に，表の幅が 100%にされるのを避けるために，widthをautoにし，
float で表の周りに他の要素が回り込むのをキャンセルしている．

追加CSS

追加CSSの属性も，そのまま記述すれば反映された．

例えば，本サイトで追加した boxクラスの場合では，

.box {
    position: relative;
    padding: 1.5rem 2rem;
    margin: 0 2rem 1.5rem 2rem;
    background: #ffe6cb;
}
ul.box,
ol.box {
    padding: 1.5rem 2rem 1.5rem 3rem;
}
div.box {
    padding-bottom: 1px;
}

のようにすれば上手くいった．

追加CSSに関しては，追加した瞬間にスタイルに反映されるので，今までブロックごとに確認が必要だったのが一目で分かるようになり，とても便利であると思った．