WordPressのエディタで記事を書いて、装飾したいときテキスト画面を開くと見にくい！またスマホやタブレットで書いてると、文字が小さく行間がないから、別の場所をミスタップ！
5分の作業でWordPressのテキストエディタを見やすく、スマホ・iPadでミスタップを減らすには、CSSで装飾したら即、解決！フォントサイズを大きくして、行間をゆったりすれば、爪の長い女性でもミスタップすることなく、タグの入力しやすくなります。
あと、文字の間が詰まってるから、少しスぺースを広げスタイルを変更して、サーバーのFTPにあるCSSに追記します。簡単だけど慣れない作業。。カスタマイズの工程を1から説明するので、手順を確認しながら済ませ、ミスタップのストレスを解消しましょう！
初心者向けに書いてるので、読み飛ばしながらどうぞ。
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プロパティを適用した範囲内に画像とテキストが混在していると、 画像とテキストが重なって表示されてしまうので注意してください。
※文字の間隔の補足
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
ミスタップ対策として、フォントサイズを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をクリック。
｛｝マークを押して表示を見やすくしたら、下へスクロールし一番下に適当な文字を入れ、コードをコピペすれば、表示確認できますよ。
値を変えて調整したら、その部分をコピーして、FTPにあるeditor.min.cssファイルに貼り付ければOK！
要素の検証はアチコチのページでも紹介してるほどです。興味があれば、ページ内検索画面へどうぞ。検証画面でCSSを使うと、リアルタイムで変更が表示されて面白いですよぉ＾＾
※スマホ・タブレットユーザーさんは、要素の検証はできません…、ごめんなさい❦
Simplicity子テーマで編集できるようにカスタマイズ
以前はWordPressコアファイルに直接コードをコピペしてましたが、Simplicityの子テーマ側で編集できるようにPHPをカスタマイズしました。
- ほかのテーマでは試してませんが。
テーマがSimplicity2の人は、チェックしてください。
LINKWordPressテキストエディタや管理画面のスタイルをSimplicity2子テーマ内で編集するカスタマイズ
CSSをサーバーへアップする2つの方法
CSSをコピペする場所は、サーバーにあるCSSファイルです。
FTPソフトを使うより、サーバーのWeb上FTPを利用すると便利です！環境によって色々でしょうから、2つの方法を書きますね。
CSSを貼り付けたあと反映しないとき、ブラウザに古いデータが残ってる状態です。その古いデータ（キャッシュ）を削除してブラウザを再読み込み（リロード）したら反映しますよ。
キャッシュの削除方法は、検索すれば具体的にわかるので、やり方忘れたなら検索がオススメ！
キャッシュ クリアさらにChrome・Safariとかのブラウザ、Android・iOS・Macなど入れるとより具体的にヒットしますね＾＾
サーバーにあるWeb上のFTPから追記する
ロリポップのサーバーFTPとエックスサーバーの両方のWebFTPで説明します。
ロリポップサーバーFTPから編集する
ロリポップにログインし管理画面からサーバー管理・設定より、ロリポップ！FTPをクリックしてログイン。※スマホ・タブレットからログインした場合は、画面一番下にあるPC版に切り替えをクリックしてください。
サーバーのロリポップFTPに入るIDとパスワードの確認方法
LINK外出先で使えるロリポップFTP！ファイル編集やアップロード・ダウンロード・ファイル転送ができて便利な使い方
エックスサーバーWebFTPのログイン場所
エックスサーバーは、ファイルマネージャよりWebFTPへログインします。IDとパスワードはサーバーパネルと同じ可能性が高いです。
CSSを編集し保存。editor.min.cssファイルの場所と編集場所
ロリポップの場合
追記するeditor.min.css圧縮CSSファイルは、ブログフォルダが置いてある階層wp-adminフォルダと同じ階層にあるwp-includesフォルダ内から入ります。
ロリポップのパス：ドメイン/wp-includes/css/editor.min.css
editor.min.cssファイルの一番最後に追記し、保存をクリックして完了！
ついでにとなりのダウンロードをクリックしてバックアップをとっておくと良いですね。
ムチャクチャ簡単ですが、私の環境ではChromeで、このファイルのみ読み込みが完了しなかったので、Edgeを使いました。
後日この便利なサーバーFTPでのバックアップと復元方法を紹介します！興味があれば、またブログをのぞいてくださいね❦
エックスサーバーの場合
エックスサーバーのパス：ドメイン/public_html/wp-includes/css/editor.min.css
editor.min.cssの左側にチェックを入れて編集をクリック！
CSSを一番下に追記して、編集をクリックしたら完成！
WebFTP：追記し、編集で保存完了！
さいごに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上にダウンロードします。
editor.min.cssファイルを直接開くと、圧縮ファイルだからか、うまく表示できないんですね。メモ帳を起動して、ファイルの項目から開くと表示されました。
editor.min.cssファイルがあるはずの場所に表示されてない場合、ファイルの種類をすべてのファイルにすると、表示されますよっ。
editor.min.cssファイルの一番うしろに追記し編集保存
editor.min.cssファイルの一番最後を探したら、改行してCSSのコードをペタっと貼り付けると、次編集しやすいです。
一旦PC上に上書き保存。
今度は同じ場所にPC側から、サーバー側へアップロードして上書きします。
サーバー側のパスがあってるか確認を！
これで完了！editor.min.cssファイルをアックアップフォルダなどに置いておくと、ローカル環境で迷子にならずに済みそうです＾＾
反映されてなければキャッシュを削除すればOK！
ビジュアルエディタに装飾を反映させる方法は下記をどうぞ。
LINKAddQuicktagの装飾！WordPressビジュアルエディタにCSSを反映させよう
管理画面ビジュアルエディタのCSSを導入してない場合は、下記をどうぞ。
さいごに
かなり簡単にテキストエディタの見栄えが良くなりました。モバイル・タブレットでのタップが以前よりやりやすいものになっていればと思ってます！
それから管理画面に複数入れる状況でしたら、みんなが見やすくなるのもメリットです。WordPressのエディタ以外で良いエディタが早く見つかりますように❦
それでは、かうたっくでした。
Comments