WordPressの投稿部分に使えるサンプルhtml, css

WordPressにあるビジュアルエディタ上で使えるCSS設定をまとめました。 1記事のdiv箱が「post」、本文エリアは別途「post_body」というdivを作成して分けています。

プレビューのための文章

    
その時の私は屈托（くったく）がないというよりむしろ無聊
<div class="postbody">
    <h3>生に会った時刻を見計らって、わざわざ掛茶屋（かけぢゃや）まで出かけてみた</h3>
    <h4>ぎわらぼう）を被（かぶ）ってやって来た。先生は眼鏡（めがね）</h4>
    <h5>で、すたすた浜を下りて行った。先生が昨日（きのう）のように騒が</h5>
    <h6>た時、私は急にその後（あと）が追い掛けたくなった。私は浅い水を頭の上まで跳</h6>

    <p>私（わたくし）は<strong>その人を常に先生と呼んでいた。</strong>。これは世間を憚（はば）かる遠慮というよりも、<em>その方が私にとって自然だからである</em>。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執（と）っても心持は同じ事である。よそよそしい頭文字（かしらもじ）などはとても使う気にならない。</p>

    <p>私は単に好奇心のために、<span class="menu">ファイル</span>→<span class="menu">新規保存...</span>並んで浜辺を下りて行く二人の後姿（うしろすがた）を見守っていた。すると彼らは真直（まっすぐ）に波の中に足を踏み込んだ。そうして遠浅（とおあさ）の磯近（いそちか）くにわいわい騒いでいる多人数（たにんず）の間（あいだ）を通り抜けて、比較的広々した所へ来ると、二人とも泳ぎ出した。<span class="kbd">保存</span>彼らの頭が小さく見えるまで沖の方へ向いて行った。それから引き返してまた一直線に浜辺まで戻って来た。掛茶屋へ帰ると、井戸の水も浴びずに、すぐ身体（からだ）を拭（ふ）いて着物を着て、さっさとどこへか行ってしまった。</p>

    <ul>
    <li>その西洋人の優れて白い皮膚の色が、掛茶屋へ入るや否（いな）や</li>
    <li>すぐ私の注意を惹（ひ）いた。純粋の日本の浴衣（ゆかた）を着ていた彼は、</li>
    <li>それを床几（しょうぎ）の上にすぽりと放（ほう）り出したまま、腕組みをして海の方を向いて立っていた。彼は我々の穿（は）く猿股（さるまた）一つの外（ほか）何物も肌に着けていなかった。</li>
    <li>私の尻（しり）をおろした所は少し小高い丘の上で、そのすぐ傍（わき）がホテルの裏口になっていたので</li>
    </ul>

    <ol>
    <li>その西洋人の優れて白い皮膚の色が、掛茶屋へ入るや否（いな）や</li>
    <li>すぐ私の注意を惹（ひ）いた。純粋の日本の浴衣（ゆかた）を着ていた彼は、</li>
    <li>それを床几（しょうぎ）の上にすぽりと放（ほう）り出したまま、腕組みをして海の方を向いて立っていた。彼は我々の穿（は）く猿股（さるまた）一つの外（ほか）何物も肌に着けoていなかった。</li>
    <li>私の尻（しり）をおろした所は少し小高い丘の上で、そのすぐ傍（わき）がホテルの裏口になっていたので</li>
    </ol>

    <dl>
        <dt>私（わたくし）は次の日も同じ時刻に</dt>
        <dd>その上先生の態度はむしろ非社交的であった。一定の時刻に超然として来て、また超然と帰って行った。</dd>

        <dt>私（わたくし）は次の日も同じ時刻に</dt>
        <dd>その上先生の態度はむしろ非社交的であった。一定の時刻に超然として来て、また超然と帰って行った。</dd>

        <dt>私（わたくし）は次の日も同じ時刻に</dt>
        <dd>その上先生の態度はむしろ非社交的であった。一定の時刻に超然として来て、また超然と帰って行った。</dd>

        <dt>私（わたくし）は次の日も同じ時刻に</dt>
        <dd>その上先生の態度はむしろ非社交的であった。一定の時刻に超然として来て、また超然と帰って行った。</dd>
    </dl>

    <blockquote>
    次の日私は先生の後（あと）につづいて海へ飛び込んだ。そうして先生といっしょの方角に泳いで行った。二丁（ちょう）ほど沖へ出ると、先生は後ろを振り返って私に話し掛けた。広い蒼（あお）い海の表面に浮いているものは、その近所に私ら二人より外（ほか）になかった。そうして強い太陽の光が、眼の届く限り水と山とを照らしていた。私は自由と歓喜に充（み）ちた筋肉を動かして海の中で躍（おど）り狂った。先生はまたぱたりと手足の運動を已（や）めて仰向けになったまま浪（なみ）の上に寝た。私もその真似（まね）をした。青空の色がぎらぎらと眼を射るように痛烈な色を私の顔に投げ付けた。「愉快ですね」と私は大きな声を出した。
    </blockquote>

</div><!-- /postbody -->


CSS
div.post {
}
div.post h2 {
}
/* postbody */
div.postbody {
}
div.postbody h3 {
}
div.postbody h4 {
}
div.postbody h5 {
}
div.postbody h6 {
}
div.postbody p {
}
div.postbody strong {
}
div.postbody em {
}
div.postbody ul {
}
div.postbody ul li {
}
div.postbody ol {
}
div.postbody ol li {
}
div.postbody dl {
}
div.postbody dt {
}
div.postbody dd {
}
div.postbody blockquote {
}
/* option */
div.postbody span.kbd {
}
div.postbody span.menu {
}
div.postbody span.ico {
}