WordPressのビジュアルエディタを使ってる人でエディタの上にあるボタン、イタリック・左右寄せ・中央揃え・インデントを増やす減らすなど…使いますか？
使わないボタンは管理画面上から消し、スッキリさせてサクサクとタグ指定など出来たほうが良いですよね。
admin.cssをCocoon子テーマに導入したら、使わないボタン類をCSSで非表示にできます。
このカスタマイズの前に初心者さん向けに追加した記事より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_43-body #mceu_34 {
display: none;
}
Before・After：ボタンがスッキリした様子
- いつも使うボタンだけを表示！
- ムチャクチャ明瞭❦
- スッキリして使いやすい＾＾
『あのボタン、どこだ？？？思考停止…。。。』と
ならない点が大きなメリット❦
確かに、かうたっく
基本同じボタンしか使わないしイイね！
ボタン#mceu_*数字*CSS指定、2つの確認方法
ボタンの指定方法は人・サイトによって非表示にしたいボタンが全く違ってきます。入れているプラグインによって配置や数字が変わったり。
私が確認した２つの方法と、PC検証ボタンですぐに確認できます。検証ボタンの使い方が分からない人はカンで行えるようザックリ説明しておきます。
１段目はCocoonユーザーさんはほとんど変わりないけど、2段目はプラグインが入るので変わってきます。まずは１段目から見てください。
1段目#mceu_数字：番号の確認方法：１つ目
以下画像とリストをご覧ください。
段落は0となっているのは、#mceu_0と指定すれば反映する感じです。画像の通りの番号なので、チェックしてください。イタリックを消したい場合は2なのでまずは、イタリックを消すCSSをadmin.cssに書いて更新して消えた事をチェックしてください。
#mceu_2 {
display: none;
}
- #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個）１段目が０から14まで指定があるので次、2段目はmceu_15から始まります。
- 段落は0とし集中執筆モードまでいくつ表示されてるかを確認
- 後は右から順番に15・16と数えた数字を入れるだけ
- 3段目は2段目の続き番号ね❦
私の場合ははadQuickTagを入れているので右から#mceu_15・#mceu_16となります。
- #mceu_15 adQuickTag
- #mceu_16 打ち消し
- #mceu_17 横ライン
～ 中略 ～
- #mceu_28 フォントサイズ
- #mceu_29 HTML挿入
3段目
- #mceu_30 ふきだし
- #mceu_31 テンプレート
～ 後略 ～
やんっ、よかったぁ～
意外とカンタンなのね！
そうだねぇ～
数を数えるだけだしさぁ＾＾
2つ目：要素の検証でサクッと確認
便利すぎる要素の検証画面上でボタンの指定をチェックします。
Edge・FireFox・Chromeなど検証画面の開きかた：Chromeでの使い方など詳細は以下をどうぞ。面白いですよ＾＾
LINK要素の検証（デベロッパーツール）の使い方！初心者がカスタマイズできる方法！HTMLとCSS入門編
- 矢印ボタンを青くする
- 数字を見たい箇所にマウスを合わせる
- 見えた数字3・21・24と指定するだけ。
この3つだけ表示させたい時は以下CSSを書いてadmin.cssに貼り付ければOK！
CSSの例
#mceu_3,
#mceu_21,
#mceu_24 {
display: none;
}
#mceu_24 {の{の前だけ,は、付けちゃダメだよ！
了解
あとは半角小文字のみ使ってね！
ドンドン追記してスッキリさせよう＾＾
記事作成中、他のボタンを全部出したくなったとき
書いてる途中ボタンを全部表示させるには、念のため『下書き保存』をしてから要素の検証ボタンを開き、ソースを表示します。
- ソース
- ドメイン
- wp-content
- cocoon-child-master
- admin.css
と順番にピッピッピ～～と押したら、一時的にすべてのボタンを表示可能！
/*とコメントアウトするだけ。
29行目の}のあとにも}*/と入れてください。また非表示にするのは/**/コメントをとればOK！
ここで編集してキチンと消えたか確認するのも便利だよ。
admin.cssに書いてる事だけが表示されるからはじめにstyleをいれたんだね。
- 下書き保存を押したり更新ボタンを押すと編集途中でも消えちゃうよ。
聞くよりやると便利さがわかりますよ。おすすめ～
さいごに
ご自身で使いやすいよう、WordPressエディタボタンを非表示にしてタグ打ちをサクサクしやすいようにしてみてください。
それではかうたっくでした！
Comments