開発者について無料ダウンロードはこちら各種導入サポートメールを受け取る最終更新日:2020/06/09Gutenbergエディターで見たまま編集に対応するカスタマイズTweetPocketこんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。最新のワードプレスにはGutenberg(グーテンベルク)と呼ばれる少し特殊なエディターが採用されています。Editor(クラシックエディター)でしたが「WordPress5.0」からはグーテンベルクエディターへ変更になったのが理由です。GutenbergとClassicのエディターを見比べてみましょう。Classic(クラシック)エディターGutenbergエディターの投稿画面にCSSを読み込む方法Gutenbergエディターの投稿画面にCSSを適用する方法まとめGutenbergエディターで見たまま編集に対応するカスタマイズ見たまま編集の解説を行う前に「Gutenberg」エディターと「Classic」エディターの違いをご紹介いたします。画面を比較したあとにGutenbergエディターのカスタマイズ方法をご説明いたします。バージョン違いによる投稿画面の違いまずは以下の3つを比較してみましょう。以下はWordPress5.4.1での投稿画面です。Editorプラグインを有効化した際の投稿画面です。Classic(クラシック)エディターWordPress4系の最終バージョン4.9の投稿画面が以下です。ちなみにClassicエディターの公式サポートは「2021年まで」とされています。運営者全員が最新バージョンでサイトを運用しているわけではないので「2022年以降」にクラシックエディターが使えなくなることはありません。全員が「最新のWordPressを使える」に越したことはありませんが『導入サーバー側の問題』だったり『アップデートに応える技術者の不足』などあらゆる課題もあるのが現実です。そのためClassicエディターはずっと維持されるはずです。有志たちによる「classicpress.net」というプロジェクトもあるのでクラシックエディターがなくなるとは考えづらいです。Classicエディターは「TinyMCE」と呼ばれる有名なライブラリを使っている歴史のあるエディターなのですぐく使えなくするメリットがWordPress側にもないので継続されるのは間違いありません。最新テクノロジーの世界では「技術の進歩(開発者)と実際の活用方法(利用者)」はいつもイコールではないが現実です。以下のスクリプトを適用テーマ(functions.php)に記載して、テーマフォルダ内に「editor-style.css」を同梱すればCSSを投稿画面に読み込むことが可能です。テーマ内に「Classicエディター用」のeditor-style.cssが存在している場合は「gutenberg-editor-style.css」などに変更して読み込ませればOK。上記の通りcssを読み込ませたらCSSを準備していきましょう。editor-style.css内に記述するCSSは以下のように記述すればOKです。);と変更する場合は先述した通り「gutenberg-editor-style.css」内にCSSを記述する必要がありますのでお間違いなく。32px;}まとめWordPressの投稿画面にどんなエディターを使うかは意外と重要です。使い慣れたエディターであれば更新速度も上がりますが、操作に慣れないエディターを使っていると更新する気力も失ってしまいます。僕たちがSEOランディングページに「見たまま編集機能」を導入している理由も『お客様に更新意欲を向上してもらってコンテンツを作りたいと少しでも思ってもらえる工夫』の1つです。現時点ではSEOランディングページの“見たまま編集”は「Classicエディター」にしか対応していませんが、将来的には「Gutenbergエディター」でもClassicエディター同様の見たまま編集機能が使えるように準備を進められればと考えています。現時点では「Gutenbergエディター」の操作感が好みではないので、使い込む予定はありませんが、操作感により磨きがかかって『クラシックディター以上の使い心地』にまで進化すれば積極的に使っていきたいです。最新式の無料プラグインを事前公開WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。無料でDLしてお試しくださいませ。改良されたプラグインを確認するワードプレス専門家に丸投げするWPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。成果の出ないウェブサイトを90日間で改善するワードプレス専門アドバイザー。Webプログラミング技術からWordPress情報を発信しつつ「テクノロジーで世界を変える」と誓いデジタルマーケティングに汗を流す。成果の出ないウェブサイトを90日間で改善するワードプレス専門アドバイザーです。“アクセスが少ないウェブサイト”に対して明確な理由と解決策をご提示いたします。あてもなくコンテンツを作るのではなくしっかりと綿密な計画を練りましょう。