【Tips】SANGOでGutenbergエディターにCSSを適用したらアイコンが□になる問題を解決

GutenbergエディターにCSSを適用したい

ガジェット探偵事務所へようこそ!所長のマーロウ(@marlowesgadget)です。

今回は筆者が苦労した記録を備忘録して残しておきます。

WordPressのGutenbergエディター便利ですよね。まだまだ未完成なところありますが、直感的に作業できて助かります。

一方で、ウェブデザインをカスタマイズすると、エディターとの間に齟齬が生じて、完成した状態がイメージしにくくなります。そこでCSSをエディターにも適用したくなってきました。

検索すると次の作業が必要とがわかりました。ちなみに筆者はSANGOというテーマを使用しています。

  1. editor-style.cssをstyle.cssと同じ階層に作成
  2. 子テーマのfunction.phpに以下の文を追記
  3. editor-style.cssに適用させたいcssを入力
/************************
editor-style.cssをグーテンベルクで表示
*************************/
function gutenberg_editor_css() {
   add_theme_support( 'editor-styles' );
   add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'gutenberg_editor_css' );

※function.phpをいじるときはバックアップを忘れずに。

editor-style.cssは空白ファイルでかまいません。サーバー側のファイルマネージャーで新規作成するか、FTPでアップロードするかです。詳しくはググってみてください。

※cssを記入するときに以前は.entry-contentsが必要でしたが、エディターでは不要なので削除して入力します。

.entry-content h2 {} → h2 {}

基本的に上記の作業だけで、エディターにCSSが適用されます。ところがSANGO特有の「SANGO見出し」にトラブルが発生してしまいました。

見出しアイコンが□で文字化け

SANGO見出しの冒頭についているアイコンが□となり文字化けしてしまっています。これは困りました。しかし検索しても同じ症状に関する情報が見つかりませんでした。

Chromeで検証してみると、

.editor-styles-wrapper .fa

というスタイルが邪魔をしていることがわかりました。faはFont Awesomeのスタイル。editor-styles-wrapperは上記のPHPで自動的に生成されるスタイルのようです。

さらに詳しく調べるとその中のfontが原因のようです。

本来の.faのスタイルよりも.editor-styles-wrapper .faが優先されているようです。

筆者CSSについては素人に毛が生えたようなレベルです。とりあえず.editor-styles-wrapper .faのfont項目を次のCSSを追加して上書きします。最後に!Importantもつけて強制的に優先処理させます。

.fa {
    font: normal normal 900 1em/1.4 "Font Awesome 5 Free"!important;
}

ちなみにFont Awesomeはウェイトが900、Font-familyを”Font Awesome 5 Free”とフリー版を指定してあげる必要があります。

また.editor-styles-wrapperは自動的に追記されるので、cssに追加する必要はなく、いきなり.faで始めることができます。

これで表示が元どおりになりました。

おそらく他にうまい方法があると思いますが、とりあえずこの方法でできたのでメモしておきます。

以上、ご参考まで。

コメントを残す

メールアドレスが公開されることはありません。