Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

WordPress管理画面ビジュアルエディタ上ボタンをスッキリさせるCSS:テーマCocoonで説明

スポンサーリンク

Cocoonビジュアルエディタ上のボタンをスッキリさせるCSSカスタマイズ

WordPressのビジュアルエディタを使ってる人でエディタの上にあるボタン、イタリック・左右寄せ・中央揃え・インデントを増やす減らすなど…使いますか?

使わないボタンは管理画面上から消し、スッキリさせてサクサクとタグ指定など出来たほうが良いですよね。

admin.cssをCocoon子テーマに導入したら、使わないボタン類をCSSで非表示にできます。

このカスタマイズの前に初心者さん向けに追加した記事よりCSSをサクッと導入してください❦

LINKCoccon管理画面スタイル変更に!CSSを子テーマに導入コピペで簡単、実装方法

どのように指定すれば良いか。その確認方法をザっと紹介していきます。

スポンサーリンク
スポンサーリンク

ビジュアル管理画面うえボタンを非表示にするCSS

ボタンを非表示にするには、消したいボタンを指定(#mceu_数字:後述)して以下CSSのように書くだけでOK!

例えば私の場合、以下のように指定しボタン類をスッキリさせてます。

#mceu_2,
#mceu_3,
#mceu_7,
#mceu_8,
#mceu_9,
#mceu_11,
#mceu_16,
#mceu_18,
#mceu_19,
#mceu_22,
#mceu_23,
#mceu_26,
#mceu_27,
#mceu_28,
#mceu_30,
#mceu_31,
#mceu_32,
#mceu_34 {
	display: none;
}

Before・After:ボタンがスッキリした様子

ポイント
  • いつも使うボタンだけを表示!
  • ムチャクチャ明瞭❦
  • スッキリして使いやすい^^
かうたっく
かうたっく

『あのボタン、どこだ???思考停止…。。。』と
ならない点が大きなメリット❦

説明ぼうや
説明ぼうや

確かに、かうたっく
基本同じボタンしか使わないしイイね!

ボタン#mceu_*数字*CSS指定、2つの確認方法

ボタンの指定方法は人・サイトによって非表示にしたいボタンが全く違ってきます。入れているプラグインによって配置や数字が変わったり。

私が確認した2つの方法と、PC検証ボタンですぐに確認できます。検証ボタンの使い方が分からない人はカンで行えるようザックリ説明しておきます。

1段目はCocoonユーザーさんはほとんど変わりないけど、2段目はプラグインが入るので変わってきます。まずは1段目から見てください。

1段目#mceu_数字:番号の確認方法:1つ目

以下画像とリストをご覧ください。

段落は0となっているのは、#mceu_0と指定すれば反映する感じです。画像の通りの番号なので、チェックしてください。イタリックを消したい場合は2なのでまずは、イタリックを消すCSSをadmin.cssに書いて更新して消えた事をチェックしてください。

#mceu_2 {
	display: none;
}

1段目はボタンは0から14まである

  • #mceu_0 段落
  • #mceu_1 スタイル
  • #mceu_2 B:太字
  • #mceu_3 I:イタリック
  • #mceu_4 番号なしリスト
  • #mceu_5 番号付きリスト
  • #mceu_6 引用
  • #mceu_7 左寄せ
  • #mceu_8 中央揃え
  • #mceu_9 右寄せ
  • #mceu_10 リンクの挿入/編集
  • #mceu_11 「続きを読む」タグを挿入
  • #mceu_12 集中執筆モード
  • #mceu_13 改ページ
  • #mceu_14 ツールバー切り替え

こんな感じで使った事がないボタンを非表示にしてください。

2・3段目のスタイル指定方法

上記同じ配列でしたら(15個)1段目がから14まで指定があるので次、2段目はmceu_15から始まります。

  1. 段落は0とし集中執筆モードまでいくつ表示されてるかを確認
  2. 後は右から順番に15・16と数えた数字を入れるだけ
  3. 3段目は2段目の続き番号ね❦

mceボタンstyle指定時セレクタの確認方法

私の場合ははadQuickTagを入れているので右から#mceu_15・#mceu_16となります。

  1. #mceu_15 adQuickTag
  2. #mceu_16 打ち消し
  3. #mceu_17 横ライン

~ 中略 ~

  1. #mceu_28 フォントサイズ
  2. #mceu_29 HTML挿入

3段目

  1. #mceu_30 ふきだし
  2. #mceu_31 テンプレート

~ 後略 ~

かうたっく
かうたっく

やんっ、よかったぁ~
意外とカンタンなのね!

説明ぼうや
説明ぼうや

そうだねぇ~
数を数えるだけだしさぁ^^

念のため記事を書く前にチェックしてくださいね❦

2つ目:要素の検証でサクッと確認

便利すぎる要素の検証画面上でボタンの指定をチェックします。

Edge・FireFox・Chromeなど検証画面の開きかた:Chromeでの使い方など詳細は以下をどうぞ。面白いですよ^^

LINK要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編

  1. 矢印ボタンを青くする
  2. 数字を見たい箇所にマウスを合わせる
  3. 見えた数字3・21・24と指定するだけ。

この3つだけ表示させたい時は以下CSSを書いてadmin.cssに貼り付ければOK!

要素の検証で確認する方法GIF画像で3か所指定方法を表示

CSSの例

#mceu_3,
#mceu_21,
#mceu_24 {
	display: none;
}
かうたっく
かうたっく

#mceu_24 {{の前だけ,は、付けちゃダメだよ!

説明ぼうや
説明ぼうや

了解
あとは半角小文字のみ使ってね!
ドンドン追記してスッキリさせよう^^

記事作成中、他のボタンを全部出したくなったとき

書いてる途中ボタンを全部表示させるには、念のため『下書き保存』をしてから要素の検証ボタンを開き、ソースを表示します。

  1. ソース
  2. ドメイン
  3. wp-content
  4. cocoon-child-master
  5. admin.css

と順番にピッピッピ~~と押したら、一時的にすべてのボタンを表示可能!

検証画面でどこを押せばCSSが表示されるか順番を書いた画像

/*とコメントアウトするだけ。

29行目の}のあとにも}*/と入れてください。また非表示にするのは/**/コメントをとればOK!

かうたっく
かうたっく

ここで編集してキチンと消えたか確認するのも便利だよ。

説明ぼうや
説明ぼうや

admin.cssに書いてる事だけが表示されるからはじめにstyleをいれたんだね。

ポイント
  • 下書き保存を押したり更新ボタンを押すと編集途中でも消えちゃうよ。

聞くよりやると便利さがわかりますよ。おすすめ~

LINK要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編

さいごに

ご自身で使いやすいよう、WordPressエディタボタンを非表示にしてタグ打ちをサクサクしやすいようにしてみてください。

それではかうたっくでした!

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る