WordPressの投稿画面（ビジュアルモード）にCSSを追加して見やすくする方法

2013年8月26日

今回はWordPressの編集に関する小ネタです。
WordPressをビジュアルモードで編集していると、画面が結構見づらい！
字も小さいし、

特にtable（テーブル）とか嫌がらせ?

というくらい扱いづらい。

こんな見にくい投稿画面も、少し手を加えてやれば・・・

あら素敵！

文字も大きく、tableにスペースも出来て、
こんな風に断然見やすくなります！

最初に一度やっておけば、ずっと快適ですよ。

photo credit: somenice via photopin cc

投稿画面にCSSを反映させて見やすくする方法

WordPressのフォルダの中に「wp-includes」というフォルダがあります。

これをクリックして、その後も
「js」→「tinymce」→「theme」→「advanced」→「skins」→「wp_theme」と進み

最後の「content.css」を開きます。

画像はFFFTPで一度、content.cssをダウンロードしてエディタ（メモ帳）で開いています。

content.cssを編集

このcontent.cssの「/*WordPress styles*/」以下が、ビジュアルモードの投稿画面のCSSです。ここに反映させたいCSSを追記して下さい。以下は例です。

table{
margin-bottom:10px;
}

td {
color: #000;
font-size: 14px;
margin: 8px;
padding:10px;
vertical-align: top;
}

div{ 
border: 1px dotted #FF0000;
padding: 10px;
margin-bottom: 10px;
	}

*{
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka",sans-serif;
 }

p {
font-size: 14px;
line-height: 23px;
margin-bottom: 10px;
	}

span{ 
border: 1px dotted #0CF;
padding: 5px;
 margin: 2px;
	}

h1,h2,h3,h4,p{
border: 1px dotted #CCC;
padding: 5px;
	}

table{

margin-bottom:10px;

}

td {

color: #000;

font-size: 14px;

margin: 8px;

padding:10px;

vertical-align: top;

}

div{

border: 1px dotted #FF0000;

padding: 10px;

margin-bottom: 10px;

}

font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Arial, "ヒラギノ角ゴ Pro W3", "ＭＳＰゴシック", "Osaka",sans-serif;

}

p {

font-size: 14px;

line-height: 23px;

margin-bottom: 10px;

}

span{

border: 1px dotted #0CF;

padding: 5px;

margin: 2px;

}

h1,h2,h3,h4,p{

border: 1px dotted #CCC;

padding: 5px;

}

終わったらデータを上書きすれば完了です。

一度、キャッシュを削除しないと反映されないかもしれません。

まとめ

少しの手間ですが、一度設定すればずっと楽なので
自身のCSSなども書いておくと非常に記事を書くのが楽になりますよ。

※WordPressをバージョンアップすると消えてしまいます。