小見出しパーツ 三角形
ワードプレスのデフォルトのテーマにちょっと細工をするとかなり見栄えが良くなるし。
つかっていたテーマのナビの小見出しが味気がなかったのでちょっと作ってみた。
結論から
//ウィジェットタイトルで使う場合 register_sidebar(array( 'name' => 'ウィジェットエリア名', 'before_widget' => '', 'after_widget' => '<div> </div>', 'before_title' => '<div class="wiget_title_bar"><div class="wiget_title">', 'after_title' => '</div><div class="wiget_title_tail"></div><br clear="all"><div style="clear:both;"></div></div>' )); // 直接貼り付ける場合 <div> </div> <div class="wiget_title_bar"><div class="wiget_title"> </div><div class="wiget_title_tail"></div><br clear="all"><div style="clear:both;"></div></div><br />
CSS (色の変更は#79C172 を変える)
.wiget_title_bar{ border-top:5px solid #79C172; } .wiget_title{ padding:0 10px; background-color:#79C172; color:#fff; float:left; } .wiget_title_tail{ width: 0px; height: 0px; border-top: 0.7em solid #79C172; border-right: 0.7em solid transparent; border-bottom: 0.7em solid transparent; border-left: 0.7em solid #79C172; float:left; }
CSS で 三角形を作る
こういうパーツを作るとき欲しいのが三角形の要素。CSSで三角形を作るとき、border を利用する。
.borders{ width: 0; height: 0; border-top: 80px solid #f00; border-right: 80px solid #0f0; border-bottom: 80px solid #00f; border-left: 80px solid #000; }
<div class="borders"></div>
border-top | ||
border-left | border-right | |
border-bottom |
CSS で作る三角形
border-のトップとレフトを組み合わせる。(わかりやすいように left の色を薄くしました).borders1{ width: 0; height: 0; border-top: 80px solid #f00; border-right: 80px solid #fff; border-bottom: 80px solid #fff; border-left: 80px solid #f99; }
<div class="borders"></div>
border-top | ||
border-left | border-right | |
border-bottom |
CSSで右側が斜めの箱を作る
前述の三角形の前に塗りつぶしの箱を作ればいいわけ。<div class="fullbox">テスト小見出し</div><div class="borders1"></div>
.fullbox{ background-color:#99f; color:#fff; }
テスト小見出し
div を使っているのでずれちゃうのとボーダーサイズが 80px なのでどうしても一致しない。
div 要素を横に並べる
このページでもあるように→DIV で BOX を横に並べる float を使えばいいわけだ。<div class="fullbox2">テスト小見出し</div><div class="borders2"></div> <br clear="all"><div style="clear:both;"></div><?php $a = '0.7' . 'em'; ?>
.fullbox2{ background-color:#99f; color:#fff; } .borders2{ width: 0; height: 0; border-top: 0.7em solid #f00; border-right: 0.7em solid transparent; border-bottom: 0.7em solid transparent; border-left: 0.7em solid #f99; float:left; }<?php echo $a; ?>
テスト小見出し
高さに微妙な調整が必要かも。
で、色を合わせてヘッドのところにバーをつける。
CSS 小見出し
三角部分の高さに注意が必要。文字を入れるところのクラスに上下のマージンとか、パディングが入るとその分増やさないといけない。
※左右は関係ない。
単位が em なので少数での調整が必要になってくる。
[C: arrow]ワンポイント[/C]
em とは、使っているフォント ‘x’ の文字の高さを 1em と定義されている。
が!
概ね 1文字の高さと思った方がよさげ。どちらにしても em を使うときには微調整が必要になるからw
普通の状態(普通ってなんだ?って突っ込み禁止)で 0.7em で指定すると概ね1行の高さになってくれる。
em とは、使っているフォント ‘x’ の文字の高さを 1em と定義されている。
が!
概ね 1文字の高さと思った方がよさげ。どちらにしても em を使うときには微調整が必要になるからw
普通の状態(普通ってなんだ?って突っ込み禁止)で 0.7em で指定すると概ね1行の高さになってくれる。
<?php $b='1'.'em'; ?>
テスト小見出し
<div style="border-top:5px solid #99f;"> <div class="fullbox3">テスト小見出し</div><div class="borders3"></div <br clear="all"><div style="clear:both;"></div> </div>
<style> .fullbox3{ padding:5px; background-color:#99f; color:#fff; float:left; } .borders3{ width: 0px; height: 0px; border-top: 1em solid #99f; border-right: 1em solid transparent; border-bottom: 1em solid transparent; border-left: 1em solid #99f; float:left; } </style>
CSS の小見出し、こんなのができました。
上下の調整が面倒なので 上下のパディングを0にした。
小見出しの小見出しって感じ。それなりに高さを付けたい場合は border のサイズを微調整する必要があるのを忘れずに。 <?php $c='0.7'.'em'; ?>
テスト小見出し
上のCSS
<div style="border-top:5px solid #99f;"> <div class="fullbox4">テスト小見出し</div><div class="borders4"></div> <br clear="all"><div style="clear:both;"></div> </div>
<style> .fullbox4{ padding:0 10px; background-color:#99f; color:#fff; float:left; } .borders4{ width: 0px; height: 0px; border-top: 0.7em solid #99f; border-right: 0.7em solid transparent; border-bottom: 0.7em solid transparent; border-left: 0.7em solid #99f; float:left; } </style>
インラインとPHPを使って、その場で色を変える
※ EXEC-PHP プラグインを入れとくのを忘れないように。 <?php $mycolor='#f99'; ?>テスト小見出し
↓これで色を指定 <?php $mycolor='#f99'; ?> <div style="border-top:5px solid <?php echo $mycolor; ?>;"> <div class="fullbox5">テスト小見出し</div><div class="borders5"></div <br clear="all"><div style="clear:both;"></div> </div>
<style> .fullbox5{ padding:0 10px; background-color:<?php echo $mycolor; ?>; color:#fff; float:left; } .borders5{ width: 0px; height: 0px; border-top: 0.7em solid <?php echo $mycolor; ?>; border-right: 0.7em solid transparent; border-bottom: 0.7em solid transparent; border-left: 0.7em solid <?php echo $mycolor; ?>; float:left; } </style>
スポンサーリンク