【CSS】「counter-increment」を使って「WordPress Popular Posts」プラグインにランキング順位を付ける

本日ブログテーマをカスタマイズしました。すごくマイナーチェンジですが前からやってみたかったことを試してみたのでメモしておきます。

今回はサイドバーの「Popular Posts」に番号リストを付けました。WordPressなのでプログラムでやっているようにも見えますが、実はこれCSSだけで簡単に表示できるんです。

私が使用している「Wordpress Popular Posts」プラグインでランキング順位を付ける方法をご紹介します。

スポンサードリンク

counter-increment:指定した要素の連番(カウンタ)の値を進める

「counter-increment」は要素の順番を数えてくれるプロパティです。カウントした数値を表示するには擬似要素(:before・:after)を使用するのでIE7以下は非対応です。


<ol>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
</ol>

HTMLは普通にマークアップします。特に変わったところはありません。


ol {
	/* デフォルトのアイコンをリセット */
	list-style: none;
	
	/* li のカウンタを 0 にセット */ 
	counter-reset: li;
}
li:before {
	/* liの数をカウントする */
	counter-increment: li;
	
	/* カウントした数を表示 */
	content: counter(li);
}

カウントする要素の親要素(ここでは<ol>)に「counter-reset: li;」を付けると、<ol>が出てくる度にカウントをリセットして1から数え直します。

これを定義リストで行う

上の例では番号付きリストで行いましたが、私のブログはアイキャッチとタイトルを定義リストで組んでいます。方法は基本的に同じです。

WordPressの管理画面から外観→ウィジェットを選択し、「Wordpress Popular Posts」ウィジェットを追加します。

ウィジェットをクリックすると設定が展開されるので、お好みに合わせて設定します。
ちなみに私は以下のように設定しております。

タイトル
Popular Posts
表示する数
5投稿
時間間隔
24時間
並べ替え順
累計閲覧数
投稿設定
□ タイトルを短縮する
□ 抜粋を表示する
(チェックをはずす)
フィルタ
投稿タイプ
post
表示しない投稿ID・カテゴリID・投稿者ID
すべてチェックを外す
サムネール設定
✅投稿サムネールを表示する
(チェックをつける)
幅:
75ピクセル
高さ:
75ピクセル
統計タグ設定
すべてチェックを外す

最後の「HTMLマークアップの設定 カスタムHTMLマークアップを使う」をチェックして保存すると、下にフォームが出現します。
ここに定義リストを入れて自動で繰り返されるようにします。

以下のように設定しました。

タイトルの前後
空欄
投稿の前/後:
<div>/</div>
投稿用HTMLマークアップ:
<dl class="clearfix">
<dt>{thumb}</dt>
<dd>{title}</dd>
</dl>

あとはCSSで見た目を調整すれば完成です!


/* 関連記事 */
#wpp-3 div {
	/* dl のカウンタを 0 にセット */ 
	counter-reset: dl;

	/* 以下は見た目の調整
	(枠線表示) */
	border-bottom:1px solid #ccc;
}
#sidebar dl {
	/* dlの数をカウントする */
	counter-increment:dl;

	/* 以下は見た目の調整
	(余白や枠線の表示・絶対配置の基準点変更) */
	position:relative;
	padding:20px 30px 0 20px;
	border-bottom:1px solid #ccc;
}
#sidebar dl:before {
	/* カウントした数を表示 */
	content:counter(dl);

	/* 以下は見た目の調整
	(絶対配置で左上に順位を表示) */
	position:absolute;
	top:10px;
	left:10px;
	width:20px;
	height:20px;
	line-height:18px;
	text-align:center;
	color:#fff;
	background:#ffc045;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	border-radius:50%;
}
#sidebar dt {
	/* サムネイル部分を横並び・余白を付ける */
	float:left;
	width:75px;
	margin:0 20px 20px 0;
}
#sidebar dd {
	/* タイトル部分のフォントサイズや行間変更 */
	font-size:88%;
	line-height:1.8;
}

このようになりました。

順位がばっちり表示されてますね!

参考サイト

counter-increment-スタイルシートリファレンス

CSSのcounter-incrementを使ってリスト以外に番号を付ける方法|Webpark

[CSS] olの数字をCSSでいい感じに装飾する方法*prasm

まとめ

プログラムを使わずに要素をカウントできると色々なことに応用が効きそうですねこれ。また面白いCSSを見つけたら共有したいと思います。

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する