Posted by admin on 2月 21, 2011
WP CSS 付箋風
Posted under CSS, wordpress, wp css
◆付箋風のWordpress POST用のCSSの書き方◆
#content .post .post-entry .h2p {
margin-left: 15px;
}
#content .post .post-entry .h3p {
margin-left: 28px;
}
#content .post .post-entry h3 {
margin: 0.5em 5% 0.5em 0px; /* [上][右][下][左] */
padding: 0.3em 0.3em 0.1em 0.5em; /* [上][右][下][左] */
border-style: solid;
border-width: 0 0 1px 25px;
border-color: #b8b8b9;
font-size: 16px;
}
margin-left: 15px;
}
#content .post .post-entry .h3p {
margin-left: 28px;
}
#content .post .post-entry h3 {
margin: 0.5em 5% 0.5em 0px; /* [上][右][下][左] */
padding: 0.3em 0.3em 0.1em 0.5em; /* [上][右][下][左] */
border-style: solid;
border-width: 0 0 1px 25px;
border-color: #b8b8b9;
font-size: 16px;
}
#content .post .post-entry h4 {
margin: 0.5em 5% 0.5em 10px; /* TBRL*/
padding: 0.3em 0.3em 0.1em 0.5em; /* [上][右][下][左] */
border-style: solid;
border-width: 0 0 1px 25px;
border-color: #d8d8d9;
font-size: 12px;
◆POST記述方式◆
<h3>テスト</h3>
<div class=”h3p”>テストH3文章</div>
<h4>テスト</h4>
<div class=”h4p”>テストH4文章</div>
<div class=”h3p”>テストH3文章</div>
<h4>テスト</h4>
<div class=”h4p”>テストH4文章</div>
◆実際の表示形式◆