[CSS]ボックスの左上にリボンっぽいワンポイントラベルをつける

最近やったカスタマイズを残しておこう第2弾。

数日前よりトップページ等で記事の左上に投稿タイプのラベルを貼っております。前回の[Wordpress]トップページに複数投稿タイプの最新記事を表示するを導入した際、なんの投稿タイプかわかるように追加したものです。

TEST

新着表示マーク等にも使えるかな?と思いますので、以下やり方を書いていきます。


スポンサーリンク

0.基本のHTML

今回、以下の単純なHTMLに対して装飾を行っていきます。

<div class="test_parent">
   <div class="test_label">
      TEST
   </div>
</div>

1.親&先祖要素のCSSコード

親要素(test-parentクラス)のCSSコードは以下のとおり。background-color以降は適宜調整してください。

.test_parent{
	display:block;
	position:relative;
	background-color:#ffc;
	width:50%;
	height:70px;
	margin-bottom: 20px;
}

親要素で注意する点は、positionをrelativeに設定しておくことです。

また、特殊な例ではありますが、先祖要素にoverflow:hidden;が設定されていないことも要確認です。WordPressのCatch Boxテーマはデフォルトで#contentのoverflowにhiddenが設定してあるので外す必要があります。私はこれでハマりました…。今のところhiddenを外して困ったことはありません。

ネットで見つけたCSSをそのまま貼ったのに、親ボックスの端で切れる!なんてときは、overflowを見直すと幸せになれるかもしれません。


スポンサーリンク

2.ラベル部分のCSSコード

こちらがラベル部分のコードです。

.test_label{
	position: absolute;
	top: -12px;
	left: 15px;
	padding:2px;
	color: #000;
	width: 44px;
	height: 30px;
	text-align: center;
	z-index: 30;
}
.test_label:before{
	content: " ";
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	border: 24px solid #93C1F9;
	border-top: 30px solid #93C1F9;
	border-bottom: 10px solid transparent;
}

装飾部分は:before擬似クラスで行います。

  • .test_labelも:beforeもpositionはabusolute
  • 位置調整は.test_labelのtopとleftで行う
  • :beforeのtopとleftは0にする
  • .test_labelのpadding×2+widthを:beforeのborder×2と一致させる
  • z-indexは.test_label>:beforeとなるようにする
  • :beforeのcontent:” “;は必須

ポイントはこの辺りでしょうか。ラベルの色は:beforeのborder、border-topで指定した色となります。

アレンジしてみる

ラベルの長さ(高さ?)を変更するには、border-topの太さを大きくしてやります。

  • border-top:40pxにした例
40px

boreder-bottomの太さを大きくすると、切れ込みが深くなります。

  • border-top:40px、border-bottom:20pxにした例
20px

こんな感じで、ええ風に使いまわして頂けますと幸いです。

この投稿の投稿者は おさみ です。ブックマーク用 パーマリンク

スポンサーリンク