【WordPress5】SANGO+Rinker+Gutenbergブロックエディターで記事を書いてわかった便利さと不便さ

ブロックエディター幅の変更

SANGOのPCコンテンツ幅は700px。
ブロックエディタの幅は610px。
ということでブロックエディタの幅を700pxにする。

フォントサイズの変更

SANGOのPC表示でのフォントサイズは16px * 107%

107%は変更可能。

現在の設定は「外観」→「カスタマイズ」→「デザイン・レイアウト設定」→「フォントサイズ」で確認できる。

ブロックエディタでは16pxになるので107％を適用する

エディター用CSS作成+読み込み設定

1.子テーマ直下に「editor-style.css」ファイルを作成

2.editor-style.cssにスタイル設定

/*SANGOの幅は700px*/
/*左右に15pxのpaddingがあるので730pxに設定*/
.wp-block {
max-width: 730px;
}
/*Snagoの標準フォントサイズは16px*/
/*PCでは107％になっているのでエディタも合わせる*/
p {
font-size: 107%;
}

3.functions.phpに下記を追記（エディタ用CSSを読み込む設定）

  add_editor_style( 'editor-style.css' );
add_theme_support( 'editor-styles' );

マーカープラグインを使う方法

マーカーアニメーションというプラグインがあります。段落ブロックでも使用可。

ja.wordpress.org

「蛍光マーカーを引くアニメーション」のプラグインだけど「塗る時間」や「遅れ時間」を「0」にすればただの蛍光マーカーライン（←こんな感じ）として利用できます。

Advanced Rich Text Tools for Gutenbergを使う方法

wordpress.org

このプラグインを使うとインラインテキストに装飾を適応できる。

sapn class style を適用してるだけなのでCSSを上書きしてSANGOの蛍光マーカーに合わせてみる。

1.functions.phpに下記を追記（蛍光イエローパレット追加）

/*********************
SANGO Gutenbergのパレットをオーバーライド
蛍光イエロー以外を追加したい時は追加するか書き換えればOK
*********************/
function sango_theme_gutenberg_theme_setup_override() {
$custom_colors = array(
array(
'name' => '蛍光イエロー',
'slug' => sanitize_title('sango_keiko_yellow'),
'color' => get_theme_mod('keiko_yellow_color', '#fffc6bb0')
),
array(
'name' => 'メインカラー',
'slug' => sanitize_title('sango_main'),
'color' => get_theme_mod('main_color', '#6bb6ff')
),
array(
'name' => 'パステルカラー',
'slug' => sanitize_title('sango_pastel'),
'color' => get_theme_mod('pastel_color', '#c8e4ff')
),
array(
'name' => 'アクセントカラー',
'slug' => sanitize_title('sango_accent'),
'color' => get_theme_mod('accent_color', '#ffb36b')
),
array(
'name'  => '黒',
'slug' => sanitize_title('sango_black'),
'color' => '#333',
),
array(
'name'  => 'グレイ',
'slug' => sanitize_title('sango_gray'),
'color' => 'gray',
),
array(
'name'  => 'シルバー',
'slug' => sanitize_title('sango_silver'),
'color' => 'whitesmoke',
),
);
add_theme_support( 'editor-color-palette', $custom_colors );
}
add_action( 'after_setup_theme', 'sango_theme_gutenberg_theme_setup_override' );

2.editor-style.cssに追記（エディタ用CSS バックグラウンドを蛍光マーカー仕様に）

.background-color {
background:linear-gradient(#fff 50%,rgba(255, 255, 255, 0) 50%);
}

3.style.cssに追記（子テーマCSS バックグラウンドを蛍光マーカー仕様に）

/*advanced-rich-text-toolsのInline Background colourを蛍光マーカーに*/
.background-color {
background:linear-gradient(#fff 50%,rgba(255, 255, 255, 0) 50%);
}