MENU
アーカイブ

新人薬剤師応援 関連記事 一覧

あわせて読みたい
新人薬剤師がたった1週間で職場の先輩と打ち解ける為の6つのコツ本日のテーマ 新人薬剤師としてデビューしたあなたがたったの1週間で職場に打ち解けるためにするべきことはたったの6つ職場の人間関係を良好にするのは最初の1週間がメ...
あわせて読みたい
新人~ベテラン薬剤師まで対象|薬剤師の保険ルール学習支援ページまいど!けいしゅけ(@keisyukeblog)です☆ もしかして,保険の勉強を敬遠してませんか? 保険調剤薬局に勤めていると痛烈に感じることがあります。保険って事務さんの...
あわせて読みたい
内服薬調剤料の計算方法をたった30分で理解する!まいど!けいしゅけ(@keisyukeblog)です☆ さてさて,調剤料に関する記事を連載として書いていきます。今回は1つ目,内服薬の調剤料の算定について書いていきます。今...
あわせて読みたい
新人薬剤師が現場で主力になる4つのコツこの記事のテーマ たった1週間で職場に打ち解ける方法を伝える薬剤師として何をどうやって勉強すればいいか伝えるスキルを磨く具体的な方法を伝えるNext Levelに達する...
あわせて読みたい
新人やブランク明け薬剤師で勉強方法が分からないに9つの回答を贈ります本日のテーマ 保険調剤薬局で働くとなったが,勉強方法がわからないという声は多い不明なのは業務の流れ?調剤手技?保険ルール?まず何がわからないかを明確にし,重点...
あわせて読みたい
新人薬剤師の保険学習教材に【保険調剤Q&A】をお勧めします!新人薬剤師の保険学習教材に【保険調剤Q&A】をお勧めします! この言葉を僕は何年も何年も言い続けてきました。何人もの新人薬剤師の皆さんと一緒に現場で働いた経験...
あわせて読みたい
【新人薬剤師の転職】6パターンの「そんな保険調剤薬局やめてOK」まいど!けいしゅけ(@keisyukeblog)です☆ よく,『就職したからには3年は在籍しなきゃダメだ』なんて言います。この言葉が言いたいことは,少し自分にとって嫌なこと...
投稿が見つかりません。
腎機能評価ツールを無料公開中 ➡ココをタップ

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

  • URLをコピーしました!
※当ブログはアフィリエイト広告を利用しており,記事にアフィリエイトリンクを含むことがございます

Gutenbergエディタ

見出しのCSSが

反映されない問題

勃発!

まいど!Gutenberg入門者の けいしゅけ(@keisyukeblog)です☆

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/10/takosyuke_ikari-e1507940165186.jpg
けいしゅけ

不満爆発や~っ!!!

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

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

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/12/takotyukegimon-e1514038058602.jpg
タコちゅけ

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

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

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

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

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

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

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

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

目次

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

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

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

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を記述すると全てエディタ内で記事と同じように見出しが表示されますので,メチャクチャ記事が書きやすくなりますよ☆

具体的な手順1)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' );
https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

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

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

ここが大事!

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

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

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

以前の見出し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-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);
 }
https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2018/05/a151f08bbc247b1e302cb24159a61497.png
けいしゅけ

メチャクチャ単純やんけーーーー!!!!

具体的な手順3)editor-style.cssを子テーマに作って,style-cssの内容を貼り付ける

仕上げです

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

SANGO公認の子テーマ『PORIPU』 であれば,標準装備されているファイルです。

注意やっ!

もしもSANGOの公式子テーマをお使いの場合は存在しないファイルなので,サーバーのファイルマネージャーもしくは,FTPソフトを使ってstyle-cssやfunction.phpファイルのある階層に『editor-style.css』と名付けたファイルをアップロードする必要があります。

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

PORIPUをお使いならば editor-style.css に手順2で書いた見出しデザインCSSを貼り付けたらおしまいです☆

お疲れさまでした!


今回の記事はここまでや☆

最後まで読んでくださってホンマおおきにっ!!お時間を使って読んでくださったことに心から感謝申し上げます!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

この記事の感想をコメントしていただけるとメッチャうれしいです!!

ご意見&ご質問も遠慮なく書いてください☆皆さんとの対話を楽しみにしています☆

下のボタンを押すとコメント記入欄へジャンプできますよ~!!

ひとこと言うて行ったってや~

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2018/01/56896228914645f98625e06064579f7b.jpg
タコちゅけ

もしよければ,下のボタンを押してけいしゅけをフォローして欲しいでちゅ🍀

よろしくお願い致しましゅ~☆

Twitterでけいしゅけをフォロー

けいしゅけFacebookにいいね!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

記事の感想など,ひとこと頂けますか?

コメント一覧 (1件)

  • 1時間以上他の記事では解決できなかった現象がこちらの記事で解決されました!
    本当にありがとうございます!!!

コメントする

目次