【Cocoon】ビジュアルエディタのタイトルをカスタマイズしよう【WordPress】

はじめに
目指す形
カスタマイズのやり方
editor-style.cssを編集しよう
ビジュアルエディタ側を確認しよう
参考
おわりに

はじめに

今回はWordPressのビジュアルエディタのタイトルをカスタマイズするやり方について紹介していきます。

ブログの記事を執筆されている方は、常にビジュアルエディタと向かい合って作業します。

ビジュアルエディタが自分好みになるとモチベーションが上がりますよね。

気になる方はぜひ参考にしてください。

対象者

WordPressのカスタマイズをしたい方
ビジュアルエディタのタイトルの編集方法を知りたい方

ビジュアルエディタのカスタマイズまとめについてはこちら。

【Cocoon】ビジュアルエディタのカスタマイズまとめ【WordPress】

WordPressのCocoonテーマを使った場合のビジュアルエディタをカスタマイズする方法を紹介していきます。ビジュアルエディタのカスタマイズをして記事の作成効率を上げていきましょう。

それでは説明に移ります。

目指す形

目指す形は以下です。

タイトル部分が変更されているのが分かりますね。

それではビジュアルエディタをカスタマイズしていきましょう。

カスタマイズのやり方

ビジュアルエディタのタイトルをカスタマイズするにはeditor-style.cssを編集していきます。

editor-style.cssの編集方法は以下参考にしてください。

【Cocoon】WordPressのeditor-style.cssを編集してビジュアルエディタをカスタマイズしよう

WordPressのeditor-style.cssを編集して自分のサイトをカスタマイズするやり方について説明します。editor-style.cssが編集できるようになると、ご自身のサイトのデザインを好きなように変えることができます。管理画面から編集する方法とエディタから編集する方法の2つのやり方を紹介しています。

本記事ではWordPressのVer.5.8で説明していきます。

Ver.5.8より低いバージョンでは指定方法が異なりますのでご注意ください。

editor-style.cssを編集しよう

それではeditor-style.cssを編集していきましょう。

.edit-post-visual-editor__post-title-wrapper {
  color: inherit;
  background-color: skyblue;
}

上記編集をすることでビジュアルエディタのタイトルが変更されます。

色の指定はご自身のお好みでかまいません。

サイト側の文字色と背景色と合わせることをおすすめします。

ビジュアルエディタ側を確認しよう

変更が完了したらビジュアルエディタ側を確認しましょう。

以下のようになっているはずです。

参考

1つの例として私のスタイリングを載せておきます。

特にこだわりはないですがどこがどのように変更されるか参考になるかと思います。

.edit-post-visual-editor__post-title-wrapper {
 color: inherit;
 background-color: #f5f3f2;

 .editor-post-title__block {
  .editor-post-title__input {
   min-height: 200px;

   color: inherit;

   &::placeholder {
    color: inherit;
    opacity: 0.5;
   }

   &:focus {
    background-color: color.scale(rgba(#2b3231, 0), $alpha: 10%);
   }
  }
 }
}

style.cssで記述する場合は以下のようになります。

.edit-post-visual-editor__post-title-wrapper {
  color: inherit;
  background-color: #f5f3f2;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input {
  min-height: 200px;
  color: inherit;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.5;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input::-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input:-ms-input-placeholder {
  color: inherit;
  opacity: 0.5;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input::-ms-input-placeholder {
  color: inherit;
  opacity: 0.5;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input::placeholder {
  color: inherit;
  opacity: 0.5;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input:focus {
  background-color: rgba(43, 50, 49, 0.1);
}

ビジュアルエディタ側は以下のようになります。