ウィジェット「WordPress Popular Posts」【CSS】人気記事に番号を付ける。opacityプロパティ&RGBAカラーモデル

 

ウィジェット「WordPress Popular Posts」に順位を付けてみました。

アイキャッチ 75px 表示だとこんな感じ。

 

 

アイキャッチ 100px 表示の場合。

 

 

CSS

 

/* 人気記事ウィジェットWordPress Popular Postsカウンタ */
.wpp-list li:before {
display: block;
margin-bottom: -27px;
margin-left: -3px;
}

/* カウンタをリセット */
body {
counter-reset: wpp-ranking;
}

/* 一覧の表示スタイル */
.wpp-list li {
margin-bottom:20px;
position: relative;
}

/* 順位ラベルを表示 */
.wpp-list li:before {
content: counter(wpp-ranking, decimal)’位’;
counter-increment: wpp-ranking;
background: rgba(0, 0, 0, 0.5);/* 背景(赤の度合い, 緑の度合い, 青の度合い, Alpha透明度) */
color: #ffffff;/* 文字色 */
font-size: 14px;/* 文字サイズ */
line-height: 1;
padding: 4px 8px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}

 

色の透過

 

backgroundはrgbaで表示すると透過させることができる

たとえば「background: #000000;」だと真っ黒。

 

背景色は半透明、文字色は不透明にする場合はrgba表記

background: rgba(0, 0, 0, 0.5);

左から(赤の度合い, 緑の度合い, 青の度合い, Alpha透明度)。

 

背景も文字も半透明にしたい場合はopacityプロパティを使う

opacity: 0.5;
background-color: #000000;/* 背景色 */
color: #ffffff;/* 文字色 */

 

RGBカラーモデルを使用する場合は0〜255の10進数で指定する

以下ほんの1部サンプル。

  • 黒 (0, 0, 0, 0.5)
  • 白 (255, 255, 255)
  • 赤 (255, 0, 0)
  • 緑 (0, 255, 0)
  • 青 (0, 0, 255)
  • 水色 (170 202, 222)
  • 桜色 (252 238, 235)

 

本当はタイトルテキストに順位を付けたい

 

テキストを少し右にずらせたら良いのですが、方法は分かりませんでした。