【Cocoon初心者】ビジュアルエディター（ツールバー）が表示されない！？超簡単に「表示/非表示」を切り替える

WordPress・Cocoonでブログの記事を編集するときに、こんな疑問を持ったことはありませんか？

• ビジュアルエディター（ツールバー）の出し方が分からない。
• ビジュアルディターが、ブロックの真上にしか出ない。
• ↑しかも、ブロックに何か一文字でも入れないとビジュアルエディターが表示されない。
• でも、Cocoonの使い方を解説してくれるサイトでは、編集画面の一番上に常にビジュアルエディターが表示されている。

一体全体どうなってるの？？
と、ブログを始めたばかりの頃、わたしは何度も首を傾げていました。

それがあまりにも初歩的なことなのか、ネットで検索してみても、ビジュアルエディター（ツールバー）の出し入れについて懇切丁寧に解説しているサイトは見つけられませんでした。

本記事では、ビジュアルエディターの表示・非表示するやり方を、初心者の方にもわかりやすいように画像つきで解説しています。

【主婦にもできる！ブログの始め方】初心者向けに基礎からわかりやすく解説します

ブログ開設の手順よりも先に初心者が本当に教えてほしい基礎中の基礎を、一から分かりやすくご説明します。

gururinosora.com

2020.07.28

ビジュアルエディター（ツールバー）とは？

初心者には「ツールバー」と言い換えたほうが、分かりやすいし言葉に馴染みもあるかもしません。
正式には「ビジュアルエディター」と呼ばれる部分です。

テキストの装飾や、テンプレートの呼び出しなどを、スムーズに操作できるように配置されたボタンのことを指します。

↑上の画像が、記事編集画面の上部にビジュアルエディターを表示させた場合。

↓下の画像が、ブロック（※編集画面に出てくる段落ごとの四角い枠のことです）の真上にビジュアルエディターを表示させた場合です。

ブロックの真上にビジュアルエディターを表示する設定になっている時は、ブロックに何か一文字でも入力すると（画像の場合は「見本」と入力しました）、ビジュアルエディターが出てきます。
何も文字を入力していない状態ではビジュアルエディターは出てきません。

ビジュアルエディターの表示の違い

ビジュアルエディターが、記事編集画面の上部に出ようが、ブロックの真上に出ようが、一見どちらでも良いように思えます。

しかし、この二つの最大の違いが、ビジュアルエディターが常に表示されるか、常には表示されないか、にあります。

文字の装飾のためではなく、たとえばテンプレートの呼び出しをしたい時などは、ブロックにてきとうな一文字を入力してから、ビジュアルエディターを表示させてテンプレートを呼び出し、その後で余計な文字を削除する、というひと手間がかかります。

少しでも記事の書き方を効率化したいと思うと、できればそんな手間は省きたいところですよね。

Cocoonでビジュアルエディターを編集画面の上部に表示（常に表示）する方法

では、どうしたらビジュアルエディターを記事編集画面の上部に常に表示させることができるのか、画像付きでご説明します。

その方法は、実はとても簡単なんです。

操作はたったこれだけ！
しかしこの設定方法に気づくまでに、わたしはやり方を探しまわりました。

ソラ

こんなところにあったなんて…！と、気づいた時は脱力してしまうくらい、簡単なことでした。

編集画面の上部に非表示（ブロックの真上に表示）したい場合

ツールバーを、編集画面の上部に表示したいくない場合や、やはりブロックの真上に表示したほうが使いやすいという場合は、「トップツールバー」のチェックを外すだけでOKです。

ご自身の使いやすい方を選んでくださいね。

旧エディター式のビジュアルエディターの表示

ビジュアルエディターの表示の仕方について、Cocoonの旧エディター式のほうが使いやすかった、という意見も時々見受けられます。

個人的には、現在の仕様のほうが使いやすいと思っているのですが、どうしても旧エディターの表示に変えたい場合は、その設定も以下のとおり簡単にできます。

※旧エディターを使いたい場合のみ、チェックを入れてください。それ以外はこの設定を触る必要はありません。

Cocoonでビジュアルエディターを表示/非表示する方法・まとめ

Cocoonの記事編集画面で、ビジュアルエディター（ツールバー）をどこに表示させるかは、簡単な操作で変えることができます。

ちょっとしたことですが、快適に効率良く記事を作成するために、ぜひご活用ください。