2020年12月13日(日)
1級2次試験対策!!!

色彩検定関連記事まとめ

CocoonのGutenbergエディター使用時、ビジュアルエディターにCSSを適用してみた

スポンサーリンク
cocoon

こんにちは。いたみけいこ(‎@keiko_itami)です。


先日WordpressとCocoonの更新をしたら、ビジュアルエディターの表示にcssが一部反映されなくなってしまいました。
旧ビジュアルエディターに切り替えると反映されたのですが、私はGutenbergエディターを使いたいです。すぐにcss反映されるようにしたかったので対応してみました。

同じ症状で困っている人がいたら、参考にどうぞ。

この記事はこんな人に役に立ちます
  • Cocoonを使っている
  • Gutenbergエディターを使っている
  • cssを反映したビジュアルエディターを使いたい
スポンサーリンク

こんな画面になりました

左側にピターンと寄っている
h1が装飾されていない
文字が小さい

テーマファイルの編集はバックアップを取った上で行い、自己責任でお願いします。
何があっても責任は取れませんのでよろしくお願いします。

対応手順

Cocoon設定をする

Cocoon設定>エディター

以下二つの設定にチェックを入れて保存。
  • Gutenbergエディターを有効にする
  • エディターにテーマスタイルを反映させる

テーマエディターを編集する

外観>テーマエディター

ダッシュボードの外観からテーマエディターへ。

こちらの3つのファイルを使います。
Cocoon childテーマであることをご確認ください。

編集するテーマを選択:Cocoon Childテーマのための関数 (functions.php)

ここはいじっていない(と思う)のですが、私の内容を書いておくと、以下のような記述になっていました。

<?php //子テーマ用関数
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く

ビジュアルエディターのスタイルシート (editor-style.css)

以下のような記述になっています。

/*ビジュアルエディターのスタイルを書く*/

なので、この下に

スタイルシート (style.css)

の中身をコピペします。

その際はセレクタをシンプルにしてみてください。


.article h1
というような記述があった場合、
h1
とシンプルな形に変更して記述します。

ビジュアルエディターのスタイルシートに書かれた内容は、通常ビジュアルエディター内にのみ反映されます。

微調整

私の場合これで反映したら、エディター画面が左に寄っていたので、
真ん中に配置するコードを足しました。

真ん中に位置していたら足さなくてOKです。
足す場所は、editor-style.cssの中です。

/* エディター画面位置 */
.block-editor-writing-flow {
margin: 10px auto;
}


あとはフォントが小さくなっていたので、大きくしました。

/* フォントサイズ */
p {
font-size:18px; 
}

これで大体解決しました。

やはりcssが反映されている状態の方が書きやすいです。
すっきり!

コメント

タイトルとURLをコピーしました