WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

WordPress投稿のテキスト画面が、超見やすいCSSカスタマイズ!スマホ・タブレットでミスタップを防ぐコード

WordPressのエディタで記事を書いて、装飾したいときテキスト画面を開くと見にくい!またスマホやタブレットで書いてると、文字が小さく行間がないから、別の場所をミスタップ!

5分の作業でWordPressのテキストエディタを見やすく、スマホ・iPadでミスタップを減らすには、CSSで装飾したら即、解決!フォントサイズを大きくして、行間をゆったりすれば、爪の長い女性でもミスタップすることなく、タグの入力しやすくなります。

あと、文字の間が詰まってるから、少しスぺースを広げスタイルを変更して、サーバーのFTPにあるCSSに追記します。簡単だけど慣れない作業。。カスタマイズの工程を1から説明するので、手順を確認しながら済ませ、ミスタップのストレスを解消しましょう!

初心者向けに書いてるので、読み飛ばしながらどうぞ。

WordPressのテキスト画面のビフォーアフター

スポンサーリンク

WordPressの記事を書くテキスト画面を、見やすく装飾したCSS

スマホやタブレットで記事を書いてて、アドクイックタグを使うとき、テキスト画面はミスタップしやすいから、文字を大きく行間と文字の間隔を広げるCSSを書けば、ストレスがへりますよね。

CSSを指定して見やすく変更するためにやったこと。その変化を画像で見てみましょう。

WordPress元のテキスト画面

コレを指定、フォントサイズを16px、line-height:行間のたかさ、letter-spacing、文字どうしの間隔を0.05emにを変更したら下記のように変わります。

エディタ画面の文字

かなり見やすくなりました❦

昔の少女漫画風イラスト:喜びの遠い目

これらの指定をCSSで書くと下記のとおり。

#wp-content-editor-container .wp-editor-area {
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

フォントファミリーはSimplicity2のコードを使いました。

※行間の広さについて。

line-heightプロパティは使い方とブラウザの種類により、表示や印刷に不具合が出る場合があります。例えばNetscape Navigator4.xでは、line-heightプロパティを適用した範囲内に画像とテキストが混在していると、 画像とテキストが重なって表示されてしまうので注意してください。

引用元:line-height…行の高さを指定する|スタイルシートリファレンス

※文字の間隔の補足

pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。

引用元:letter-spacing…文字の間隔を指定する|スタイルシートリファレンス

ミスタップ対策として、フォントサイズを16px、line-height行間を2に指定すると、行の高さが変わってきます。

エディタ画面の文字の変更後

フォントサイズを16px、line-height行間を1.8、letter-spacing文字の間隔を0.1emに指定したら、文字どうしの間隔がもっと開くので、好みによって数値を変更してみてくださいね。

エディタ画面の文字間隔変更

ビジュアルエディタとテキストエディタの違いを出したい・微妙に色を変更したい場合。背景の色をグレーにしたい場合はこんな感じ。

背景グレー

作業中どっちがどっちか、分かんなくなるのが嫌な人用の比較として。

ビジュアルエディタ画面

背景グレーを足した場合のCSSは下記。

#wp-content-editor-container .wp-editor-area {
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.05em;
	background: #f1f1f1; /* Gray */
}

このカスタマイズの欠点❦

このカスタマイズはWordPressの更新をすると、CSSも更新されカスタマイズが消えます…。

昔の少女漫画風イラスト:ショックが大きくて白目

Simplicityなら、欠点を克服❦

昔の少女漫画風イラスト:喜びの遠い目
以降チェックしてください❦

PCで簡単に表示確認!Chromeのブラウザで紹介

WordPressのテキストエディタを開き、キーボードのF12を押すと、要素の検証画面で表示確認ができます。

画面の中ほどにある矢印マークをクリックして青くしたら、テキスト画面(青くなってる所)をクリック。次にCSSのeditor.min.cssをクリック。

Chrome要素の検証画面の説明

{}マークを押して表示を見やすくしたら、下へスクロールし一番下に適当な文字を入れ、コードをコピペすれば、表示確認できますよ。

要素の検証画面の説明

値を変えて調整したら、その部分をコピーして、FTPにあるeditor.min.cssファイルに貼り付ければOK!

要素の検証はアチコチのページでも紹介してるほどです。興味があれば、ページ内検索画面へどうぞ。検証画面でCSSを使うと、リアルタイムで変更が表示されて面白いですよぉ^^

※スマホ・タブレットユーザーさんは、要素の検証はできません…、ごめんなさい❦

昔の少女漫画風イラスト:顔面蒼白

Simplicity子テーマで編集できるようにカスタマイズ

以前はWordPressコアファイルに直接コードをコピペしてましたが、Simplicityの子テーマ側で編集できるようにPHPをカスタマイズしました。

  • ほかのテーマでは試してませんが。

テーマがSimplicity2の人は、チェックしてください。

WordPressテキストエディタや管理画面のスタイルをSimplicity2子テーマ内で編集するカスタマイズ
WordPressのテキストエディタは文字が小さく見にくいので、wp-includes/cssフォルダ内にあるWPコアファイルeditor.min.cssを直接編集していました。アップ...

LINKWordPressテキストエディタや管理画面のスタイルをSimplicity2子テーマ内で編集するカスタマイズ

CSSをサーバーへアップする2つの方法

CSSをコピペする場所は、サーバーにあるCSSファイルです。

FTPソフトを使うより、サーバーのWeb上FTPを利用すると便利です!環境によって色々でしょうから、2つの方法を書きますね。

CSSを貼り付けたあと反映しないとき、ブラウザに古いデータが残ってる状態です。その古いデータ(キャッシュ)を削除してブラウザを再読み込み(リロード)したら反映しますよ。

キャッシュの削除方法は、検索すれば具体的にわかるので、やり方忘れたなら検索がオススメ!

キャッシュ クリアさらにChrome・Safariとかのブラウザ、Android・iOS・Macなど入れるとより具体的にヒットしますね^^

サーバーにあるWeb上のFTPから追記する

ロリポップのサーバーFTPとエックスサーバーの両方のWebFTPで説明します。

ロリポップサーバーFTPから編集する

ロリポップFTPへアクセスする場所

ロリポップにログインし管理画面からサーバー管理・設定より、ロリポップ!FTPをクリックしてログイン。※スマホ・タブレットからログインした場合は、画面一番下にあるPC版に切り替えをクリックしてください。

サーバーのロリポップFTPに入るIDとパスワードの確認方法

LINK外出先で使えるロリポップFTP!ファイル編集やアップロード・ダウンロード・ファイル転送ができて便利な使い方

エックスサーバーWebFTPのログイン場所

インフォパネルのファイルマネージャからWebFTPにログイン

エックスサーバーは、ファイルマネージャよりWebFTPへログインします。IDとパスワードはサーバーパネルと同じ可能性が高いです。

CSSを編集し保存。editor.min.cssファイルの場所と編集場所

ロリポップの場合

追記するeditor.min.css圧縮CSSファイルは、ブログフォルダが置いてある階層wp-adminフォルダと同じ階層にあるwp-includesフォルダ内から入ります。

ロリポップのパス:ドメイン/wp-includes/css/editor.min.css

ロリポップのCSSを追記する説明

editor.min.cssファイルの一番最後に追記し、保存をクリックして完了!

ついでにとなりのダウンロードをクリックしてバックアップをとっておくと良いですね。

ムチャクチャ簡単ですが、私の環境ではChromeで、このファイルのみ読み込みが完了しなかったので、Edgeを使いました。

後日この便利なサーバーFTPでのバックアップと復元方法を紹介します!興味があれば、またブログをのぞいてくださいね❦

エックスサーバーの場合

エックスサーバーのパス:ドメイン/public_html/wp-includes/css/editor.min.css

editor.min.cssの左側にチェックを入れて編集をクリック!

エックスサーバーのWebFTPの説明

CSSを一番下に追記して、編集をクリックしたら完成!

エックスサーバーのWebFTP画面追記:保存の説明

WebFTP:追記し、編集で保存完了!

CSSファイルをバックアップする場所

さいごに1つ前の画面に戻って、画像にあるピンク色のeditor.min.cssをクリックしたら、ダウンロードしてローカルにファイルを保管できます。

FTPソフトを使ってeditor.min.cssを編集する場合

直接編集できないFTPソフトの場合、editor.min.cssをダウンロードします。

ファイルまでのパス:ドメイン/(public_html/)wp-includes/css/editor.min.css

FTPソフトをダウンロードしてない場合はFFFTPの導入:初期設定とバックアップでサクッとインストールしてから始めましょうか❦

wp-includesフォルダ内にある、CSSフォルダ内のeditor.min.cssを右側のサーバーファイルから、ローカル環境のPC上にダウンロードします。

FTPソフトのダウンロード

editor.min.cssファイルを直接開くと、圧縮ファイルだからか、うまく表示できないんですね。メモ帳を起動して、ファイルの項目から開くと表示されました。

editor.min.cssファイルがあるはずの場所に表示されてない場合、ファイルの種類すべてのファイルにすると、表示されますよっ。

Windowsのメモ帳画面

editor.min.cssファイルの一番うしろに追記し編集保存

editor.min.cssファイルの一番最後を探したら、改行してCSSのコードをペタっと貼り付けると、次編集しやすいです。

メモ帳に貼りつけた様子

一旦PC上に上書き保存。

今度は同じ場所にPC側から、サーバー側へアップロードして上書きします。

サーバー側のパスがあってるか確認を!

FTPソフトでアップする様子

これで完了!editor.min.cssファイルをアックアップフォルダなどに置いておくと、ローカル環境で迷子にならずに済みそうです^^

反映されてなければキャッシュを削除すればOK!

ビジュアルエディタに装飾を反映させる方法は下記をどうぞ。

LINKAddQuicktagの装飾!WordPressビジュアルエディタにCSSを反映させよう

管理画面ビジュアルエディタのCSSを導入してない場合は、下記をどうぞ。

LINKWordPressの投稿画面の文字が小さいのでカスタマイズやってみた!劇的に見やすくなるので紹介

さいごに

かなり簡単にテキストエディタの見栄えが良くなりました。モバイル・タブレットでのタップが以前よりやりやすいものになっていればと思ってます!

それから管理画面に複数入れる状況でしたら、みんなが見やすくなるのもメリットです。WordPressのエディタ以外で良いエディタが早く見つかりますように❦

それでは、かうたっくでした。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
CSS
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

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

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

トップへ戻る
タイトルとURLをコピーしました