久野 晃司 
My Snow Monkeyを活用してSnow Monkeyのスタイリン（見た目）をカスタマイズすることはよくあると思います。
仕組みは単純で、My Snow Monkey内にstyle.cssを用意し、それを読み込むだけで完了です。
style.cssでのスタイリングの準備はこちらから自分だけのプロジェクトであれば、これでも問題ないのですが、お客さんを相手にウェブサイトを制作するお仕事の場合、これでは十分とは言えません。
WordPressのブロックエディタは、編集体験を向上させるために導入された一面もあり、その体験向上（UX向上）のためにも、編集画面でも実際の見た目で編集を可能にするべきでしょう。
ここでは、その方法をご紹介します。
編集画面用CSSファイルを読み込む
まずは、編集画面に利用するCSSファイルを読み込みましょう。
My Snow Monkeyに以下のようなコードを追記します。ご自身のプラグイン（My Snow MonkeyのままでもOK）やCSSファイル名に置き換えてください。
<?php
/**
* import css file for editor
*/
add_action(
'after_setup_theme',
function() {
add_editor_style( '/../../plugins/{your-plugin-name}/editor-style.css' );
}
);これで、編集画面にeditor-style.cssというCSSファイルが読み込まれるようになります。ファイル名は良しなに変更・解釈してくださいね。
フロント用と編集画面用のCSSファイルをそれぞれ作る
構造としてはこんな感じの流れになっています。Sass（SCSS記法）を利用しているので、まだ触ったことがないという方はこれを機にぜひチャレンジしてみてください。
ざっくり説明しますね。
まず、フロント用と編集画面用に２つのCSSファイルが必要になります。
style.css（style.scssをコンパイルしたフロント用）editor-style.css（editor-style.scssをコンパイルした編集画面用）
そして、それぞれに以下のパーシャルファイルを読み込みますが、読み込み方は後述しますので確認してくださいね。
_core-blocks.scss（標準ブロック用）_under-is-root-container.scss（.is-root-container直下の際のスタイル用）
//-----------------------------------------------------
// 順序のないリスト
//-----------------------------------------------------
ul {
}
//-----------------------------------------------------
// 順序のあるリスト
//-----------------------------------------------------n
ol {
}
//-----------------------------------------------------
// コード
//-----------------------------------------------------
.wp-block-code {
code {
}
}
//-----------------------------------------------------
// テーブル
//-----------------------------------------------------
.wp-block-table {
table {
thead {
th {
th {
}
}
}
tbody {
tr {
td {
}
}
}
}
}
//-----------------------------------------------------
// 画像
//-----------------------------------------------------
.wp-block-image {
img {
}
& .is-style-round {
}
}
//-----------------------------------------------------
// ギャラリー
//-----------------------------------------------------
.wp-block-gallery {
& .column-2 {
}
& .column-3 {
}
& .column-4 {
}
& .is-clopped {
}
.blocks-gallery-grid {
.block-gallery-item {
figure {
img {
}
}
}
}
}
//-----------------------------------------------------
// カバー
//-----------------------------------------------------
.wp-block-cover {
&__inner-container {
}
}
//-----------------------------------------------------
// メディアとテキスト
//-----------------------------------------------------
.wp-block-media-text {
&__media { // 画像
}
&__content { // コンテンツ
}
}
//-----------------------------------------------------
// ボタン
//-----------------------------------------------------
.wp-block-buttons {
.wp-block-button { // 標準ボタン
&__link {
}
& .is-style-outline { // アウトライン
}
}
}
//-----------------------------------------------------
// カラム
//-----------------------------------------------------
.wp-block-columns {
.wp-block-column {
}
}
//-----------------------------------------------------
// 区切り
//-----------------------------------------------------
.wp-block-separator {
}
_core-blocks.scssの中身はこちら//======================================================================
// @link https://github.com/inc2734/snow-monkey/blob/master/src/css/core/mixin/_entry-content.scss
//======================================================================
> h2 + h3,
> h3 + h4,
> h4 + h5,
> h5 + h6 {
}
> h2 {
}
> h3 {
}
> table {
}
> ul,
> ol {
> li {
& + li {
}
}
}
> blockquote {
}_under-is-root-container.scssの中身はこちらこのような内容になっています。
この部分はWordPressのDOMの変更が頻繁に行われるため、常に情報のアップデートが必要になります。おかしなところがあればご連絡ください。
そして、style.scssにはこのように全てを読み込みます。
.p-entry-content {
@import "under-is-root-container-blocks";
@import "core-blocks";
}editor-style.scssにはこのようにis-root-containerでラップする形で_under-is-root-container.scssを読み込みます。
.is-root-container {
@import "block-styles/under-is-root-container-blocks";
}
@import "block-styles/core-blocks";このようにすることで、フロント用スタイルではis-root-containerの影響を回避できます。
また、編集画面用スタイルでは、テーマ側で提供されているis-root-container直下のスタイルを打ち消しながら編集画面のスタイリングを提供することができます。
これを言ってはおしまいなのですが、こんなことをしなくても個別に開発者ツールを使って最適なクラス名を抽出してCSSを書いていくことでカスタマイズは可能です。
ですが、Snow Monkeyカスタマイズ初心者の方は、もしかしたらis-root-containerの影響で引っかかる方もみえるかもしれませんので、記事にしてみました。
参考になれば幸いです。
外注先をお探しの方へ
当サイトを制作・管理しているオレインデザインを、WordPressを利用したウェブサイト制作の開発外部リソースに利用しませんか？
お気軽にお問い合わせください。