お客様が自分で記事を書く場合、ほとんど「ビジュアル」から入力されると思うけど、自動でCSSが書かれるものはまぁ、仕方ないものの、あらかじめclassが付与されるのもあるので、CSSを設定しておく。
都度都度書くのも手間なので、最近はwp.cssなどにまとめて流用している。
リセットCSSにもよるけど、だいたいこんな所かな、と。
.entry p { margin: 0 0 20px 0; zoom: 1; } .entry p strong { font-weight: bold; } .entry p img.aligncenter { display: block; margin: auto; } .entry p img.alignleft { float: left; margin: 0 10px 10px 0; } .entry p img.alignright { float: right; margin: 0 0 10px 10px; } .entry h1 { font-size: 2.4rem; font-weight: bold; margin: 0 0 20px 0; } .entry h2 { font-size: 2.2rem; font-weight: bold; margin: 0 0 20px 0; } .entry h3 { font-size: 2.0rem; font-weight: bold; margin: 0 0 20px 0; } .entry h4 { font-size: 1.8rem; font-weight: bold; margin: 0 0 20px 0; } .entry h5 { font-size: 1.6rem; font-weight: bold; margin: 0 0 20px 0; } .entry h6 { font-size: 1.4rem; font-weight: bold; margin: 0 0 20px 0; } .entry ul li { list-style: disc; margin: 5px 0 5px 20px; } .entry ol li { list-style: decimal; margin: 5px 0 5px 20px; } /* clearfix */ .entry p:before, .entry p:after { content: ""; display: table; } .entry p:after { clear: both; }
文字の大きさなどはお好みで。
入力画面でレイアウト出来ると思われるのが多いので、なかなか難しい所ではあるけれど、ビジュアルで充てたイメージを出来るだけ再現して、崩れにくく設定しておくのが後々のためにもいいですね。