【ワードプレス】テキストエディタで文字を入力するスペースを増やす方法【プラグイン無し】

『Add Quick Tag』や『アフィンガー5』を使っていると、エディタの上の部分にボタンがたくさん並んできますよね。

大きいモニターを使って作業するならまだ問題ないですが、画面の小さいノートパソコンでテキストエディタをいじるのは至難の業。

僕も『Add Quick Tag』を使っているんですが、登録しているタグが多すぎてノートパソコンからテキストエディタを確認するのが不可能になってしまいました。

【知ってる人いたら教えてください】
AddQuickTagを導入した状態だとテキストエディタがくそ見づらくなってしまいます。

こういうタグをテキストエディタのみ非表示にする方法を知っている方がいれば教えてください！！

マジで悩んでるんで、ベストアンサーの方には土下座します#助けてください pic.twitter.com/GJwUHrRNkU

— まごのて＠一日3記事書く人(予定) (@tekken_blog) 2019年4月19日

プラグイン側の設定でテキストエディタだけ非表示にすることもできず、どうやって解決していいか全く分からない状態でした。

助けてください……。

そんな悩みをツイートしたところ、親切な方から解決策を教えていただきました。

優しい方にわざわざDMで教えていただけました！ https://t.co/IugfpFBP9A

— まごのて＠一日3記事書く人(予定) (@tekken_blog) 2019年4月19日

かなり感動したので記事としてまとめておきます。

僕と同じように悩んでいる方の解決策になれば嬉しいです。

『Add Quick Tag』の設定ではテキストエディタのみ非表示にはできない

『Add Quick Tag』の設定画面では、どの場所にツールボタンを表示するかを選択できるようになっています。

なので「投稿画面には表示したいけど、固定ページには要らない」というように柔軟な表示を選択できるんです。

『Add Quick Tag』の設定画面にはビジュアルエディタに表示するかどうかを選択できるようになっていますが、テキストエディタの選択は出来ません。

僕はテキストエディタのみ非表示にしたかったので、『Add Quick Tag』だけでは対応できませんでした。

ブラウザの拡張機能『Stylus』を使う

ということで悩んでいたところ、親切な方がわざわざDMで教えてくれました！

どうやらGoogle ChromeもしくはSafariの拡張機能である『Stylus』を使うことで、テキストエディタをスッキリさせられるらしい。

『Stylus』とは大雑把にいうと、Webの表示を変えられる拡張機能です。

「CSSって何？」という方に簡単に説明します。

そもそもWEBページはCSSという言語によって、なにをどこにどのように配置するかが指示されています。

本来CSSは発信者から設定しているんですが、『Stylus』で別のCSSを書いてあげることで、ブラウザ上で本来の表示とは違う表示にできるということです。

伝わりましたかね？

言葉で説明するのは難しいです！

テキストエディタで文字を入力するスペースを増やす方法

ということで、今回はテキストエディタに表示されているツールバーの高さを指定して見えなくなった部分はスクロール表示するように変更します。

①『Stylus』をダウンロード

まずは『Stylus』をダウンロードします。

下のリンクから『Stylus』のダウンロードページに飛んで、ダウンロードしてください。

＞＞Stylusダウンロード

上のリンクが使えない場合は、Chromeウェブストアで『Stylus』と検索してください。

②ワードプレスの投稿画面へ

『Stylus』のインストールが終わったら、ワードプレスの投稿画面に移動します。

ワードプレスの投稿画面で、画面右上に『S』のアイコンが表示されていることを確認してください。

③右上にある『Stylus』アイコンをクリック

投稿画面で『S] と表示されているアイコンをクリックします。

④ドメインを指定して、CSS追加画面に

アイコンをクリックすると、「www.(あなたのドメイン)/このURL」と表示されている場所があると思います。

僕は「tekken1224.com(当サイトのドメイン)」を選択しました。

すると、CSSを書き込める画面にジャンプします。

⑤『Stylus』でツールバーをスクロール表示するようなコードを追加

ということで、表示されているスタイルシートにコードを書き込みます。

表示されているスタイルシートに以下のコードを記入してください。

1. .quicktags-toolbar {
2.     height: 88px;
3.     overflow-y: scroll;
4. }

⑥完成

投稿画面に戻って、テキストエディタを確認してみてください。

ツールバーの表示エリアが狭くなって、スクロールバーが表示されていると思います。

スクロール表示以外にもカスタマイズできる

『Stylus』を使えば、WEBで表示されているもの全てをカスタマイズすることが出来ます。

例えば、

Youtubeの画面をソードアートオンラインのカスタマイズに出来たり

Twitterのダークモードをもっとかっこよくしたり

Facebookを化物語にしたり

できちゃいます。

これらは公式ホームページでCSSが配布されています。

＞＞Stylus公式サイト

気になったものがあったら、「Install Style」をクリックするだけ。

もちろんワードプレス用のカスタマイズも配布されています。

＞＞WordPress用テンプレート配布サイト

こんな感じで投稿画面をダークモードに設定することも可能です。

CSSに詳しい人なら、自分でコーディングして表示を変更させることも簡単。

ちなみに表示を変えるには、設定が変更されているページで「S」アイコンをクリックしてチェックを外すだけでOK。

まとめ

今回はワードプレスのテキストエディタに表示されるツールバーを小さくする方法でした。

今回使った『Stylus』を使えば、かなりいろんなことが出来ちゃいます。

僕はあんまりコードが得意ではないのでネットに転がっているコードをコピペして使うくらいになりそうですが、コーディングできる人ならWEBの自由度がさらに上がることでしょう。

みなさんも最適な作業環境を見つけてください。