「editor style css」をご存知ですか？
普通のスタイルシートとは違い投稿画面にスタイルを読み込ませるCSSのことです。
AFFINGER6は「クラシックエディタ」「ブロックエディタ」の両方で使用することができます。
この機能によりeditor style cssが必ずしも反映されなくなってしまっています。（必要な部分以外は捨てている感じです。）
今回のカスタマイズは実際見てもらったほうが早いと思います。
記事の書きやすさやブログの楽しさがかなり変わってくると思います。
簡単にカスタマイズができるようにある程度コピペで実装できるようにしています。
文字サイズは自身で入力する必要があります
editor style cssを作成
editor style cssを適用させるにはファイルを作成する必要があります。
ファイルを作成すると以下のようになります。
このファイルを追加する場合はサーバーのファイルで追加するようにします。
追加方法は以下で詳しく解説しています。
-
-
WordPress｜子テーマに親テーマのファイルをコピー、追加する方法 - アフィンガースタジオ
affinger418.com
当サイトではエックスサーバーを推奨しているので、エックスサーバーでのやり方を解説します。
ファイル管理を選択
Xサーバーでの手順を解説します。
Xサーバーログイン後、ファイル管理を選択します。
編集するドメインを選択
編集したいドメインを選択します。
するとドメイン下にアコーディオンが現れるので以下の順に選択してください。
Public_html＞wp-content＞temes＞affinger-shild（子テーマを選択）
親テーマからコピーしてもいいですが、すでに子テーマ内にスタイルシートがあるので、これを2つにするだけでも大丈夫です。
コピーを選択して保存する
style.cssを選択て上の「コピー」をクリックします。
コピー先を指定します。
同じaffinger-childへコピーしてください。
コピーが完了したら「名前変更」でeditor-style.cssという名前にしてください。
ここまででファイルの作成は完了になります。
ポイント
- スタイルシートをコピペする
- 名前は
editor-style.css - ファイルの種類は「スタイルシート」
- 中身は空でOK（全部削除する）
これでWordPressの管理画面からeditor-style.cssを編集できるようになります。
適用するコードの入力
ここまでできたら表示させたいスタイルを指定します。
もともと入っていたCSSコードはすべて削除しておきましょう。
自分で調べながらコードを作ってもいいですが、コピペでできるようにしています。
/* フォント調整 */
.editor-styles-wrapper .block-editor-block-list__block{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 500;
}
.editor-styles-wrapper div, .editor-styles-wrapper p {
font-size: 16px;/* 基本（Pタグ 他） */
color: #333;/* フォントカラー */
}
/* H1見出しフォントサイズ調整 */
.editor-styles-wrapper h1 {
font-size: 25px;
}
/* H2見出しフォントサイズ調整 */
.editor-styles-wrapper h2 {
font-size: 27px;
}
/* H3とH4見出しフォントサイズ調整 */
.editor-styles-wrapper h3 {
font-size: 22px;
}
.editor-styles-wrapper h4 {
font-size: 18px;
}各フォントサイズを自分のサイトで使っている見出しに合わせて変更してください。
サイズの確認方法は「AFFINGER管理」＞「全体設定」＞「フォントサイズ」です。
基本的にPC閲覧時のサイズを適用させます。
font-familyのコードを変更すれば、フォントを変えることができます。
注意点editor styleでは、通常のCSSと違い.editor-styles-wrapperを使用するので注意！
editor style cssを適用
最後にアクションフックでスタイルを投稿画面に適用させます。
ファイルの名前がeditor-style.cssじゃないと反映されないので注意してください。
以下のコードをfunction.phpの一番下にコピペしてください
// 投稿画面にCSSを読み込ませる
add_action('enqueue_block_editor_assets', function() {
$file_path = get_stylesheet_directory() . '/editor-style.css';
// ファイルの存在確認
if (file_exists($file_path)) {
$timestamp = date('Ymdgis', filemtime($file_path));
wp_enqueue_style(
'editor-style',
get_stylesheet_directory_uri() . '/editor-style.css',
[],
$timestamp
);
}
}, 20 );これでカスタマイズは終了です。
カスタマイズは自己責任で！
カスタマイズはこだわると悩みがつきません。
PHPなどをバックアップを取らずに変更してしまうと、取り返しのつかないこともあるので注意しましょう。
これ以降は微調整になります。
editor-style.cssの中身を変更しつつ調整してみましょう。
また、この方法でオリジナルで作った見出しやボックスのCSSを投稿画面に反映させることができます。
コーディングする必要があるので、少し難しいですが筆者は他サイトでは以下のようなカスタマイズもしています。（赤グラデーションが見出し）
AFFINGERではたくさんの見出しから選択できるので必要ないかもしれませんが、上級者向けの技として身についけておくといいかもしれません。