ワードプレスもバージョンが上がり、エディターもGutenberg(グーテンベルグ)となりました。でも、今まで記事編集画面(エディター)にCSSを反映させていたのが、この新しいエディターで反映されない!となるとストレスも溜まり作業効率も落ちますよね。(私がそうですが ^-^;)

CSSをエディターに反映させる基本の対応は、テーマのための関数(functions.php)に関数追加して… となりますが、ちょっとだけのCSS追加だけでいいのに… という場合には、ちょっと面倒な気もします。(大した話ではないんですけどね)

ここではこの”ちょっとだけCSSを反映させたいだけ”、とか、”functions.php は触りたくない”、という場合に向けて、プラグインを使って簡単にできる方法をご紹介します。

基本の方法をちょっと見ておく

実際にはエディターに反映させる基本となる方法も、実はそれほど難しくはありませんので、簡単にご紹介です。

それは良いから本題に、という場合には、ここはサクッとスキップして下方をご覧くださいね。

ステップ1)スタイルシートをアップロード

エディターにCSSを反映させる基本的な方法としては、まずはCSSファイルを作成して所定の場所にアップロードです。

  • 1)CSSファイルを作成(例えば ” my_custom_editor_style.css”)
  • 2)そのファイルを、テーマフォルダの直下にアップロード

※)CSSファイルの置き場所は、テーマフォルダの直下ではなく、分かりやく例えばテーマフォルダの直下に「css」などのフォルダを作ってその中にアップロードする、としても良いです。

ステップ2)functions.php に関数追加

続いて、以下の関数をテーマの関数(functions.php)に追加

※)テーマフォルダの直下に「css」などのフォルダを作ってそこにcssファイルを置く場合には、add_editor_style( ‘css/my_custom_editor_style.css’ );と、フォルダのパス(css/)を忘れずに入れていきましょう。

以上で終わり、ということで、こうして見ると非常に単純です。

functions.php を編集することや、CSSファイルのアップロードすることに抵抗がなければ、普通にこの対応が良さそうですね。

上で見た functions.php に追加する関数については、英語ですが WordPress.com のTheme Support(この中の「Editor style」「Enqueuing the editor style」あたり)に書かれてますので、興味があれば見てみてください。

ちなみに、この基本の対応方法のメリットは、cssの記述で余計なセレクタを付ける必要がない、というところにありますね。

プラグインを使った対応法

ではプラグインを使った、ちょっとしたCSSをグーテンベルグのエディターに反映する方法を見て行きましょう。

1)プラグインのインストールと有効化

使うプラグインは、私もよく使っている「Simple Custom CSS and JS」。まず以下の手順でインストールと有効化を行います。

  • 1)プラグインの新規追加
    ワードプレスにログインし、「プラグイン」⇒「新規追加」を選択
  • 2)プラグインの検索
    プラグインの新規追加画面で、左上のキーワードに「Simple Custom CSS and JS」を入力して検索
  • 3)インストールと有効化
    プラグイン「Simple Custom CSS and JS」が表示されるので、「インストール」⇒「有効化」と順次クリック

2)プラグインでのCSSファイルの作り方

プラグインのインストールと有効化が終わったら、以下の手順でCSSを記述して公開します。

  • メニューから、①「Custom CSS & JS」を選択
  • ②「Add Custom CSS」をクリック!

↓↓↓↓↓↓

CSSの新規入力画面が以下のように開きます。

  • ①:タイトルを入れる
    (見た目の管理上だけのものなのでなんでもOK)
  • ②:ここにCSSを書く
    (最初はコメントが書かれてますが、一旦全部消して、そこに書けば良い)
  • ③:「In Admin」を選択
    (エディター画面だけに適用されるようにする設定)
  • ④:最後に「公開」をクリック!

以上の手順で、CSSファイルの作成、公開ができます。③の「エディター画面だけ」の選択は忘れずに。

CSSの記述の仕方

上の方で見た functions.php に記述する「基本の対応」の場合は不要ですが、このプラグインを使った「ちょこっと対応」の場合は、セレクタを付ける必要があります。

たとえば、文字色を赤色に設定する、というだけであれば、

となりますが、これだけだとエディタ領域だけでなく、p タグを使っている他の色々な所にも反映されて、結構大変なことになります(笑)

ということで、エディタ領域だけを特定するように “.editor-styles-wrapper”などを付けていく必要がありますね。(これが少々手間)

以上で、エディタ領域だけに反映されるようになるはずですので、試してみてください。

補足:エディタ画面の構造

プラグインでのちょこっと対応の参考として、グーテンベルグの構造を少し調べてみたので「この直下にだけに反映させたい」、など、セレクタをどう指定したらいいだろう、という場合の参考までに掲載しておきます。

色分けしてますが、色付きの枠で囲われたところ領域を指定するセレクタは、同じ色の背景色のものになります。

例)エディターの一番外枠(黄色)の場合
セレクタ:黄色背景の「.editor-styles-wrapper」

基本としては、エディター全体をカバーする「.editor-styles-wrapper」で指定すれば良さそうです。

「このブロックの直下の…だけに反映させたい」という場合には、基本は「.components-autocomplete」(薄緑色)で指定すれば良さそうですね。

画像の場合は、上の図で見るように、赤の「.editor-block-list__block-edit」か「この直下に…」という場合には、オレンジの「.components-resizable-box__container」で指定すれば良さそうです。

クラッシックエディターで、「この直下の…だけに反映させたい」という場合には(水色の)「.block-library-rich-text__tinymce」を使うと良さそうです。

今回のまとめ

テーマを自作したり、原形が分からないぐらいテーマをカスタマイズしたり、ともなれば、設定するcssも沢山になり、こうした場合は、正攻法の functions.php を編集して対応する方法が良いですね。

ただ、私の場合もそうですが、カスタマイズはガンガンしているけど、実は記事本文中はそんなに沢山cssでカスタマイズしていない、という「ちょっとだけカスタマイズをしている場合」では、ここで紹介しているプラグインを使った方法でも良いかもしれません。

プラグインで対応する場合、ファイルのアップロードなどは不要になって、ワードプレス内で一元管理できる、というメリットも生まれます。

いずれにしても、こうしたところは時間をかけてる場合ではありませんので、どちらにしてもサクサクっと対応を終わらせて、次の記事作成に向けて進めて行きましょう!

また、ブログの収益化について悩んでいたり、ネットビジネスに取り組みたいがどうしたらいいか分からない、という場合には、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね