mainテキスト装飾
最終更新:2021/07/12
cssはmain.cssを使用しています。
見出し
見出しはテーマごとに変更するので都度確認してください。
cssは#mainの中にある場合です。page-lp.phpやpage-maxwidth.phpのテンプレートを使う場合は書き方が異なります。
※固定ページデフォルトのpage.phpは全体をid=”main”で囲んでいますが、他のテンプレートは違うidで囲んでいるためです。
見出しh2
html
|
1 |
<h2>見出しh2</h2> |
css
|
1 2 3 4 5 6 7 8 9 10 11 |
#main h2 { font-size: 1.3rem; position: relative; margin-bottom: 1.5rem; clear: both; border-left: 5px solid #ccc; background-color: #1a1a1a; padding: 0.8rem; font-weight: bold; color: #fff; } |
見出しh3
html
|
1 |
<h3>見出しh3</h3> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#main h3 { position: relative; margin: 0 0 1.5rem; padding: 0.8rem 1.2rem; background: #1a1a1a; color: #fff; font-size: 1.2rem; font-weight: bold; } #main h3:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #1a1a1a; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; } |
下線
addquicktag用にstyleで使っていたやつです。クラスで使えるようにしました。
テキストテキストテキスト【下線】赤＿
テキストテキストテキスト【下線】黒＿
html
|
1 2 |
<p><span class="under_r">テキストテキストテキスト【下線】赤＿</span></p> <p><span class="under_b">テキストテキストテキスト【下線】黒＿</span></p> |
css
|
1 2 3 4 5 6 |
.under_r{ border-bottom:solid 2px #ce0823; } .under_b{ border-bottom:solid 2px #000; } |
太字
addquicktag用にstyleで使っていたやつです。クラスで使えるようにしました。
テキストテキストテキスト【太字】赤
html
|
1 |
<p><span class="color_r">テキストテキストテキスト【太字】赤</span></p> |
css
|
1 2 3 4 |
.color_r{ color: #ce0823; font-weight: bold; } |
テキスト背景色
addquicktag用にstyleで使っていたやつです。クラスで使えるようにしました。
テキストテキストテキスト【マーカー】キイロ
テキストテキストテキスト【マーカー】ピンク
テキストテキストテキスト【マーカー】ブルー
テキストテキストテキスト【マーカー】グリーン
テキストテキストテキスト【マーカー】グレー
html
|
1 2 3 4 5 |
<p><span class="marker_y">テキストテキストテキスト【マーカー】キイロ</span></p> <p><span class="marker_p">テキストテキストテキスト【マーカー】ピンク</span></p> <p><span class="marker_b">テキストテキストテキスト【マーカー】ブルー</span></p> <p><span class="marker_g">テキストテキストテキスト【マーカー】グリーン</span></p> <p><span class="marker_gray">テキストテキストテキスト【マーカー】グレー</span></p> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.marker_y{ background-color: #fff799; } .marker_p{ background-color: #f8abae; } .marker_b{ background-color: #8ed6f9; } .marker_g{ background-color: #bae0a8; } .marker_gray{ background-color: #eeeeee; } |
フォント関連
t1~t4はテーマごとに色を変更するので都度確認してください。
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
html
|
1 2 3 4 |
<p class="t1"><span>テキストテキストテキスト</span></p> <p class="t2"><span>テキストテキストテキスト</span></p> <p class="t3"><span>テキストテキストテキスト</span></p> <p class="t4"><span>テキストテキストテキスト</span></p> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.t1 { font-size: 1.8rem; color: #ccc; font-weight: bold; } .t2 { font-size: 1.6rem; color: #ccc; font-weight: bold; } .t3 { font-size: 1.4rem; color: #ccc; font-weight: bold; } .t4 { font-size: 1.1rem; color: #ccc; font-weight: bold; } |
テキストテキストテキスト
html
|
1 |
<p class="txt-small">テキストテキストテキスト</p> |
css
|
1 2 3 4 |
.txt-small { font-size: 0.8rem; color: #565656; } |
テキストテキストテキスト
html
|
1 |
<p class="txtmin">テキストテキストテキスト</p> |
css
|
1 2 3 4 |
.txtmin { font-size: 1.2rem; font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } |