小見出しパーツ 三角形


スポンサーリンク

小見出しに複雑?な飾りをしたいときってありますよね?
ワードプレスのデフォルトのテーマにちょっと細工をするとかなり見栄えが良くなるし。
つかっていたテーマのナビの小見出しが味気がなかったのでちょっと作ってみた。

結論から
//ウィジェットタイトルで使う場合
    register_sidebar(array(
        'name' => 'ウィジェットエリア名',
        'before_widget' => '',
        'after_widget' => '<div>&nbsp;</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>&nbsp;</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;
}

komidasi-p

CSS で 三角形を作る


こういうパーツを作るとき欲しいのが三角形の要素。
CSSで三角形を作るとき、border を利用する。

sankeku-p
.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>
.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;
}
0.7em
テスト小見出し



高さに微妙な調整が必要かも。

で、色を合わせてヘッドのところにバーをつける。

CSS 小見出し


三角部分の高さに注意が必要。

文字を入れるところのクラスに上下のマージンとか、パディングが入るとその分増やさないといけない。

※左右は関係ない。

単位が em なので少数での調整が必要になってくる。

  • ワンポイント

em とは、使っているフォント ‘x’ の文字の高さを 1em と定義されている。

が!

概ね 1文字の高さと思った方がよさげ。どちらにしても em を使うときには微調整が必要になるからw
普通の状態(普通ってなんだ?って突っ込み禁止)で 0.7em で指定すると概ね1行の高さになってくれる。

テスト小見出し

上のCSS
<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 のサイズを微調整する必要があるのを忘れずに。
テスト小見出し


上の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'; ?>
<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>

スポンサーリンク