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

はじめに
ビジュアルエディタのカスタマイズ方法
ビジュアルエディタのカスタマイズいろいろ
おわりに

はじめに

今回はWordPressのCocoonテーマを使った場合のビジュアルエディタをカスタマイズする方法をまとめましたので紹介していきます。

ビジュアルエディタのカスタマイズができるようになると記事の作成効率が上がって記事作成のやる気もあがります。

カスタマイズのやり方を知りたい方はぜひ参考にしてください。

対象者

Cocoonを使って記事を作成している方
ビジュアルエディタのカスタマイズ方法を知りたい方

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

ビジュアルエディタのカスタマイズ方法

WordPressのCocoonテーマを使った場合のビジュアルエディタをカスタマイズする方法についてまとめました。

Cocoonの公式サイトはこちら

Cocoon

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

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

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

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

ビジュアルエディタのカスタマイズいろいろ

文字色と背景色をカスタマイズする

ビジュアルエディタの文字色と背景色をカスタマイズする方法を知りたい方はこちらを参照してください。

【Cocoon】ビジュアルエディタの文字色と背景色をカスタマイズしよう【WordPress】

WordPressのビジュアルエディタの文字色と背景色をカスタマイズするやり方について紹介していきます。ブログの記事を執筆されている方は、常にビジュアルエディタと向かい合って作業します。ビジュアルエディタをカスタマイズしてブログ執筆のモチベーションを上げていきましょう。

ビジュアルエディタの文字色と背景色は記事側の色と合わせることをおすすめします。

文字色と背景色をカスタマイズするにはstyle.cssを編集するやり方で紹介しています。

タイトルをカスタマイズする

ビジュアルエディタのタイトルをカスタマイズする方法を知りたい方はこちらを参照してください。

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

今回はWordPressのビジュアルエディタのタイトルをカスタマイズするやり方について紹介していきます。ブログの記事を執筆されている方は、常にビジュアルエディタと向かい合って作業します。ビジュアルエディタをカスタマイズしてブログ執筆のモチベーションを上げていきましょう。

タイトル部分のエリアがどこまでなのか分からなくなる時がありますが、カスタマイズすると分かりやすくなります。

コンテンツのメイン部分をカスタマイズする

ビジュアルエディタのコンテンツのメイン部分をカスタマイズする方法を知りたい方はこちらを参照してください。

【Cocoon】ビジュアルエディタのコンテンツのメイン部分をカスタマイズしよう【WordPress】

今回はWordPressのビジュアルエディタのコンテンツのメイン部分をカスタマイズするやり方について紹介していきます。ブログの記事を執筆されている方は、常にビジュアルエディタと向かい合って作業します。ビジュアルエディタをカスタマイズしてブログ執筆のモチベーションを上げていきましょう。

ビジュアルエディタのコンテンツのメイン部分は記事側の色と合わせることをおすすめします。

見出し部分をカスタマイズする

ビジュアルエディタの見出し部分をカスタマイズする方法を知りたい方はこちらを参照してください。

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

今回はWordPressのサイトとビジュアルエディタの見出し部分をカスタマイズするやり方について紹介していきます。サイト側とビジュアルエディタ側の見出しのデザインを共通化することで確認工数を大幅に削減することができます。

こちらは記事側のデザインと統一させるためにstyle.cssと同時に編集する方法で紹介しています。

段落(pタグ)部分をカスタマイズする

ビジュアルエディタの段落(pタグ)部分をカスタマイズする方法を知りたい方はこちらを参照してください。

【Cocoon】ビジュアルエディタの段落(pタグ)部分をカスタマイズしよう【WordPress】

今回はWordPressのビジュアルエディタの段落(pタグ)部分をカスタマイズするやり方について紹介していきます。cssを少し編集するだけでビジュアルエディタのカーソルがどこの部分に当たっているか分かりやすくなるので参考にしてください。

デフォルト状態ではどこの段落(pタグ)部分にカーソルが当たっているか分からないですが、カスタマイズすることによって分かりやすくなります。

スペーサーをカスタマイズする

ビジュアルエディタのスペーサーをカスタマイズする方法を知りたい方はこちらを参照してください。

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

今回はWordPressのビジュアルエディタのスペーサーをカスタマイズするやり方について紹介していきます。スペーサーは段落ごとのスペースを空けるのに便利です。ただしデフォルト状態のビジュアルエディタではどこにスペーサーを入れたのか分からなくなって管理できなくなってしまいます。cssを少し編集するだけでビジュアルエディタのスペーサーがどこの部分に入っているか分かりやすくなるので参考にしてください。

スペーサーは透明なのでどこに挿入したのか管理しにくいですが、カスタマイズをすることで管理しやすくなります。

バッジ部分をカスタマイズする

ビジュアルエディタのバッジ部分をカスタマイズする方法を知りたい方はこちらを参照してください。

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

今回はWordPressのビジュアルエディタのバッジをカスタマイズするやり方について紹介していきます。バッジは文章を強調するのに便利です。ただしデフォルト状態のビジュアルエディタでは編集中にバッジをアクティブにすると文字が透明になってしまい非常に使い勝手が悪いです。cssを少し編集するだけでビジュアルエディタのバッジ編集中の文字が見えるようになりますので参考にしてください。

バッジにカーソルをあてると文字が透明になってしまいますが、カスタマイズで色をつけることができます。

おわりに

以上WordPressのCocoonテーマを使った場合のビジュアルエディタをカスタマイズする方法を紹介しました。

いかがだったでしょうか。

ビジュアルエディタのカスタマイズをして記事の作成効率を上げていきましょう。