【SANGO】Gutenbergエディタ記事作成画面で見出しデザインCSSを反映させる方法

2019-07-042019-07-06

URLをコピーしました！

Gutenbergエディタ

見出しのCSSが

反映されない問題

勃発！

まいど！Gutenberg入門者のけいしゅけ（@keisyukeblog）です☆

けいしゅけ

不満爆発や～っ！！！

Gutenbergエディタやと，見出しデザインが記事と同じものが表示されへんやんけぇぇぇっ！！！

Classicエディタ時代にできていたカスタマイズが使われへんって事なん？

タコちゅけ

それ，ライティングし難いじゃないでちゅか！！

WordPressテーマSANGOを使っているこのブログ。エディタをクラシックエディタからGutenbergに移行を試みています。しかし，実際にやってみると不慣れなだけでなく，記事作成画面での見出しデザインCSSが反映されないため記事が書き難くなってしまいました。

見出しのデザインが記事編集画面で実際の公開記事と同じように表示されるって非常に魅力的です。なぜなら，記事の完成形を常に確認しながらライティングできるからです。これ，非常に重要だと僕は考えていますが皆さんはどうでしょう？？

もしも，あなたが「なにそれ！？記事を書く画面でH2見出しやH3見出しが記事と同じデザイン表示されるんやったらやってみたい～！！」って思っているならこの記事は大当たりやと思います！！

やり方はすべてコピペのみで出来るように書いていますので，記事通りに作業するだけです。是非ともやってみてください。

上手く行った時にはTwitterなどで拡散したりコメントをいただけると嬉しいです！！

けいしゅけ

メッチャかんたんに，スグ再現できるよう記事を書きましたで～💛

やることはたったの３個だけ！
Gutenbergエディタ記事作成画面で見出しデザインCSSを反映させよう

マサオカブログ

デスクガジェットのレビューブログ

けいしゅけ

基本的な手順は上のリンク記事を読んでくださいね☆

Gutenbergエディタに見出しCSSを反映させる手順やで

子テーマのfunction.phpにコードを貼る

注意やっ！

function.phpを触るので必ずバックアップを取ってから作業してください。

＊いかなるトラブルも責任を負いかねます

PORIPUを使っている人は飛ばしてOK｜editor-style.cssをstyle.cssと同じ階層に作る

ここも，リンク先ページに詳しいやり方が書いていますのでこちらの記事では割愛します。

editor-style.css にCSSを書くと反映されます！

ただし！ここでのCSSの書き方にポイントがあるので教えますね。

クラシックエディタの場合，以下のように記載したと思います。

.entry-content h2 { position: relative; padding: 0.5em; background: #a6d3c8; color: white; } .entry-content h2::before{ position: absolute; content: ''; top: 100%; left: 0; border: none; border-bottom: solid 15px transparent; border-right: solid 20px rgb(149, 158, 155); }

しかし，Gutenbergエディタの場合は，『 .entry-content 』の記述が不要です。

よって editor-style.css に記述するなら以下のように書けばOK

h2 { position: relative; padding: 0.5em; background: #a6d3c8; color: white; } h2::before{ position: absolute; content: ''; top: 100%; left: 0; border: none; border-bottom: solid 15px transparent; border-right: solid 20px rgb(149, 158, 155); }

これで，バッチリGutenbergエディタで見出しCSSが反映されて表示されます。

同じ要領で，H3,H4見出しもCSSを記述すると全てエディタ内で記事と同じように見出しが表示されますので，メチャクチャ記事が書きやすくなりますよ☆

具体的な手順１）function.phpに次のコードを貼り付ける。

はじめの一歩

テーマエディタを開こう

外観➤テーマエディタを選ぶよう画面で説明しています。 — ブログのダッシュボード画面で，
外観 ➤ テーマエディタ
へと進んでクリックする

子テーマのfunction.phpを開こう

僕のブログでは，SANGO公認の子テーマ『PORIPU』を使っています。

function.php を開くと，16~18行目に function.phpへの追記は以下にと書かれている部分があります。この下に以下のコードをコピペしてください。

/************************************************************
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' );

けいしゅけ

コピペして，ファイルの更新を押せば，最初の手順は終了や☆

具体的な手順２）style.cssに見出しのCSSを記入しよう

ここが大事！

作業するのは，先ほどと同じ子テーマでの作業になります。

Qiita

Gutenbergのブロックエディターにテーマのスタイルを適用する方法 - Qiita WordPress 5.0からGutenbergと呼ばれる新しいコンテンツエディターが実装され、従来使われてきたTinyMCEエディターと置き換わる形となります。それに伴い、テーマの見た目...

上記のリンク記事を読んでいて分かったことなんですが，クラシックエディタで記事に反映させることができた見出しのデザインCSSってGutenbergエディタでは反映されないんです。

以前の見出しCSSの書き方やで

/************************************************************
見出しデザインＣＳＳを変更する
*************************************************************/
.entry-content h2 {
    position: relative;
    padding: 0.5em;
    background: #a6d3c8;
    color: white;
 }
 .entry-content h2::before{
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
 }

Gutenbergエディタに反映するためには『.entry-dontent』を消せばOK！！

Gutenberg対応のCSSは以下の通り

/************************************************************
Gutenbergエディタで見出しデザインCSSを表示させる！
*************************************************************/
h2 {
    position: relative;
    padding: 0.5em;
    background: #a6d3c8;
    color: white;
 } 
h2::before{
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
 }