たまには技術的なことも書きましょう。
当ブログでもお世話になっているプラグイン『WordPress Popular Posts』。
ときどき何かが起こったりしたものの、最近が問題なく、投稿の順位を集計してくれてます。
フッターにTOP5を表示して、右のスライダーには直近公開の人気投稿を表示してます。
要は、重宝しとるわけです。
ここで要望が出るわけ。
『順位を表示させたい！』
『他のサイトみたいにカッコよくアレンジしたい！』
順位表示がない。Top 5程度なら、まだ大丈夫かもだけど。
で、ネットで調べて、CSS書いてみたんだけどうまくいかず。。
ちゃんと技術から調べたよ。
今回書いたCSSも載せとくよ。
備忘録ね。
こうしたい！
画像の左上に順位の番号を付けたいのです。
WordPress Plpular Posts
人気の投稿を集計して、表示してくれるプラグイン。
当ブログでも実装済み。
フッターの表示を見ると分かるんだけど、順位の番号が表示できないんだ。
ウチの場合は、表示用のCSSを別のものにしちゃってるからなおさら話がややこしくて。。
別のページにショートコードで埋め込んだときに、やっぱり順位の番号はあった方が分かりやすいよね、って話になった。
ショートコードも別途書いときます。
[PS-Ad-AMP]
今回書いたCSS
「WordPress Plpular Posts」じゃなくても使える。
普通にイメージ付きのリストをHTMLで書く時にも大丈夫なように実験済み。
パラメーターは好みで調整してください。
ol.wnkhsCount {
counter-reset: item;
list-style-type: none!important;
}
ol.wnkhsCount li {
position: relative;
counter-increment: item;
max-width: 400px;
clear: both;
}
ol.wnkhsCount li:before {
content: counter(item);
display: block;
position: absolute;
left: 0;
top: 0;
/* ↓ 装飾 ↓ */
width: 1.5em;
height: 1.5em;
color: #ffffff;
background-color: #6897e5;
text-align: center;
font-weight: bold;
}
ol.wnkhsCount li img {
vertical-align: top;
margin-bottom: 1.5em;
margin-right: 0.5em;
float: left;
}
あちこちのサイトから拾ってきて、貼り合わせて、自分でアレンジ加えた結果、こうなった。
今回書いたショートコード
リファレンスから例を拾って書いた。
日本語はお好みで。サムネ幅とかクラス名も、状況に合わせて調整。
今回勉強した技術
お勉強したのは以下。
- CSSでのカウンター
- 「:before」という書き方
- ポジション
- ブロック表示
1. カウンター
上記のリストは<ol>～</ol>で、オプション指定なしで、デフォルトのカウントアップしてる。
けど、今回みたいに見出し数字だけ装飾するオプションはCSSにない。
だから、カウンターを使って値を書いて、それを装飾しようというわけ。
ulでもolでもいいんだけど、styleで見出し文字は消しとく必要あり。
基本の書き方は以下。
ol.wnkhsCount {
counter-reset: item;
list-style-type: none;
}
ol.wnkhsCount li {
counter-increment: item;
}
ol.wnkhsCount li:before {
content: counter(item);
/* ↓ 装飾 ↓ */
}
『装飾』てとこに背景色とか文字色とか書けば、見出し文字列を自由にできる。
幅とかマージンとか指定しないと、単体要素ではまあまあ残念な感じｗ
見出し数字が消えないかも。「!important」を試してみて、だめならこれだけ直書きかな。
2. 「:before」という書き方
疑似的に、要素の前にCSSを書いたようなかたちにできる。
後ろに書くには「:after」。
クラス名などの要素をたくさん書く必要がないので、コードがすっきりするよね、という話。
今回も明示的に書けて分かりやすい！
3. ポジション
見出し文字を「position: absolute;」で書いてるんだけど、親要素を明示してあげないと大変なことになる。
今回ここでもけっこうハマった。。
「li」の方に『position: relative;』を書いておかなきゃいけなかったのね。
パクりコードにこれがなかったせいで、見出し文字がページの左上に集まっちゃったｗ
いや～、まいったまいったｗ
static以外の親要素に対するabsoluteなんだって。
4. ブロック表示
これまであんまり気にしてなかったんだけど、要素内にするか要素外にするか、みたいな感覚。
厳密には違うんだけど。
block指定すると、そこだけ切り出される。
今回はこの機能を使って、見出し数字部分をブロック化してる。
おかげで背景色とかとかの装飾が限定的に効く、と。
[PS-Ad-AMP]
実験状態
例の「:before」という書き方は、CSSをあらかじめ書いとく必要があって。
だからって、style.cssをいきなり編集するのはちょっと。。
いくら適当でも、他への影響が大きそうなことには慎重になるんだよ。
で、実験のために、HTML非推奨だけど、<body>～</body>部分に<style>～</style>を書いて、そこにCSSを書いた。
適用の優先順位が微妙に異なるとか、まあいろいろあるにしても、まずは実験！
別途調査の上、style.cssにも反映できるかな。
そんときはステージング環境で確認するのかな。
さいごに
まだまだやってみたいことはあるから、ちょっとずつ勉強して実装していこう！！
急がば回れなんだよ。
結局、ちゃんとお勉強したほうが早く実装できるってもんよ。
よろしければ、ライターのTwitter（@SubShine_wnkhs）をフォローしてやってください。
@SunShine_wnkhs
最新情報をお届けします！！
ご意見やご感想などお聞かせください！ コメント機能です。