【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;
}
このようになりました。
順位がばっちり表示されてますね！
広告を表示できません。
参考サイト
まとめ
プログラムを使わずに要素をカウントできると色々なことに応用が効きそうですねこれ。また面白いCSSを見つけたら共有したいと思います。
-
広告を表示できません。