WordPressの投稿画面って、フォントサイズが小さいって感じた事ありませんか?ビジュアルエディターのスタイルシートを読み込む為にphpを触るのは、ちょっと嫌だし面倒だなぁって思ってるなら一度試して頂きたいっ!
要素の検証を使って簡易的にではありますけど、下書き保存の更新をしない限りフォントサイズを大きくしてブログのコンテンツの幅の通りで折り返すようにできます。
要素の検証から「editor-style.css」にコードをコピペするだけでphpを触らずに一時的に投稿画面のビジュアルモードが見やすくなるんですけど、良し悪しは下記。
良い点
- phpを触らないで済む。
悪い点
- 更新「下書き保存」したらまた要素の検証を開いてコードを貼り付けないとダメ
PCでビジュアル画面のフォントを見やすくして更に、コンテンツの幅を指定してすればブログと同じ場所で改行しますっ。phpを触るのが嫌な人に試してもらいたいので手順を書いていきますねっ。
投稿画面の要素の検証でeditor-style.cssにコードを追記すると一時的に画面が見やすくなる。
ビジュアルエディターを開いたまま、要素の検証を開き投稿画面のスタイルシートeditor-style.cssにコードを追記するだけで、画面が一段と見やすくなります。
要素の検証の開き方は下記。
- Windowsの場合『Ctrl』+『Shift』+『C』キーの同時押し
- Macの場合のショートカット『control⌃』+『option⌥』+『C』キー
以下、手順を順番に書いていきますねっ。
- Elementsのタブが開かれてたら、Sourceのタブをクリック
Sourcesをクリックする
- editor-style.cssを探したいので、フォルダが見えるように画面を広げる
画像の赤線を右へ広げる
- 「wp-content」→「themes」→「今使ってるテーマ」と順にダブルクリック→「editor-style.css」をクリック
- editor-style.cssが右に出てくるので、最終行に1などと書き込みドラックして反転させる
- コードを貼り付ける。
body.mceContentBody { font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif; margin: 20px 30px; line-height: 170%; width: 628px; }
- 貼り付け前:字が小さく改行されてない
- 貼り付け後:ブログと同じ「フォントサイズ」「コンテンツの幅」になり改行される。
これで、見やすくなりましたねっ♪
cssの解説
簡単にコードを貼り付けたら出来ますけど、意味も知りたいですから解説していきますねっ。
body.mceContentBody { font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif; margin: 20px 30px; line-height: 170%; width: 628px; }
body.mceContentBody、font、margin、line-height、widthを簡単に説明しますねっ。
「body.mceContentBody」って何
これは、htmlタグ「body」の中にある、class名「mceContentBody」を装飾しますよ投稿画面のビジュアルのhtmlのコードを簡略化したものが下記です。
<body id="tinymce" class="mce-content-body editor-area mceContentBody webkit wp-editor wp-autoresize html4-captions" data-id="content" contenteditable="true" style="overflow-y: hidden;"><p>文字</p></body>
もっと簡単にしたものが下記。
<body class="mce-content-body・・・"> </body>
htmlタグ「body」の中にある、class名「mceContentBody」の装飾をしますよっ。{ここから、}ここまで。
body.mceContentBody {
何を: どんな風にするか;
}
- 「body.mceContentBody」のことをCSSで「セレクタ」
- 「何を」の部分を「プロパティ」
- 「どんな風にするか」の部分が「値」って言います。
フォントサイズを指定の仕方
2行目、font: 16pxのところにブログ本文と同じフォントサイズを入れて、コンテンツの幅を入力します。
body.mceContentBody { font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif; margin: 20px 30px; line-height: 170%; width: 628px; }
font-familyである「’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Meiryo, sans-serif」通常は、『font-family: フォントの種類;』と書くイメージがありますが、editor-style.cssはこのように書かれていました。
複数書いてあるのは、使ってるPCやスマホなどによってインストールされてないものがある場合用に複数あります。好みがあるのであれば、左の方に好きなフォントを入れて置くのも良いですねっ。詳しい事は下記リンクがわかりやすいです。
参考Font−familyのベストな書き方 2015年版|それからデザイン スタッフブログ
ラインの外側に余白をつけるマージン
marginは、外側の余白です。margin: 20px 30px;ってなると、外側の余白は、上下20pxで左右が30pxとなります。
margin: 20px 25px 30px 35px;でしたら、外側の余白は、上20px、右25px、下30px、左35pxとなりますよっ!って意味なので上から時計回りって覚えておくと忘れないですねっ。F
外側の余白は好みなので、投稿画面のマージンの有りなしで比較してみますねっ、結果Fは下記の通りです。

マージンなしの投稿画面

マージンありの投稿画面
ラインハイトline-heighは行間のサイズ指定
行間に指定がないと文字を大きくした時に文字と文字の一部がかさなってしまうんですねっ。そこで行間の高さを指定してあげたら問題ないけどここであまり関係ないので。。比較だけしとておきましょう。
line-height: 170%;の有り無し比較。

line-heigh指定なし

line-heigh指定あり
行間に高さを指定した方が見やすくなってるのもわかりますねっ。
自分のブログのコンテンツの幅widthの調べ方
コンテンツの幅は、CSSを見れば解りますけど、どこに書いてたか。。探すのも面倒なので要素の検証でサクッっと調べる方法です。手順は下記で要素の検証の開きかたは上述の通り。段落などコンテンツ部分にマウスオーバーすれば幅が表示されます。
ただし、PC画面をサイドバーまでしっかり表示してください。

ブログの表示をサイドバーまでガッツリ表示させて調べる。
Gush2のコンテンツ幅は604px
段落を表示させると604pxとわかる。

Gush2は、604pxとわかる
gush4のコンテンツ幅は、628px
p段落 628pxと解る

gush4のp段落 628pxと解る
pは段落ですけど、コンテンツの幅はsectionと指定されてます。もちろんコンテンツの幅の事ですので628px。

gush4のコンテンツはsectinで幅628pxと解る。
stinger5のコンテンツの幅は、580px
デフォルトの状態ですので、段落pを見たとき下記。

stinger5は580px
stinger5のコンテンツ部分は、sectionで同様580px。
さいごに
要素の検証で一度試してみて、実際にカスタマイズしたくなったらWordPressの投稿画面の文字が小さいのでカスタマイズ、劇的に見やすくなる方法をどうぞ。
ビジュアル画面ではなく、テキストエディタのカスタマイズは下記を^^
LINKWordPress投稿のテキスト画面が、超見やすいCSSカスタマイズ!スマホ・タブレットでミスタップを防ぐコード
それではっ、かうたっくでした♪
Comments